您的位置:首页 > 其它

百度ECHARTS 饼图使用心得 处理data属性

2016-06-08 17:04 549 查看
做过CRM系统的童鞋应该都或多或少接触过hicharts或者echarts等数据统计插件.用过这两款,个人感觉echarts的画面更好看.至于功能,只有适合自己的才是最好的.

今天来说说我使用echarts的饼图的心得.

先给大家看一下简单地效果图:(鼠标移动到1.0时)



使用echarts,可以去官网http://echarts.baidu.com/下载完整源码或者定制自己需要的模块.
使用起来很简单,首先先引用js源文件,再在js中初始化即可:

<scriptsrc="/js/echarts.js"></script>

<divid="main"style="width:100%;height:600px;overflow:visible"></div>

<script>

varmyChart=echarts.init(document.getElementById('main'));//声明一个ehcarts对象
varoption={
title:{//显示标题
text:'BossApp版本信息',
x:'left',
textStyle:{
fontSize:'20',
color:'#333',
fontWeight:'normal'
}
},
tooltip:{//鼠标移到模块上时,弹出框的内容
trigger:'item',
//formatter:"{a}<br/>{b}:{c}({d}%)"
//formatter:"{a}<br/>{b}"
formatter:function(obj){
returnobj.name.content
}
},
//legend:{
//orient:'vertical',
//show:true,
//align:'left',
//data:["1.0","2.0","3.0","4.0","5.0","6.0"]
//},
series:[
{
name:'版本信息',
type:'pie',
//selectedMode:'single',
radius:['50%','75%'],
avoidLabelOverlap:false,
label:{
normal:{
formatter:function(obj){
returnobj.name.title
},
show:true,
position:'inner',//文字显示位置,如上图中的1.0,1.1字样
textStyle:{
fontSize:'14',
fontWeight:'normal'
}
},
emphasis:{
//show:true,
position:'inner',
textStyle:{
fontSize:'14',
fontWeight:'normal'
}
}
},
color:['#4fb8e3','#898989','#898989','#898989','#898989','#898989'],
labelLine:{
normal:{
show:true
}
},
data:[
//{value:335,name:'1.0版本',selected:true},
{value:335,name:{
title:versionInfo[5].version,
content:versionInfo[5].html
}},
{value:310,name:{
title:versionInfo[4].version,
content:versionInfo[4].html
}},
{value:234,name:{
title:versionInfo[3].version,
content:versionInfo[3].html
}},
{value:135,name:{
title:versionInfo[2].version,
content:versionInfo[2].html
}},
{value:200,name:{
title:versionInfo[1].version,
content:versionInfo[1].html
}},
{value:200,name:{
title:versionInfo[0].version,
content:versionInfo[0].html
}}
]
}
]
};
</script>
myChart.setOption(option);//配置生成的echarts,canvas的界面与有option决定

注意option的data这个属性.在官方文档上,都是写的data:[{value:100,name:ricky},{value:101,name:ricky1},.......],

然后tooltip默认的显示内容就为data里面的name属性.上面的例子中,versionInfo是一个变量,通过访问后台接口获取的一个对象.versionInfo有version与html这两个属性,假如你需要将versionInfo的html属性显示在tooltip中.怎么办呢?

我试过直接指定name:versionInfo.html.但是没有用.经过几次实验,发现将name当成一个对象进行处理,再设置tooltip的formatter,

formatter:function(obj){
returnobj.name.content
}
这样搞定了,但由于此时legend的data与series的data不一致,所以无法展示出下图的效果






                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: