echarts设置原始数据及其自定义样式

进入个人博客 Eighteen Blog
##echarts 自定义原始数据样式

1. 工作中遇到的echarts设置原始数据的问题

toolbox: {
    show: true,
        right: '10%',
        feature: {
	        dataView: {
	            readOnly: true    //原始数据的textarea框只读          
	        },
        magicType: {type: ['line', 'bar']}
    }
}

如图右上角会有一个文档图表

点击按钮会跳出来原始数据，但是格式比较简单，而且中间会有乱序的。如图这样

而我想实现的是这种：

在官方手册中没有提供修改该样式的配置，只有一个方法，就是自定义设置，代码如下

toolbox: {
            left: 'right',
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                restore: {},
                dataView: { //数据视图
                    show: true,
                    optionToContent: function (opt) { //该函数可以自定义列表为table，opt是给我们提供的原始数据的obj。
                        var axisData = opt.xAxis[0].data; //坐标轴
                        var series = opt.series; //折线图的数据
                        var tdHeads = '帧序'; //表头
                        var tdBodys = '';
                        series.forEach(function (item) {
                            
                            tdHeads += `${item.name}`;
                        });
                        var table = `${tdHeads} `;
                        for (var i = 0, l = axisData.length; i < l; i++) {
                            for (var j = 0; j < series.length; j++) {
                             
                                if (series[j].data[i] == undefined) {
                                    tdBodys += ``;
                                } else {
                                    tdBodys += ``;
                                }
                            }
                            table += `${tdBodys}`;
                            tdBodys = '';
                        }
                        table += '
${'-'}
${ series[j].data[i]}
${axisData[i]}
';
                        return table;
                    }
                },
                saveAsImage: {}
            }
        }