echarts自定义视图数据(dataView)

首先，先展示一下我这边的数据(数组格式生成，没有给x轴赋data)，因为有些曲线在某些下标中是没有值的情况下。例如坐标2：

如果用dataView：{readOnly: false}；它将自动采用下标赋值的方式去生成数据视图。
如图所示：因为数据定义的时候，部分曲线下标是没有值的，如果按照x轴下标自动生成的话，这边数据将不匹配；

然而，我的视图生成应该是根据series的data中的x轴值来匹配：

然后查询资料，发现echarts中；有一个自定义dataView的函数optionToContent，官网文档介绍：

因为我采用的是数组赋值的方式，因故代码做了稍许改动，以下是我的代码(重点是toolbox[工具] feature[自定义组件] dataView[数据视图] 中的optionToContent函数内)

var data = [
  [0, 1],
  [1, 2],
  [3, 3],
  [4, 2],
  [5, 3],
  [7, 2]
];
var data1 = [
  [0, 0],
  [1, 0],
  [2, 0],
  [3, 0],
  [4, 0],
  [5, 0],
  [6, 0],
  [7, 0]
];

option = {
  xAxis: {
    type: 'category'
  },
  yAxis: {
    type: 'value'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: 'line', // 默认为直线，可选为：'line' | 'shadow'
      lineStyle: {
        type: 'solid',
        color: 'black',
        width: 2
      }
    }
  },
  dataZoom: [
    {
      id: 'dataZoomX',
      show: true,
      backgroundColor: 'rgba(47,69,84,0.4)',
      type: 'slider',
      fillerColor: 'rgba(167,183,204,0.4)',
      borderColor: 'rgba(221,221,221,1)',
      xAxisIndex: 0,
      zoomLock: false,
      zoomOnMouseWheel: true, // 如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住
      bottom: 'auto', // 组件离容器下侧的距离,'20%'
      handleIcon:
        'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
      filterMode: 'empty',
      height: 20,
      moveHandleSize: 0
    },
    {
      id: 'dataZoomY',
      type: 'slider',
      yAxisIndex: 0, // 设置
      zoomLock: false, // 是否锁定选择区域（或叫做数据窗口）的大小。如果设置为
      zoomOnMouseWheel: true, // 如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住
      handleIcon:
        'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
      width: 20,
      moveHandleSize: 0
    },
    {
      type: 'inside',
      yAxisIndex: 0,
      zoomLock: false,
      filterMode: 'empty'
    }
  ],
  toolbox: {
    show: true,
    iconStyle: {
      borderColor: 'black'
    },
    feature: {
      dataZoom: {
        yAxisIndex: 'false'
      },
      dataView: {
        //  readOnly: false
        optionToContent: function (opt) {
          //第一条坐标长度(最长最完整);
          var axisData = opt.series[0].data;
          var seriesLen = opt.series;
          var table = '<table style="width:100%;text-align:center"><tbody><tr>';
          table += '<td>' + ' ' + '</td>';
          for (var i = 0; i < seriesLen.length; i++) {
            table += '<td>' + seriesLen[i].name + '</td>';
          }
          table += '</tr>';
          for (var i = 0, l = axisData.length; i < l; i++) {
            table += '<tr>';
            table += '<td>' + axisData[i][0] + '</td>'; //第一行数据项 x坐标
            var xAxisIndex = axisData[i][0];//获取x坐标值
            for (var s = 0; s < seriesLen.length; s++) { //循环所以曲线
              var data1 = opt.series[s].data;
              for (var data = 0; data < data1.length; data++) { //循环曲线值
                if (data1[data][0] == xAxisIndex) { //判断曲线坐标是否符合x坐标值
                  table += '<td>' + data1[data][1] + '</td>'; //符合则绘制在表格中
                }
              }
            }
            table += '</tr>';
          }
          table += '</tbody></table>';
          return table;  //返回绘制的表格
        }
      },
      magicType: {
        type: ['line', 'bar']
      },
      restore: {},
      saveAsImage: {}
    }
  },
  series: [
    {
      name: 'name0',
      data: data1,
      type: 'line',
      smooth: true
    },
    {
      name: 'name1',
      data: data,
      type: 'line',
      smooth: true
    }
  ]
};