记一次修改echarts又图形改成表格

echarts官网：https://echarts.apache.org/examples/zh/index.html

现在有需求，就是领导说图形界面看着太乱了，看着花里胡哨，不想看。就说能不能变得简单点

然后我接到这需求看了眼后台代码，后台代码写的是用echarts来表示的图表，我就想着用原生的echarts来切换用表格展示，但是原生的表格看着不怎么美观，就重写了原生的方法，拼接html添加进了表格

toolbox: {
                            feature: {
                                dataView: {
                                    readOnly: true, --》写成true可以不显示刷新按钮
                                    lang: ["数据视图", "关闭", "刷新"],
                                    optionToContent: function(opt) {
                                        var series = opt.series;
                                        var tdHeaders = ''; //表头
                                        for (let j = 0; j < series[0].data.length; j++) {
                                            tdHeaders += '<td style="font-size: 15px">' + series[0].data[j].name + '</td>'; //组装表数据

                                        }
                                        var table = '<div class="table-responsive"><table class="define-table" style="text-align:center"><tbody><tr>' + tdHeaders + '</tr>';
                                        var tdBodys = ''; //数据

                                        for (let j = 0; j < series[0].data.length; j++) {
                                            tdBodys += '<td style="font-size: 15px">'+ series[0].data[j].value+'</td>'; //组装表数据
                                        }
                                        table += '<tr>' + tdBodys + '</tr>';
                                        tdBodys = '';

                                        table += '</tbody></table></div>';
                                        return table;
                                    }
                                }
                            }
                        },

最后的效果是这样的，点击这个可以切换


感觉这样应该可以满足领导的需求了o.o