echarts自定义表格样式后不能鼠标选中内容

最新推荐文章于 2023-03-29 17:50:08 发布

厚积而薄发1528

最新推荐文章于 2023-03-29 17:50:08 发布

阅读量1.2k

点赞数 2

分类专栏：前端 Echarts 文章标签： echarts自定义datavie后不能选择

本文链接：https://blog.csdn.net/qq_38519358/article/details/100134062

版权

前端同时被 3 个专栏收录

46 篇文章 0 订阅

订阅专栏

21 篇文章 0 订阅

订阅专栏

Echarts

7 篇文章 0 订阅

订阅专栏

echarts图表数据视图自定义功能后不能鼠标选择

不知道大家改造echarts的dataview数据视图后有没有发现，不能进行选择复制了，这个还是比较刚需的，因此研究了一下，给出了解决方法：

在optionToContent事件返回的数据最外层添加css样式：“user-select: text”属性；

代码如下：

dataView: {
        optionToContent: (opt) => {
          const axisData = opt.rawData.valueData;
          const series = opt.rawData.yAxisData;
          let table = `<table border style="user-select:text;width:100%;text-align:center;color:#000"><tbody><tr>
            <td>省份</td>
            <td>车辆上线数量</td>
            </tr>`;
          for (let i = 0, l = axisData.length; i < l; i += 1) {
            table += `<tr>
              <td>${series[i]}</td>
              <td>${axisData[i]}</td>
              </tr>`;
          }
          table += '</tbody></table>';
          return table;
        },
      },

我是添加在table标签内的，大家可以根据自己实际情况来进行相应替换；

小伙伴们感觉有帮助的话希望点个赞哟，如果有问题或疑问欢迎大家评论区留言，看到后第一时间回复。