echarts 数据视图样式优化

最新推荐文章于 2024-04-28 12:06:25 发布

咖啡有点酷

最新推荐文章于 2024-04-28 12:06:25 发布

阅读量706

点赞数

CC 4.0 BY-SA版权

分类专栏： vue echarts

本文链接：https://blog.csdn.net/qq_40295815/article/details/107222787

vue 同时被 2 个专栏收录

62 篇文章

订阅专栏

echarts

28 篇文章

订阅专栏

本文详细介绍了ECharts中数据视图组件的使用方法，包括如何显示数据视图、设置只读属性以及如何定制数据视图的内容。通过具体代码示例展示了如何将图表数据转换为表格形式，便于用户查看和理解数据细节。

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

toolbox: {
            show: true,
            feature: {
              // dataZoom: {
              //   yAxisIndex: 'none'
              // }, // 区域缩放，区域缩放还原
             dataView : {
                show : true,
                readOnly : true,
                optionToContent : function(opt) {
                    var axisData = opt.xAxis[0].data;
                    var series = opt.series;
                    var tdHeaders = '<td style="padding: 10px 10px">监测时间</td>'; //表头
                    series.forEach(function(item) {
                        tdHeaders += '<td style="padding: 10px 10px">' + item.name + '</td>'; //组装表头
                    });
                    let table = `<table border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center"><tbody><tr>${tdHeaders} </tr>`;
                    var tdBodys = ''; //数据
                    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 style="padding: 10px 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
                        tdBodys = '';
                    }
                    table += '</tbody></table></div>';
                    return table;
                }
              }, // 数据视图
              // magicType: {
              //   type: ['line', 'bar']
              // }, // 切换为折线图，切换为柱状图
              // restore: {}, // 还原
              // saveAsImage: {}// 保存为图片
            }
          },