直接上案例代碼餅狀圖:
<!--所屬單位佔比餅狀圖-->
<div id='ssdwPie' style='width:400px;height:300px;float:left;margin-left: 10%;'></div>
//所屬單位佔比餅狀圖
var ssdwPies = echarts.init(document.getElementById('ssdwPie'));
$.getJSON('${basePath}sys/tubiao/getSsdwPie', function (res) {//res:結構類型爲{[data數組],[zt數組]}
var arry=[];
for(var i=0;i<res.data.length;i++){
var items={
name:res.data[i], //在此備註:在for循環外定義一個空數組,在for循環裏定義一個對象即:{name:XX,value:XX}
value:res.zt[i] 之後將對象循環push到定義的arry數組內
};
arry.push(items);
}
var ssdwPie = {
title: {
text: '所屬單位維修佔比餅狀圖',
subtext: '圖形如下',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data: res.data
},
toolbox: {
show: true,
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
magicType: {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore: {show: true},
saveAsImage: {show: true}
}
},
calculable: true,
series: [
{
name: '所屬單位',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
data: arry----------->//注意:這裏data屬性的值爲對象 而不是拼接的字符串 內容結構爲:[{name:XX,value:XX}]
}
]
};
//所屬單位佔比餅狀圖
ssdwPies.setOption(ssdwPie);
});
eCharts使用小結之series中data屬性循環添加問題
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.