Echart图一键复制剪切板，办公聊天更便捷

2022-11-23 12:02:54

一键搞定：轻松复制 EChart 图到剪贴板

在日常工作中，我们经常需要将 EChart 图复制到聊天软件或文档编辑器中，以便与同事或客户分享。然而，传统的复制方法需要先截图，然后再粘贴，操作起来比较麻烦。

现在，有一个更简单的方法可以一键将 EChart 图复制到剪贴板，然后直接粘贴到聊天软件或文档编辑器中。下面我们将详细介绍实现步骤：

1. 安装 ECharts 库

首先，我们需要安装 ECharts 库，这是一个用于生成交互式图表的可视化库。它提供了丰富的图表类型，可以满足各种数据可视化需求。

npm install echarts

2. 创建 EChart 图

接下来，我们需要创建一个 EChart 图。我们可以使用 ECharts 提供的 API 来创建各种类型的图表。

var myChart = echarts.init(document.getElementById('myChart'));

var option = {
    title: {
        text: 'EChart 图'
    },
    xAxis: {
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [10, 20, 30, 40, 50, 60, 70],
        type: 'line'
    }]
};

myChart.setOption(option);

3. 添加复制按钮

在 EChart 图下方，我们添加一个按钮，用于触发复制功能。

<button id="copy-btn">复制</button>

4. 编写 JavaScript 代码

接下来，我们需要编写 JavaScript 代码来实现复制功能。

document.getElementById('copy-btn').addEventListener('click', function() {
    var canvas = myChart.getDom().getElementsByTagName('canvas')[0];
    var dataURL = canvas.toDataURL();

    navigator.clipboard.writeText(dataURL).then(function() {
        alert('复制成功');
    }, function() {
        alert('复制失败');
    });
});