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

小咪咪 2022-07-16 13:11 412阅读 0赞

2021-03-01

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQ3MzIx_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQ3MzIx_size_16_color_FFFFFF_t_70 1][]

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

$.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');  
\}

\});

\---------------------------------------------------------------------------------------------------------------------------

![Center][]

三个柱子赋值

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQ3MzIx_size_16_color_FFFFFF_t_70]: /images/20220715/c6e26bbaac964a55a89d819229a264a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQ3MzIx_size_16_color_FFFFFF_t_70 1]: /images/20220715/7f7bd39683a340f4a253da39b7560baa.png
[Center]: /images/20220715/52bc6fc66c47486cbcf85394f62cb530.png