Echarts dataview 实现点击复制图中文字数据
站长
· 阅读数 12
一、需求
写文章之前先贴一张bug图。测试提bug啦，产品名称太长不能复制用户体验很差！他希望y轴的value可以复制！
喏，就是下图：
二、寻寻觅觅
要在生成的canvas上复制数据这是个很棘手的问题，如何实现呢？苦思良久各种百度goole还是没找到答案，仔细研究了xy轴的配置参数也还是一头雾水。 看到大佬的博客“# Echarts 图表，解决不能复制图中信息问题，点击复制图中文字数据”以为胜利的曙光。
tooltip: { //提示框组件 用于复制时间用
enterable: true, //鼠标是否可进入提示框浮层中
trigger: 'axis', //触发类型, 'axis'坐标轴触发
triggerOn:"click", //提示框触发的条件,'click'鼠标点击时触发
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' //触发为一整行
},
formatter: function (params) { //提示框浮层内容格式器 — 在这我用于定制个人数据
var tar = params[1]; //获取到参数
return tar.name ; //把时间数据 return 出去
}
},
. //提示框组件
*{
-webkit-user-select: text !important;
user-select: text !important;
}
他还特别交代：注意：上面的 css，必须写的，要不然复制不了(以上来自：blog.csdn.net/weixin_6138… 不知道是不是我理解有误，经过一番操作并没有实现我的需求（求大佬指点）。
三、dataview的出现
放上各种寻觅不得答案，请教了我的摸鱼搭子，真是一语惊醒梦中人！ 果然echarts的toolbox中有数据转换的功能：dataview。
toolbox: {
show : true, //是否显示工具栏组件
showTitle:false, //是否在鼠标 hover 的时候显示每个工具 icon 的标题
feature : {
mark : { // '辅助线开关'
show: true
},
dataView : { //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新
show: true, //是否显示该工具。
title:"数据视图",
readOnly: false, //是否不可编辑（只读）
lang: ['数据视图', '关闭', '刷新'], //数据视图上有三个话术，默认是['数据视图', '关闭', '刷新']
backgroundColor:"#fff", //数据视图浮层背景色。
textareaColor:"#fff", //数据视图浮层文本输入区背景色
textareaBorderColor:"#333", //数据视图浮层文本输入区边框颜色
textColor:"#000", //文本颜色。
buttonColor:"#c23531", //按钮颜色。
buttonTextColor:"#fff", //按钮文本颜色。
},
},
}
数据转换生成的样式简单粗暴，还需要给它稍微的加工加工。
给dataview添加optionToContent的属性，虽然不能完全按照测试的意思实现需求，但是也不失为一个围魏救赵的办法。
dataView : {
optionToContent:function(opt){
var axisData = opt.yAxis[0].data;
var series = opt.series;
var table = '<table class="ap-table"><tbody><tr class="dataViewTr">'
+ '<td class="dataViewHead">' + '记录要点'+ '</td>'
+ '<td class="dataViewHead">' + '完成进度' + '</td>'
+ '</tr>';
for (var i = 0, l = axisData.length; i < l; i++) {
table += '<tr class="dataViewTr">'
+ '<td class="dataViewTd">' + axisData[i] + '</td>'
+ '<td class="dataViewTd">' + series[0].data[i] + '</td>'
+ '</tr>';
}
table += '</tbody></table>';
return table;}
},
不知道大佬们还有没有其他的解决办法。 下面贴一份toolbox的配置方便以后使用（来自：blog.csdn.net/zxl_start/a…
options:{
toolbox:{
show : true, //是否显示工具栏组件
orient:"horizontal", //工具栏 icon 的布局朝向'horizontal' 'vertical'
itemSize:15, //工具栏 icon 的大小
itemGap:10, //工具栏 icon 每项之间的间隔
showTitle:true, //是否在鼠标 hover 的时候显示每个工具 icon 的标题
feature : {
mark : { // '辅助线开关'
show: true
},
dataView : { //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新
show: true, //是否显示该工具。
title:"数据视图",
readOnly: false, //是否不可编辑（只读）
lang: ['数据视图', '关闭', '刷新'], //数据视图上有三个话术，默认是['数据视图', '关闭', '刷新']
backgroundColor:"#fff", //数据视图浮层背景色。
textareaColor:"#fff", //数据视图浮层文本输入区背景色
textareaBorderColor:"#333", //数据视图浮层文本输入区边框颜色
textColor:"#000", //文本颜色。
buttonColor:"#c23531", //按钮颜色。
buttonTextColor:"#fff", //按钮文本颜色。
},
magicType: { //动态类型切换
show: true,
title:"切换", //各个类型的标题文本，可以分别配置。
type: ['line', 'bar'], //启用的动态类型，包括'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式）, 'tiled'（切换为平铺模式）
},
restore : { //配置项还原。
show: true, //是否显示该工具。
title:"还原",
},
saveAsImage : { //保存为图片。
show: true, //是否显示该工具。
type:"png", //保存的图片格式。支持 'png' 和 'jpeg'。
name:"pic1", //保存的文件名称，默认使用 title.text 作为名称
backgroundColor:"#ffffff", //保存的图片背景色，默认使用 backgroundColor，如果backgroundColor不存在的话会取白色
title:"保存为图片",
pixelRatio:1 //保存图片的分辨率比例，默认跟容器相同大小，如果需要保存更高分辨率的，可以设置为大于 1 的值，例如 2
},
dataZoom :{ //数据区域缩放。目前只支持直角坐标系的缩放
show: true, //是否显示该工具。
title:"缩放", //缩放和还原的标题文本
xAxisIndex:0, //指定哪些 xAxis 被控制。如果缺省则控制所有的x轴。如果设置为 false 则不控制任何x轴。如果设置成 3 则控制 axisIndex 为 3 的x轴。如果设置为 [0, 3] 则控制 axisIndex 为 0 和 3 的x轴
yAxisIndex:false, //指定哪些 yAxis 被控制。如果缺省则控制所有的y轴。如果设置为 false 则不控制任何y轴。如果设置成 3 则控制 axisIndex 为 3 的y轴。如果设置为 [0, 3] 则控制 axisIndex 为 0 和 3 的y轴
},
},
zlevel:0, //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
z:2, //所属组件的z分层，z值小的图形会被z值大的图形覆盖
left:"center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
top:"top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
right:"auto", //组件离容器右侧的距离,'20%'
bottom:"auto", //组件离容器下侧的距离,'20%'
width:"auto", //图例宽度
height:"auto", //图例高度
};
}
边学习边整理，如有问题欢迎指正，大家一起加油！侵删~