1. 程式人生 > >ECharts餅圖從後臺動態獲取資料並展示

ECharts餅圖從後臺動態獲取資料並展示

$.post( url, {'id' : gridStationSeq  },
function(result) {
if (result != null) {
var label=[];
var data = JSON.parse(result);
var arr=[];
alert(data.nFaultStakeNum);
//arr=Object.values(data);//獲取json的val
//arr=_(result).toArray();

$.map(data, function(value, key) {
if(key!='stakeCount'&& key!='stakeRate'){
arr.push({'name':cName(key),'value':value});//轉化為map陣列
//label=({'name':cName(key)});//表頭名稱legend
}
});
label=Object.keys(data);//獲取json的key表頭
chargeTotalOption.legend.data=label;
chargeTotalOption.series[0].data=arr;
//chargeTotalOption.series[0]['radius']=[0,100];
chargeTotalChart.setOption(chargeTotalOption);

//統計結果
$("#stakeCount").html(data.stakeCount==null?0:data.stakeCount);
$("#okStakeNum").html(data.okStakeNum==null?0:data.okStakeNum);
$("#offlineStakenNum").html(data.offlineStakenNum==null?0:data.offlineStakenNum);
$("#nFaultStakeNum").html(data.nFaultStakeNum==null?0:data.nFaultStakeNum);
$("#stakeRate").html(data.stakeRate==null?0:data.stakeRate);
chargeTotalChart.hideLoading();
} else {
chargeTotalChart.hideLoading();
parent.alertify.confirm('提示', result.msg,'info');
}

});

---------------------------------------------------------------------------------------------------------------------------


三個柱子賦值

carOnlineoption.xAxis[0].data = transferArmsData(carOnlineData,'date');
carOnlineoption.series[0].data=transferArmsData(carOnlineData,'carOnlineSum');
carOnlineoption.series[1].data=transferArmsData(carOnlineData,'sum_left30s');
carOnlineoption.series[2].data=transferArmsData(carOnlineData,'sum_over30s');
carOnlineChart.setOption(carOnlineoption);
carOnlineChart.hideLoading();

carOnlineoption = {
   tooltip : {
       trigger: 'axis',
       axisPointer : {            // 座標軸指示器,座標軸觸發有效
           type : 'shadow'        // 預設為直線,可選為:'line' | 'shadow'
       }
   },
   toolbox : {
feature : {
dataView : {
show : true,
readOnly : false
},
magicType : {
show : true,
type : [ 'line', 'bar' ]
},
saveAsImage : {
show : true
}
}
},
   legend: {
       data:['線上車輛數','間隔30s內','間隔30s外']
   },
   grid: {
       left: '3%',
       right: '4%',
       bottom: '3%',
       containLabel: true
   },
   xAxis : [
       {
           type : 'category',
           data : []
       }
   ],
   yAxis : [
       {
           type : 'value'
       }
   ],
   series : [
    
       {
           name:'線上車輛數',
           type:'bar',
           barWidth : 10,
           stack: '車輛',
           data:[]
       },
       {
           name:'間隔30s內',
           type:'bar',
           barWidth : 10,
           stack: '30s內',
           data:[]
       },
       {
           name:'間隔30s外',
           type:'bar',
           barWidth : 10,
           stack: '30s外',
           data:[]
       }
   ]
};