echart数据视图以table表格展示

import { barDataView } from "./echartsdata.js";//引入方法
const workorderType = echarts.init(this.$refs.workorder)
      var option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        toolbox: {
          show: true,
          feature: {
            dataView: {},
            dataZoom: {
              yAxisIndex: "none",
            },
            magicType: {
              type: ["line", "bar", "stack", "tiled"], // line折线图,bar柱状图，stack多个柱状图堆叠一起，tiled平铺柱状图
            },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(220, 220, 220, 0.8)",
            },
          },
        ],
      };
      option.toolbox.feature.dataView = barDataView(['时间/日期','电价','电费'],'电量电费')//第一个参数为表头标题 第二个导出的文件夹名
      workorderType.setOption(this.row1Piechart)

echartsdata文件内容

export function barDataView(titleName, fileName) {
  var dataView = {
    show: true,
    readOnly: false,
    lang: ['数据视图', '关闭', '导出Excel'],
    optionToContent: function(opt) {
      var axisData = opt.xAxis[0].data // 坐标数据
      var series = opt.series // 折线图数据
      var tdHeads = ''
      for (let index = 0; index < titleName.length; index++) {
        tdHeads += '<td  style="padding: 0 10px">' + titleName[index] + '</td>'
      }
      var tdBodys = '' // 表数据
      var table = '<table id="tableExcel_Day" border="1" class="table-bordered table-striped" style="width:100%;text-align:centerborder:1px solid #ccc;border-collapse:collapse;" ><tbody><tr>' + tdHeads + ' </tr>'
      // 组装表数据
      for (var i = 0, l = axisData.length; i < l; i++) {
        for (var j = 0; j < series.length; j++) {
          var temp = series[j].data[i]
          if (temp != null && temp !== undefined) {
            tdBodys += '<td>' + temp + '</td>'
          } else {
            tdBodys += '<td></td>'
          }
        }
        table += '<tr><td style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>'
        tdBodys = ''
      }
      table += '</tbody></table>'
      return table
    }
  }
  return dataView
}

如果需要导出请参考echart导出excel