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

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标签内的,大家可以根据自己实际情况来进行相应替换;

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

    原文作者:厚积而薄发1528
    原文地址: https://blog.csdn.net/qq_38519358/article/details/100134062
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞