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

2024年6月5日 233次阅读 来源: 厚积而薄发1528

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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞