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

说明:

在数据量较大时,用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);
}


你可能感兴趣的:(echarts大数据量展示的解决方案)