echarts数据视图的自定义数据展现

2023-07-11 03:11| 来源: 网络整理| 查看: 265

echarts图标右上角的刷新和数据视图按钮通过echarts的setoption里的toolbox配置项进行展现，代码如下：

toolbox: { show: true, feature: { dataView: { show: true, readOnly: false }, restore: { show: true }, saveAsImage: { show: false } } },

通过以上配置，数据视图可以展现相关的内容表格，但是格式是不够明朗简单的，数据左侧为X轴，右侧为对应的Y轴的值

根据要求，我是用的x轴的type为time，所以图表显示出来是时间格式，实际上是后端传过来的时间戳，这样可以保证时间和数据是对应的，不会因为某个时刻没有值，导致后边的值往前挪，使图表出现数据错位。

采用这种写法series里每项的data都是一个二维数组，内层数组都是长度为2，0位是时间戳，1位是对应的值，大致数据格式如下：

data: [[1596038400000, 430] , [1596039040000, 51] , [1596039680000, 51] ,[1596040320000, 51] , [1596040832000, 58] ]

这样写就会出现上图的表格，图表中的三项纵向排开，X轴为时间戳，现在想要的效果是X轴内容为标准时间格式，表格每一行是此时刻的三个值（三个出力），通过对toolbox配置实现：

toolbox: { show: true, feature: { dataView: { readOnly: true, optionToContent(opt) { let resultX = []; // 使用for循环遍历二维数组 for (let i = 0; i < opt.series[0].data.length; i++) { // 将每个子数组的第一项添加到结果数组中 resultX.push(opt.series[0].data[i][0]); } let axisData = resultX; // 假设x轴是时间戳数据 var series = [] let resultY1 = []; // 使用for循环遍历二维数组 for (let i = 0; i < opt.series[0].data.length; i++) { // 将每个子数组的第一项添加到结果数组中 resultY1.push(opt.series[0].data[i][1]); } series.push(resultY1); let resultY2 = []; // 使用for循环遍历二维数组 for (let i = 0; i < opt.series[1].data.length; i++) { // 将每个子数组的第一项添加到结果数组中 resultY2.push(opt.series[1].data[i][1]); } series.push(resultY2); let resultY3 = []; // 使用for循环遍历二维数组 for (let i = 0; i < opt.series[2].data.length; i++) { // 将每个子数组的第一项添加到结果数组中 resultY3.push(opt.series[2].data[i][1]); } series.push(resultY3); let table= '' + '时间' + '日前计划出力' + '日内计划出力' + '实际出力' + ''; for (let i = 0, l = axisData.length; i < l; i++) { let time = new Date(axisData[i]); // 将时间戳转换为Date对象 var value1 = series[0][i]; var value2 = series[1][i]; var value3 = series[2][i]; table += '' + '' + time.toLocaleString().slice(-8) + '' + '' + value1 + '' + '' + value2 + '' + '' + value3 + '' + ''; } table += ''; return table; } }, restore: { show: true }, saveAsImage: { show: false } } },

最终效果：

【本文地址】

公司简介

联系我们