echarts折线图数据是动态的,datazoom怎么不起做用

问题丶小白 发布于 2016/01/19 16:57
阅读 6K+
收藏 0

我在调一个项目的数据图形 用的是echarts折线还有柱状图,但是在调试颜色还有加入datazoom组件的时候,在页面根本不起作用

代码如下

<script type="text/javascript">
require.config({ 
paths: {
echarts: '${ctx}/common/echarts-2.2.7/build/dist'
}
});   


//Page Init
function initDataView() {
var msgStartTime=document.getElementById("startTime").value;
var msgEndTime=document.getElementById("endTime").value;
var type=document.getElementById("type").value;
   // 使用         
require([
'echarts',                 
'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载             
],             
function (ec) {                 
// 基于准备好的dom,初始化echarts图表                 
var myChart = ec.init(document.getElementById('main'));
var option = {                     
tooltip: {                         
show: true                    
},                     
legend: {                         
data:['当天投单量','历史同期均值']                     
},                     
xAxis : [                         
{                             
type : 'category',
data : (function(){
                       var arr=new Array();
                           $.ajax({
                           type : "post",
                           async : false, //同步执行
                           url : "${ctx}/cartquantityArray/querycarTqArray.do",
                           data:{"cbMsgTodayQuery.msgStartTime":msgStartTime,"cbMsgTodayQuery.msgEndTime":msgEndTime,"cbMsgTodayQuery.type":type},
                           dataType : "json", //返回数据形式为json
                           contentType : "application/json; charset=gbk",
                           success : function(result) {
                           if (result) {
                           var obj = eval('(' + result + ')');
                           for ( var i = 0; i < obj.length; i++) {
var o = new Object();
arr.push(obj[i].comCode);
}
                           }
                           
                       },
                       error : function(errorMsg) {
                           alert("不好意思,大爷,图表请求数据失败啦!");
                           myChart.hideLoading();
                       }
                      })
                      return arr;
                   })() 
                }                    
],                     
yAxis : [                         
{                             
type : 'value'                        
}                     
],    
   dataZoom: [
       {   // 这个dataZoom组件,默认控制x轴。
           type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
           start: 10,      // 左边在 10% 的位置。
           end: 60         // 右边在 60% 的位置。
       },
       {   // 这个dataZoom组件,也控制x轴。
           type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
           start: 10,      // 左边在 10% 的位置。
           end: 60         // 右边在 60% 的位置。
       }
   ],                 
series : [                         
{        
                    
"name":'当天投单量',                             
"type":"bar",                             
"data":    itemStyle:{
                  normal:{color:'gray'}
              }
(function(){

                       var arr=[];
                       $.ajax({
                       type : "post",
                       async : false, //同步执行
                       url : "${ctx}/cartquantityArray/querycarTqArray.do",
                           data:{"cbMsgTodayQuery.msgStartTime":msgStartTime,"cbMsgTodayQuery.msgEndTime":msgEndTime,"cbMsgTodayQuery.type":type},
                           dataType : "json", //返回数据形式为json
                       success : function(result) {
                       if (result) {
                       var obj = eval('(' + result + ')');
                           for ( var i = 0; i < obj.length; i++) {
if(type=="car"){
arr.push(obj[i].cartquantity);
}else if(type=="prp"){
arr.push(obj[i].prpTQuantity);
}

}
                           }
                              
                   },
                   error : function(errorMsg) {
                       alert("不好意思,大爷,图表请求数据失败啦!");
                       myChart.hideLoading();
                   }
                  })
                 return arr;
           })()
                           
                },
                {                             
"name":"历史同期均值",                             
"type":"bar",                             
"data":(function(){
                       var arr=[];
                       $.ajax({
                       type : "post",
                       async : false, //同步执行
                       url : "${ctx}/cartquantityArray/querycarTqArray.do",
                           data:{"cbMsgTodayQuery.msgStartTime":msgStartTime,"cbMsgTodayQuery.msgEndTime":msgEndTime,"cbMsgTodayQuery.type":type},
                           dataType : "json", //返回数据形式为json
                       success : function(result) {
                       if (result) {
                       var obj = eval('(' + result + ')');
                           for ( var i = 0; i < obj.length; i++) {
if(type=="car"){
arr.push(obj[i].hisAverage);
}else if(type=="prp"){
arr.push(obj[i].aveprptq);
}

}
                           }
                              
                   },
                   error : function(errorMsg) {
                       alert("不好意思,大爷,图表请求数据失败啦!");
                       myChart.hideLoading();
                   }
                  })
                 return arr;
           })()
                           
                }                    
]                 
};                           
// 为echarts对象加载数据                  
myChart.setOption(option);              
}         
); 
initAllSelectUi();
}


//Query Data
function executeQuery(pageNo, pageSize) {
initDataView();
}


//init on load
YAHOO.util.Event.addListener(window, 'load', init);
</script>

加载中
0
宏哥
宏哥

用highcharts

质量更高

osc_91208883
osc_91208883
回复 @问题丶小白 : 这边你的问题解决了吗?我现在是dataZoom出现但是滑动没有效果
问题丶小白
主要是现在datazoom 在页面中不显示 ,有啥办法吗额?
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部