ECharts饼图从后台动态获取数据并展示

2021-03-01

多y轴及y轴随着时间增加，动态描绘；

固定x轴为15段，并设置当超过15时，按FILO顺序进行移除最旧的元素重新绘图(shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。提示：要删除并返回数组的最后一个元素，请使用 pop() 方法。)

---

 

$.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:[]
       }
   ]
};