echarts统计图dataView显示表格样式

css部分给表格加边框样式

<style>
    table {
        border-collapse: collapse;
        width: 100%;
        text-align: center;
    }

    th, td {
        border: 1px solid #a4a3a3;
        padding: 8px;
        text-align: center;
    }

    thead th {
        background-color: #ccc;
    }
</style>

html部分

<div class="ibox-content">
    <div style="width: 100%;height: 68rem;" id="main"></div>
</div>

js部分

<script type="text/javascript">

var myChart = echarts.init(document.getElementById('main'));

    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            y: 'bottom'
        },
        toolbox: {
            show: true,
            feature: {
                dataView: {
                    show: true,
                    readOnly: false,
                    //lang: ['任务统计表', '关闭', '刷新'],

					// 隐藏关闭按钮，更改刷新按钮为关闭
                    lang: ['<div style="padding: 0 10px;margin-top:-10px;margin-left:-20px;">任务统计表</div>',
                        '<div style="width:15px;position:absolute;height:10px;margin-left:-10px;margin-top:-5px;background:white;"></div>',
                        '可视化界面'],
                    contentToOption: (dom, opts) => {
                        console.log(dom);
                        // 显示我的div，这里的id是我setoption的时候存在option的dataview这个变量中的；
                        document.getElementById(opts.dataView).style.display = '';
                    },
                    optionToContent: (opt) => {
                        // 隐藏div
                        document.getElementById(opt.dataView).style.display = 'none';
                    },

                    optionToContent: function (opt) {

                        var table = '<table style="width:100%;text-align:center"><thead><tr>';

                        table += '<th>任务状态</th>';

                        // 遍历xAxis的data数组，生成<th>标签
                        for (var i = 0; i < opt.xAxis[0].data.length; i++) {
                            table += '<th>' + opt.xAxis[0].data[i] + '</th>';
                        }

                        table += '<th>合计</th>';

						//不加合计列
                        // for (var i = 0, l = opt.series.length; i < l; i++) {
                        //     var series = opt.series[i];
                        //     table += '<tr>' +
                        //         '<td>' + series.name + '</td>' +
                        //         '<td>' + series.data.join('个</td><td>') + '个' + '</td>' +
                        //         '</tr>';
                        // }
                        
                        //加合计列
                        for (var i = 0, l = opt.series.length; i < l; i++) {
                            var series = opt.series[i];
                            var sum = series.data.reduce(function(a, b) {
                                return a + b;
                            }, 0); // 计算总和

                            table += '<tr>' +
                                '<td>' + series.name + '</td>' +
                                '<td>' + series.data.join('个</td><td>') + '个' + '</td>' +
                                '<td>' + sum + '个</td>' + // 添加总和列的数据
                                '</tr>';
                        }

						table += '<tr>' +
                            '<td>合计</td>';
						
						//加合计行
                        for (var i = 0; i < opt.xAxis[0].data.length; i++) {
                            var columnSum = 0;
                            for (var j = 0; j < opt.series.length; j++) {
                                columnSum += opt.series[j].data[i];
                            }
                            table += '<td>' + columnSum + '个</td>';
                        }

                        var totalSum = opt.series.reduce(function(a, series) {
                            return a + series.data.reduce(function(b, data) {
                                return b + data;
                            }, 0);
                        }, 0);
                        table += '<td>' + totalSum + '个</td>';

                        table += '</tr>';
                        
                        table += '</tbody></table>';
                        return table;
                    },
                }
            }
        },
        xAxis: {
            type: 'category',
            data: ['无锡市', '滨湖区', '梁溪区', '新吴区', '锡山区', '惠山区', '江阴市', '宜兴市', '经开区']
        },
        yAxis: {
            name: '任务数量',
        },
        series: [
            {
                name: '签署中',
                color: '#5470c6',
                data: [100,100,100,100,100,100,100,100,100],
                type: 'bar',
                //平滑显示曲线或折线图
                smooth: true,
                //添加平均线
                markLine: {
                    data: [{ type: 'average', name: 'Avg' }]
                },
                //鼠标放上显示信息
                label: {
                    show: true,
                    position: 'top'
                }
            },
            {
                name: '已完成',
                color: '#91cc75',
                data: [100,100,100,100,100,100,100,100,100],
                type: 'bar',
                smooth: true,
                markLine: {
                    data: [{ type: 'average', name: 'Avg' }]
                },
                label: {
                    show: true,
                    position: 'top'
                }
            },
            {
                name: '已撤销',
                color: '#ccc',
                data: [100,100,100,100,100,100,100,100,100],
                type: 'bar',
                smooth: true,
                markLine: {
                    data: [{ type: 'average', name: 'Avg' }]
                },
                label: {
                    show: true,
                    position: 'top'
                }
            }
        ]
    };

    setTimeout(() => {
        myChart.setOption(option);
    }, 500)

    $(function () {
        queryData();
    });

    function queryData() {
        $.ajax({
            type: "POST",
            url: prefix + '/suc',
            data: $("#formId").serialize(),
            success: function (res) {
                if (res.code == 0){
                    // option.xAxis.data = res.data.datekey
                    option.series[0].data = res.data.num1key
                    option.series[1].data = res.data.num2key
                    option.series[2].data = res.data.num3key
                    myChart.setOption(option);
                }
            }
        })
    }

	//页面缩放图表不变形
    $(window).resize(function () {
        myChart.resize();
    })
</script>