Echarts自定义数据视图样式（表格样式）

用echarts的时候，由于echarts的原本的数据视图太过简单粗暴，为了项目更加美观，细致，不得不自己写一个表格样式,其实echarts也给我们自己写表格样式的空间optionToContent，下面以表格样式的数据视图为例，来实现一个自己的数据视图。

 hourLineChart(data) {
        // 先进行排序
        let newData = data.sort(function (a, b) {
            return Date.parse(a.timeSlot) - Date.parse(b.timeSlot);
        })
        const param = {
            xAxisdata: [],
            powerTotal: [],
        }
        param.xAxisdata = newData.map(function (value) {
            return value.timeSlot.substring(11, 16) + '到' + value.createtime.substring(11, 16);
        });
        param.powerTotal = newData.map(function (value) {
            return value.powerTotal;
        });
        const option = {
            // 标题组件
            title: {
                text: '小时耗电量',
            },
            // 提示框组件
            tooltip: {
                trigger: 'axis',
            },
            color: '#108ee9',
            // 图例
            legend: {
                data: ['小时耗电量(kWh)'],
                selectedMode: false,
            },
            grid: {
                top: '20%',
                left: '3%',
                right: '3%',
                bottom: '12%',
                containLabel: true
            },
            // 工具视图
            toolbox: {
                show: true,
                feature: {
                    dataView: {
                        show: true,
                        readOnly: true,
                        optionToContent: function (opt) {
                            let axisData = opt.xAxis[0].data; //坐标数据
                            let series = opt.series; //折线图数据
                            let tdHeads = '<th>时间</th>'; //表头
                            let tdBodys = ''; //数据
                            series.forEach(function (item) {
                                //组装表头
                                tdHeads += `<th>${item.name}</th>`;
                            });
                            let table = `<table class="bordered"><thead><tr>${tdHeads} </tr></thead><tbody>`;
                            for (let i = 0, l = axisData.length; i < l; i++) {
                                for (let j = 0; j < series.length; j++) {
                                    //组装表数据
                                    tdBodys += `<td>${series[j].data[i]}</td>`;
                                }
                                table += `<tr><td>${axisData[i]}</td>${tdBodys}</tr>`;
                                tdBodys = '';
                            }
                            table += '</tbody></table>';
                            return table;
                        }

                    },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                // 刻度标签
                axisLabel: {
                    show: true,
                    interval: 'auto'
                },
                data: param.xAxisdata,
            },
            yAxis: {
                type: 'value',
            },
            dataZoom: [{
                type: 'slider',
                show: true,
                xAxisIndex: [0],
            }],
            series: [
                {
                    name: '小时耗电量(kWh)',
                    type: 'line',
                    smooth: true, //是否平滑曲线显示
                    data: param.powerTotal,
                    markPoint: {
                        data: [
                            { type: 'max', name: '最大值' },
                            { type: 'min', name: '最小值' },
                        ]
                    },
                    markLine: {
                        data: [
                            { type: 'average', name: '平均值' }
                        ]
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#3BAFFF'
                            },
                            {
                                offset: 1,
                                color: '#FFF'
                            }
                            ], false),
                        }
                    },

                },

            ],
        };
        setTimeout(() => {
            this.ngZone.runOutsideAngular(() => {
                this.listEchart = echarts.init(document.getElementById('hourLineChart'));
                this.listEchart.clear();
                this.listEchart.setOption(option, true);
                this.resizeCharts(this.listEchart);
            });
        }, 50);
    }

其中发挥重要的就是一下这段代码：

  toolbox: {
                show: true,
                feature: {
                    dataView: {
                        show: true,
                        readOnly: true,
                         /
                        optionToContent: function (opt) {   
                            let axisData = opt.xAxis[0].data; //坐标数据
                            let series = opt.series; //折线图数据
                            let tdHeads = '<th>时间</th>'; //表头
                            let tdBodys = ''; //数据
                            series.forEach(function (item) {
                                //组装表头
                                tdHeads += `<th>${item.name}</th>`;
                            });
                            let table = `<table class="bordered"><thead><tr>${tdHeads} </tr></thead><tbody>`;
                            for (let i = 0, l = axisData.length; i < l; i++) {
                                for (let j = 0; j < series.length; j++) {
                                    //组装表数据
                                    tdBodys += `<td>${series[j].data[i]}</td>`;
                                }
                                table += `<tr><td>${axisData[i]}</td>${tdBodys}</tr>`;
                                tdBodys = '';
                            }
                            table += '</tbody></table>';
                            return table;
                        } 
                        //

                    },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },

效果图