这几天刚了解了echarts,感觉很好用，感谢百度大佬了。记录一下我的一些情况：
官网：http://echarts.baidu.com/api.html#echartsInstance.setOption
初始化图表组件：
不管地图还是图表，还是什么插件，在网页上显示总得要页面找到能唯一标识的元素，进行在元素宽度内的。 找到页面的id为 peopleTypeShow 的元素，然后就开始初始化图表了。官方例子代码直接copy。
var colorList = ['#4dcd76','#fad338','#f3637b','#0f1f50','#cd2c5a'];
peopleShow.setOption({
color:colorList,
series : [
{
name:'宿迁人口类型占比统计',
type:'pie',
radius : ['35%','50%'],
center : ['50%','50%'],
data:[
{value:'122220',name:'常驻人口'},
{value:'134256',name:'暂住人口'},
{value:'12543',name:'人户一致'}
]
},
{
name:'重点人口人数',
type:'pie',
radius: [0,'30%'],
center : ['50%','50%'],
itemStyle:{
normal:{
color:'#0f53b5',
label : {
position :'center',
formatter :'{b}\n\n{c} 人',
textStyle: {
baseline :'center',
color:'#fff',
fontSize:18
}
}
}
},
data:[{value:'1000',name:'重点人口'}]
},
]
});
这样出来的是这个图：
image
获取后台数据：官网这个时候给出例子：
$.get('data.json').done(function (data)
{ myChart.hideLoading(); myChart.setOption(...);
});
1. 重新渲染数据（渲染数据无非就是改变数据，然后把数据重新赋值到数据模块）
//在图表初始化之后，拿到peopleShow可以对图表操作的对象
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);
最后的图表样式:
image
2. 渲染的是样式
图表肯定要改变样式。方法是一样的。option是一个对象。对象里面包含很多属性。然后你需要改变对象里面的属性，肯定要先拿到对象，然后对对象里面的属性进行改变就行。
运行代码
var peopleShow=echarts.init(document.getElementById('peopleTypeShow'),null);
var colorList = ['#4dcd76','#fad338','#f3637b','#0f1f50','#cd2c5a'];
peopleShow.setOption({
color:colorList,
series : [
{
name:'宿迁人口类型占比统计',
type:'pie',
radius : ['35%','50%'],
center : ['50%','50%'],
data:[
{value:'122220',name:'常驻人口'},
{value:'134256',name:'暂住人口'},
{value:'12543',name:'人户一致'}
]
},
{
name:'重点人口人数',
type:'pie',
radius: [0,'30%'],
center : ['50%','50%'],
itemStyle:{
normal:{
color:'#0f53b5',
label : {
position :'center',
formatter :'{b}\n\n{c} 人',
textStyle: {
baseline :'center',
color:'#fff',
fontSize:18
}
}
}
},
data:[{value:'1000',name:'重点人口'}]
},
]
});
//获取后台实时的数据
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);
网友评论