這幾天剛了解了echarts,感覺很好用，感謝百度大佬了腰埂。記錄一下我的一些情況：
官網(wǎng)：http://echarts.baidu.com/api.html#echartsInstance.setOption
初始化圖表組件：
不管地圖還是圖表槽棍，還是什么插件，在網(wǎng)頁上顯示總得要頁面找到能唯一標(biāo)識的元素，進(jìn)行在元素寬度內(nèi)的漂问。 找到頁面的id為 peopleTypeShow 的元素，然后就開始初始化圖表了女揭。官方例子代碼直接copy蚤假。
var colorList = ['#4dcd76','#fad338','#f3637b','#0f1f50','#cd2c5a'];
peopleShow.setOption({
color:colorList,
series : [
{
name:'宿遷人口類型占比統(tǒng)計',
type:'pie',
radius : ['35%','50%'],
center : ['50%','50%'],
data:[
{value:'122220',name:'常駐人口'},
{value:'134256',name:'暫住人口'},
{value:'12543',name:'人戶一致'}
]
},
{
name:'重點(diǎn)人口人數(shù)',
type:'pie',
radius: [0,'30%'],
center : ['50%','50%'],
itemStyle:{
normal:{
color:'#0f53b5',
label : {
position :'center',
formatter :'\n\n{c} 人',
textStyle: {
baseline :'center',
color:'#fff',
fontSize:18
}
}
}
},
data:[{value:'1000',name:'重點(diǎn)人口'}]
},
]
});
這樣出來的是這個圖：
image
獲取后臺數(shù)據(jù)：官網(wǎng)這個時候給出例子：
$.get('data.json').done(function (data)
{ myChart.hideLoading(); myChart.setOption(...);
});
1. 重新渲染數(shù)據(jù)（渲染數(shù)據(jù)無非就是改變數(shù)據(jù)吧兔，然后把數(shù)據(jù)重新賦值到數(shù)據(jù)模塊）
//在圖表初始化之后磷仰，拿到peopleShow可以對圖表操作的對象
var option =peopleShow.getOption();
var hTsZ=[ {value:'1222',name:'czrk'},
{value:'1342',name:'zzrk'},
{value:'12543',name:'rhyz'}];
//要修改就可以修改直接對應(yīng)的對象就可以了，然后重新渲染就好了
option.series[0].data=hTsZ;
peopleShow.setOption(option);
最后的圖表樣式:
image
2. 渲染的是樣式
圖表肯定要改變樣式境蔼。方法是一樣的灶平。option是一個對象。對象里面包含很多屬性箍土。然后你需要改變對象里面的屬性逢享，肯定要先拿到對象，然后對對象里面的屬性進(jìn)行改變就行吴藻。
運(yùn)行代碼
var peopleShow=echarts.init(document.getElementById('peopleTypeShow'),null);
var colorList = ['#4dcd76','#fad338','#f3637b','#0f1f50','#cd2c5a'];
peopleShow.setOption({
color:colorList,
series : [
{
name:'宿遷人口類型占比統(tǒng)計',
type:'pie',
radius : ['35%','50%'],
center : ['50%','50%'],
data:[
{value:'122220',name:'常駐人口'},
{value:'134256',name:'暫住人口'},
{value:'12543',name:'人戶一致'}
]
},
{
name:'重點(diǎn)人口人數(shù)',
type:'pie',
radius: [0,'30%'],
center : ['50%','50%'],
itemStyle:{
normal:{
color:'#0f53b5',
label : {
position :'center',
formatter :'瞒爬\n\n{c} 人',
textStyle: {
baseline :'center',
color:'#fff',
fontSize:18
}
}
}
},
data:[{value:'1000',name:'重點(diǎn)人口'}]
},
]
});
//獲取后臺實(shí)時的數(shù)據(jù)
var option =peopleShow.getOption();
var hTsZ=[ {value:'1222',name:'czrk'},
{value:'1342',name:'zzrk'},
{value:'12543',name:'rhyz'}];
option.series[0].data=hTsZ;
peopleShow.setOption(option);
