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

说明:

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

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

效果:

配置:

<script src="js/echarts/echarts.js"></script>

使用:

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);
}


当使用Echarts展示数据时,可能会出现页面卡顿的问题。这是因为在展示数据时,Echarts需要处理大的数据和绘制图表,导致页面加载时间过长、交互响应变慢甚至崩溃。[2] 有几个常见的解决方案可以缓解这个问题。首先,可以采用数据分页展示的方式,只加载当前页的数据,避免一次性加载大数据。这样可以减少页面加载时间和内存占用,并提高用户体验。 其次,对于数据量较大的情况,可以使用降采样策略,即只保留数据的部分样本点来绘制图表。这样可以减少数据量,提高绘制效率,同时保证图表的展示效果。 另外,可以采用增渲染的方式来加载数据,即每次只加载部分数据并进行增渲染,避免一次性加载全部数据导致的卡顿问题。这种方式可以提高渲染效率和交互响应速度。 还有一种常见的导致卡顿的情况是由于Echarts实例在页面切换或大小变化时没有被正确销毁,导致内存占用和定时器运行。建议在页面切换或大小变化时正确销毁Echarts实例,避免资源浪费和性能问题。 总结来说,为了解决Echarts数据量大卡顿的问题,可以采用数据分页展示、降采样策略、增渲染以及正确销毁Echarts实例等方法。这些方法可以有效提高页面加载速度、减少内存占用,并提升用户体验。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值