Echarts自定义数据视图样式

最新推荐文章于 2023-11-07 17:43:53 发布

没用の阿豪

最新推荐文章于 2023-11-07 17:43:53 发布

阅读量2.9k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/qq_29099209/article/details/82656589

本文介绍如何使用ECharts的数据视图功能将图表转换为表格形式，并提供了具体实现方法及代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

toolbox: {
            show: true,
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false,
                    optionToContent: function (opt) {
                        var  axisData = opt.xAxis[0].data; //坐标数据
                        var series = opt.series; //折线图数据
                        var tdHeads = '<td  style="padding: 0 10px">时间</td>'; //表头
                        var tdBodys = ''; //数据
                        series.forEach(function (item) {
                            //组装表头
                            tdHeads += '<td style="padding: 0 10px">'+item.name+'</td>';
                        });
                        var table = '<table border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center"><tbody><tr>'+tdHeads+' </tr>';
                        for (var i = 0, l = axisData.length; i < l; i++) {
                            for (var j = 0; j < series.length; j++) {
                                //组装表数据
                                tdBodys += '<td>'+series[j].data[i]+'</td>';
                            }
                            table += '<tr><td style="padding: 0 10px">'+axisData[i]+'</td>'+tdBodys+'</tr>';
                            tdBodys = '';
                        }
                        table += '</tbody></table>';
                        return table;
                    }
                },
                magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                restore: {show: true},
                saveAsImage: {show: true}

            }
        },