echarts数据视图渲染

echarts数据视图

配置数据视图：

toolbox.feature.dataView. show

官方效果

默认样式既不好看、也无法达到设计需要的内容。

需要使用给的 optionToContent来进行自定义样式

官方示例代码

optionToContent: function(opt) { 
    var axisData = opt.xAxis[0].data; 
    var series = opt.series; 
    var table = '<table style="width:100%;text-align:center"><tbody><tr>' 
                + '<td>时间</td>' 
                + '<td>' + series[0].name + '</td>' 
                + '<td>' + series[1].name + '</td>' 
                + '</tr>'; 
     for (var i = 0, l = axisData.length; i < l; i++) { 
         table += '<tr>' 
                  + '<td>' + axisData[i] + '</td>' 
                  + '<td>' + series[0].data[i] + '</td>' 
                  + '<td>' + series[1].data[i] + '</td>' 
                  + '</tr>'; 
     } 
     table += '</tbody></table>'; 
     return table; 
  }

效果图

进行部分逻辑封装

目前在使用antd、所以参数名也用了相同的

export const echartsTable = ({
  columns, // 列名
  dataSource // 表格数据
}: {
  columns: { title: string; dataIndex: string }[];
  dataSource: any;
}) => {
  let table = '<table style="width:100%;border-collapse:collapse;" class="echarts-table">';
  table += `<thead><tr><th>序号</th>${columns.map((item) => `<th>${item.title}</th>`).join('')}</tr></thead>`;
  dataSource.forEach((item, index) => {
    table += `<tr><td>${index + 1}</td>${columns.map((col) => `<td>${item[col.dataIndex]}</td>`).join('')}</tr>`;
  });
  return table;
};

css：

// echarts表格样式
.echarts-table{
  thead tr th {
    position: sticky; // 滚动时表头固定
    top: -1px;
    text-align: left;
    background-color: #fafafa;
  }
  th,
  td {
    border: 1px solid #f0f0f0;
    padding: 8px 10px;
  }
}

使用

optionToContent(opt: any) {
  return echartsTable({
    columns: [
      { title: '时间', dataIndex: 'curDate' },
      { title: '工序', dataIndex: 'title' },
      { title: '当期提交卷次', dataIndex: 'finishCount' },
      { title: '当期打回卷次', dataIndex: 'backCount' },
      { title: '实际完成卷次', dataIndex: 'realFinishCount' }
    ],
    dataSource: tableSource
  });
}

效果图