echarts datazoom zoomlock 问题

似曾相识燕归来 发布于 2014/06/13 10:52
阅读 1K+
收藏 0

@Kener-林峰 你好,想跟你请教个问题:

dataZoom : {
       show : true,
       realtime: true,
       zoomLock: true,
       start : 49,
       end : 50,
   },

用动态数据做测试 锁定了数据区域选择的大小,但是每次数据一更新 拖拽区域就会变大 这个怎么解决? 下面是完整代码。。


var myChart = echarts.init(document.getElementById('main'));


var option = {
title : {
text : 'CPU使用率'
},
tooltip : {
trigger : 'axis'
},
legend : {
data : [ 'CPU使用率' ]
},

dataZoom : {
       show : true,
       realtime: true,
       zoomLock: true,
       start : 49,
       end : 50,
   },
calculable : true,
xAxis : [ {
type : 'category',
boundaryGap : false,
//axisTick: {show : true},
data : (function(){
               var now = new Date();
               var res = [];
               var len = 17280;
               while (len--) {
                   res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
                   now = new Date(now - 5000);
               }
               return res;
           })()
} ],
yAxis : [ {
type : 'value',
axisLabel : {
formatter : '{value} %'
},
splitArea : {
show : true
}
} ],
series : [ {
name:'CPU使用率',
           type:'line',
           smooth: true,
           symbolSize: 1,
           itemStyle: {
               normal: {
                   areaStyle: {type: 'default'},
               }
           },
           data:(function(){
               var res = [];
               var len = 17280;
               while (len--) {
                   res.push((Math.random()*100).toFixed(0));
               }
               return res;
           })()
} ]
};

var lastData = 1;
var axisData;
clearInterval(timeTicket);
var timeTicket = setInterval(function(){
   lastData = (Math.random()*100).toFixed(0);
   console.info("1:"+lastData);
   axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');
   
   // 动态数据接口 addData
   myChart.addData([
       [
           0,        // 系列索引
           lastData, // 新增数据
           false,    // 新增数据是否从队列头部插入
           false,    // 是否增加队列长度,false则自定删除原有数据,队头插入删队尾,队尾插入删队头
           axisData  // 坐标轴标签
       ]
   ]);
}, 5000);


// 为echarts对象加载数据 
myChart.setOption(option);

加载中
返回顶部
顶部