在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:字有点多,可能说的有点啰嗦了。。大家有什么问题可以评论区留言,一起探讨