Echart 餅狀圖,柱狀圖series.data資料動態設定
關於echart的餅狀圖的資料引數主要在option中設定,我們需要根據自己的要求來設定
legend.data ,series.data.
有時需要從資料庫中取得資料然後設定。因此就涉及動態設定引數的問題。
option = {
title : {
text: '某站點使用者訪問來源',
subtext: '純屬虛構',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接訪問','郵件營銷','聯盟廣告','視訊廣告','搜尋引擎']
},
series : [
{
name: '訪問來源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接訪問'},
{value:310, name:'郵件營銷'},
{value:234, name:'聯盟廣告'},
{value:135, name:'視訊廣告'},
{value:1548, name:'搜尋引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
可以採用如下方式動態設定:宣告兩個陣列taskname,seriesdata,由於series.data的元素為value,那麼兩個引數,因此將seriesdata的每個元素存為包含兩個屬性的物件即可option = {
title : {
text : '漏洞數量比較',
//subtext : '純屬虛構',
x : 'center'
},
tooltip : {
trigger : 'item',
formatter : "{a} <br/>{b} : {c} ({d}%)"
},
legend : {
orient : 'vertical',
x : 'left',
data :taskname
},
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%' ],
data : seriesdata
} ]
};
for(var i=0;i<dataList.length;i++)
{ var obj=new Object();
obj.name=dataList[i].taskName;
obj.value=dataList[i].vulcount;
seriesdata[i]=obj;
}
var chart2 = echarts.init(document.getElementById(‘maliciousDegree’));
chart2.clear();
var vuldangerlevelarr=[]; var seriesData=[]; option = { title : { text : '惡意程度比較', }, tooltip : { trigger : 'axis' }, legend : { data : [] }, toolbox : { show : true, feature : { mark : { show : true }, dataView : { show : true, readOnly : false }, magicType : { show : true, type : [ 'line', 'bar' ] }, restore : { show : true }, saveAsImage : { show : true } } }, calculable : true, xAxis : [ { type : 'category', data : [] } ], yAxis : [ { type : 'value' } ], series : [] }; $.ajax ({ url : "../../../GetVulData.action", type : "get", dataType:"json", async : false, data : { "taskNames" : taskNames, "executeTimes" : executeTimes }, success : function(data) { //vuldangerlevelarr中是所有任務的危險程度 vuldangerlevelarr=data.vuldangerlevelarr; var dataList2=data.dataList2; //根據任務的多少對相應引數賦值,name為任務名稱,data為此任務對應危險程度的數量資訊 for(var i=0;i<dataList2.length;i++) { seriesData.push({ 'name':dataList2[i].taskName, 'type':'bar', 'data':dataList2[i].vuldanlevelcount, markPoint : { data : [ { type : 'max', name : '最大值' }, { type : 'min', name : '最小值' } ] }, markLine : { data : [ { type : 'average', name : '平均值' } ] } }); } }, error : function() { } }); option.legend.data=taskname; option.xAxis[0]['data']=vuldangerlevelarr; chart2.setOption(option, true); chart2.setSeries(seriesData);
}`