echarts2 饼图实例一则 自定义数据标签
来源:互联网 发布:可以追里番的软件 编辑:程序博客网 时间:2024/06/05 06:11
最近有网友想通过echarts2实现如下效果
该图的难点在于 图例和数据标签不一致,拿到这个需求之后我第一时间想的是转换成如下的效果
但是网友表示不能接受,所以我只要在去查阅echarts2的帮助文档,终于让我找到了方法,就是利于自定义itemStyle.label.formatter来实现,
效果如下:
代码:
注:可以直接将代码添加到如下链接中查看效果
http://echarts.baidu.com/echarts2/doc/example/pie4.html#
option = { title : { text: '各学段师生比' }, tooltip : { trigger: 'item', formatter: "{a}{b} : {c} ({d}%)" }, legend: { x : 'center', y : 'bottom', data:['教师','学生'] },option = { title : { text: '各学段师生比' }, tooltip : { trigger: 'item', formatter: "{a}{b} : {c} ({d}%)" }, legend: { x : 'center', y : 'bottom', data:['教师','学生'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, series : [ { name:'小学', type:'pie', radius : [10, 50], center : ['25%', 200], roseType : 'radius', itemStyle: { normal: { label:{ show: true, position:'outer', formatter: "{a}{b} " } } }, data:[ {value:10, name:'教师'}, {value:5, name:'学生'} ] }, { name:'初中', type:'pie', radius : [10, 50], center : ['50%', 200], roseType : 'radius', itemStyle: { normal: { label:{ show: true, position:'outer', formatter: "{a}{b}" } } }, data:[ {value:10, name:'教师'}, {value:5, name:'学生'} ] }, { name:'高中', type:'pie', radius : [10, 50], center : ['75%', 200], roseType : 'radius', itemStyle: { normal: { label:{ show: true, position:'outer', formatter: "{a}{b}" } } }, data:[ {value:10, name:'教师'}, {value:5, name:'学生'} ] } ]}; toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, series : [ { name:'小学', type:'pie', radius : [10, 50], center : ['25%', 200], roseType : 'radius', itemStyle: { normal: { label:{ show: true, position:'outer', formatter: "{a}{b} " } } }, data:[ {value:10, name:'教师'}, {value:5, name:'学生'} ] }, { name:'初中', type:'pie', radius : [10, 50], center : ['50%', 200], roseType : 'radius', itemStyle: { normal: { label:{ show: true, position:'outer', formatter: "{a}{b}" } } }, data:[ {value:10, name:'教师'}, {value:5, name:'学生'} ] }, { name:'高中', type:'pie', radius : [10, 50], center : ['75%', 200], roseType : 'radius', itemStyle: { normal: { label:{ show: true, position:'outer', formatter: "{a}{b}" } } }, data:[ {value:10, name:'教师'}, {value:5, name:'学生'} ] } ]};
1 2
- echarts2 饼图实例一则 自定义数据标签
- echarts2 实例
- echarts2.2.7动态数据填充
- 自定义标签的实例
- 自定义标签实例
- 自定义标签实例
- jsp自定义标签实例
- Jsp自定义标签实例
- 自定义标签实例
- 自定义标签(实例)
- struts2 自定义标签 实例
- struts2 自定义标签 实例
- Struts2自定义标签实例
- 自定义标签实例
- struts2 自定义标签 实例
- struts2 自定义标签实例
- jsp自定义标签实例
- Echarts2 自定义悬浮框提示色
- java中private,protected,public的default的区别
- java字符串的各种编码转换
- 任务的堆栈
- openmesh 基底的剪切
- spring mvc4.1.x如何使用s:mvcUrl
- echarts2 饼图实例一则 自定义数据标签
- httpclient4.5 例子
- spring mvc返回类型总结(主要是对返回路径的总结)
- Android之通知使用权
- Android ShareSDK第三方登录(分别有新浪、QQ、微信、Facebook、Linkedin、Google等等)
- Iframe 自适应高度(js)
- bzoj 3594: [Scoi2014]方伯伯的玉米田 动态规划+树状数组
- iOS视频水印
- MongoDB数据库设计备忘