element+Echarts绘图记录

1.数据视图表格样式自定义：

JS

toolbox: {
  feature: {
      dataView: {
        show: true, 
        readOnly: false,
        optionToContent(opt)  {
          let axisData = opt.xAxis[0].data; //坐标数据
          let series = opt.series; //折线图数据
          let tdHeads = `<td>${headTitle}</td>`; //表头
          let tdBodys = ''; //数据
          series.forEach((item) =>  {
              //组装表头
              tdHeads += `<td>${item.name}</td>`;
          });
          let table = `<table class="echarts-table"><tbody><tr>${tdHeads} </tr>`;
          for (let i = 0, l = axisData.length; i < l; i++) {
              for (let j = 0; j < series.length; j++) {
                  //组装表数据
                  tdBodys += `<td>${series[j].data[i]}</td>`;
              }
              table += `<tr><td>${axisData[i]}</td>${tdBodys}</tr>`;
              tdBodys = '';
          }
          table += '</tbody></table>';
          return table;
        },
        // 用于刷新后回显undefined处理
        contentToOption(HTMLDomElement, opt){
            return opt;
        },
      },
      magicType: {show: true, type: ['line', 'bar']},
      restore: {show: true},
      saveAsImage: {show: true}
  }
},

CSS

/* echarts数据表格样式 */
.echarts-table{
    width: 100%;
    border-collapse: collapse;
}

.echarts-table tr:first-child{
    font-weight: bold;
    color: #909399 !important;
    background-color: #fff !important;
}

.echarts-table tr:hover{
    background-color: #F5F7FA;
}

.echarts-table tr{
    color: #606266;
    border-bottom: 1px solid #EBEEF5;
}
.echarts-table tr td{
    padding: 12px 0;
    min-width: 0;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    text-align: center;
}

标签：opt,绘图,show,series,Echarts,let,table,element,echarts
来源： https://www.cnblogs.com/gteman/p/16422497.html