echarts大数据量展示的解决方案

最新推荐文章于 2025-04-20 13:35:01 发布

原创最新推荐文章于 2025-04-20 13:35:01 发布 · 3.3w 阅读

14 ·

CC 4.0 BY-SA版权

本文介绍了一种利用ECharts解决大数据量展示时列不足的问题，通过dataZoom组件实现图表的缩放和平移功能，方便用户查看不同部分的数据详情。

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

说明：

在数据量较大时，用echarts普通表格展示会出现列不够用的情况，按如下控件可以展示全部数据，用户可以用滚轮缩放，浏览某部分数据。关键是dataZoom。

参考网址：http://echarts.baidu.com/demo.html#candlestick-sh

效果：

配置：

使用：

xList : 横坐标值数组；

yList ：纵坐标值数组；

tooltip：是否展示工具栏；

xshow：是否展示X轴单位；

yshow：是否展示Y轴单位；

sliderShow：是否展示X周滑动条；

insideShow：是否展示内部滑动条；

main：绘制echarts的div的id；

x：echarts距离左侧div边框的距离；

y：echarts距离顶部div边框的距离；

x2：echarts距离右侧div边框的距离；

y2：echarts距离底部div边框的距离；

startNum：底部滚动条初始百分比；

totalNum：底部滚动条结束百分比。（如果默认0开始，100%结束，会出现滚动缩放时表格消失的情况）

使用例子：

表格缩略图： drawWaveLayer(xList,yList,false,false,false,false,false,'main','1%','1%','1%','1%',0,100); // 后两个是百分数

表格正常图： drawWaveLayer(xList,yList,true,true,true,true,true,'wave_layer_main','5%','10%','10%','10%',1,99);

function drawWaveLayer(xList,yList,tooltip,xshow,yshow,sliderShow,insideShow,main,x,y,x2,y2,startNum,totalNum){
      //基于准备好的dom，初始化echarts图表
var myCa=echarts.init(document.getElementById(main));
option = {
   tooltip : {
       trigger: 'axis',
       show:tooltip
   },
   xAxis : [
       {
        boundaryGap : false,
                   data : xList,
                   splitLine:{
                   show:false
            },
            name:"时间序列",
            show:xshow
       }
   ],
   yAxis : [
       {
        type : 'value',
                   splitLine:{
                   show:false
               },
            name:"压力传感器数值",
            show:yshow
       }
   ],
   grid: {
                x: x,
               y: y,
               x2: x2,
               y2: y2
            },
      dataZoom: [{
      show:sliderShow,
            type: 'slider',
            start: startNum,
            end: totalNum
        }, {
        show:insideShow,
            type: 'inside',
            start: 10,
            end: totalNum
        }],
   series : [
       {
            name:'数值',
            type:'line',
                   smooth:true,
                   symbol:'none',
                   itemStyle: {normal: {areaStyle: {type: 'default'}}},
                   data:yList
       }
   ]
};
myCa.setOption(option);
}