修改echarts转化生成表格的样式

echartstoolbox对数据视图（dataview）自定义操作

不知道大家有没有和我一样觉得echarts自带的数据视图很难看，想自己动手改造一下，下面就介绍一下：

主要是在dataView的contentToOption事件中重定义样式；直接上代码

  toolbox: {
    show: true,
    itemGap: 5,
    top: -5,
    feature: {
      dataView: {
        // readOnly: true,
        optionToContent: (opt) => {
          // opt为图表option，拿到对应数据重新渲染
          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;
        },
      },
    },
  },

效果如下：

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