echarts的数据视图时间戳修改显示格式

在 Echarts 的数据视图中，如果需要将时间戳转换为特定的格式进行显示，可以使用 `optionToContent` 属性和 `contentToOption` 属性来自定义数据视图的转换函数。

下面是一个示例，展示如何将时间戳转换为年月日的格式进行显示：

option = {
  xAxis: {
    type: 'time',
    data: [1643836800000, 1643923200000, 1644009600000, 1644096000000, 1644182400000]
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [120, 200, 150, 80, 70],
    type: 'line'
  }],
  dataView: {
    show: true,
    readOnly: false,
    title: 'Data View',
    lang: ['Data View', 'Close', 'Refresh'],
    optionToContent: function (opt) {
      var table = '<table class="data-table"><tbody>';
      for (var i = 0; i < opt.xAxis[0].data.length; i++) {
        table += '<tr>'
        table += `<td>${formatDate(opt.xAxis[0].data[i])}</td>`
        table += `<td>${opt.series[0].data[i]}</td>`
        table += '</tr>'
      }
      table += '</tbody></table>';
      return table;
    },
    contentToOption: function (content) {
      var newData = [];
      $(content).find('tr').each(function (i) {
        newData[i] = $(this).find('td').map(function () {
          return $(this).text();
        }).get();
      });
      option.xAxis[0].data = newData.map(function (value) {
        return new Date(value[0]).getTime();
      });
      option.series[0].data = newData.map(function (value) {
        return +value[1];
      });
      return option;
    }
  }
};

function formatDate(timestamp) {
  var date = new Date(timestamp);
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var day = date.getDate();
  return year + '-' + month + '-' + day;
}

myChart.setOption(option);

在这个示例中，通过 `formatDate` 函数将时间戳格式化为年月日的格式，然后在 `optionToContent` 属性中使用这个函数将时间戳转换为特定的格式进行显示。在 `contentToOption` 属性中，将修改后的数据转换为图表的配置项。最后使用 `setOption` 方法将修改后的配置项应用到图表中。