vue项目中实现echarts的toolbox自定义一键复制功能，自定义icon-----附详解

在echarts中，官方内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具。但是想要实现像这样的一键复制功能，就需要自定义设置。

效果图：

 点击复制后，粘贴到记事本就是这样的：

 实现步骤：

一、先安装复制需要的插件

npm install vue-clipboard2 --save

二、全局注入该插件

在main.js中加入画红框的两句：

import VueClipBoard from 'vue-clipboard2'
Vue.use(VueClipBoard)

二、 在echarts图表配置中加入toolbox，位置如下图所示：

注：① 图中的dataView是toolbox里面内置的工具数据视图，myTool1是自定义的复制工具，自定义取名字必须以my开头，例如myTool、myCopyTool等

下图是自定义工具的完整代码，后面有详解每个属性的功能

1、icon就是需要显示的小图标，这里我是用的本地图片，图片路径如图：

        ①本地图片就是这样写：icon: "image:///image/copy.png",

        ②如果是图片链接就写‘image://http://xxx.xxx.xxx/copy.png’

        ③如果是base64格式的图片，就按照这样的格式写：'image://data:copy/png;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6Q'

2、onclick的函数里面写点击该工具后要执行的事件

3、该柱状图里面我的图表数据是这样的：

chartData: {
      type: Array,
      default() {
        return [
          {
            name: "a",
            value: 10,
          },
          {
            name: "b",
            value: 20,
          },
          {
            name: "c",
            value: 40,
          },
          {
            name: "d",
            value: 30,
          },
        ];
      },
    },

我把数据如下图这样处理了一下，为了方便给横坐标和纵坐标给数据，大家需要根据自己实际的数据来变化：

 注：①、这里的dataX_copy和dataY_copy就是复制时要用的数据。之所以要用data里面定义的数据重新赋值一下而不直接用dataX和dataY，是因为我在调试过程中发现如果用函数中定义的数据的话，页面刷新一下就会复制失败，大家可以试一下。

②、还要注意的是绿色框起来的部分，需要先将this赋值给me（这个名字可以随便取），因为接下来this的指向会发生变化。

4、定义一个aaa字符串来拼接需要复制的内容，其中\r\n是为了复制出来的数据每行都有换行，否则的话就是一整行，观看时不美观。

me.$copyText就是使用我们第一步下载的那个复制的插件，将我们需要复制在剪切板上的内容放在括号里就可以

该讲解主要是实现功能，更多样式的配置可以查看官方文档：makeapie - ECharts文档

 ps：字有点多，可能说的有点啰嗦了。。大家有什么问题可以评论区留言，一起探讨