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
原创粉丝点击