Echarts dataview 实现点击复制图中文字数据

一、需求

写文章之前先贴一张bug图。测试提bug啦,产品名称太长不能复制用户体验很差!他希望y轴的value可以复制! 喏,就是下图:

二、寻寻觅觅

要在生成的canvas上复制数据这是个很棘手的问题,如何实现呢?苦思良久各种百度goole还是没找到答案,仔细研究了xy轴的配置参数也还是一头雾水。 看到大佬的博客"# Echarts 图表,解决不能复制图中信息问题,点击复制图中文字数据"以为胜利的曙光。

js 复制代码
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...%25E3%2580%2582 "https://blog.csdn.net/weixin_61382400/article/details/127010308)%E3%80%82") 不知道是不是我理解有误,经过一番操作并没有实现我的需求(求大佬指点)。

三、dataview的出现

放上各种寻觅不得答案,请教了我的摸鱼搭子,真是一语惊醒梦中人! 果然echarts的toolbox中有数据转换的功能:dataview。

js 复制代码
 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的属性,虽然不能完全按照测试的意思实现需求,但是也不失为一个围魏救赵的办法。

js 复制代码
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...

js 复制代码
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",                              //图例高度
};
}

边学习边整理,如有问题欢迎指正,大家一起加油!侵删~

相关推荐
CodeToGym3 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫4 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫8 分钟前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js
Cwhat10 分钟前
前端性能优化2
前端
熊的猫1 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
会发光的猪。1 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode
别拿曾经看以后~3 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死3 小时前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试3 小时前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana