一个标准的pie图：仅有一个series，其中包含了一些属性如下图：
option = { title : { text: '某站点用户访问来源', subtext: '纯属虚构', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient : 'vertical', x : 'left', 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 : '55%',//半径，支持绝对值（px）和百分比，百分比计算传数组实现环形图，[内半径，外半径] center: ['50%', '60%'],//圆心坐标，支持绝对值（px）和百分比 data:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1548, name:'搜索引擎'} ] } ] };
标准环形图：变动的地方在radius上从一个值变成了2个值
option = { tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient : 'vertical', x : 'left', 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 : ['50%', '70%'], //变成了圆环 itemStyle : { normal : { label : { show : false }, labelLine : { show : false } }, emphasis : { label : { show : true, position : 'center', textStyle : { fontSize : '30', fontWeight : 'bold' //在圆环的中间显示信息 } } } }, data:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1548, name:'搜索引擎'} ] } ] };
嵌套图形：设置好内圆和外环的radius就可以了
注意一个函数，点击饼图显示信息:
var ecConfig = require('echarts/config'); myChart.on(ecConfig.EVENT.PIE_SELECTED, function (param){ var selected = param.selected; var serie; var str = '当前选择： '; for (var idx in selected) { serie = option.series[idx]; for (var i = 0, l = serie.data.length; i < l; i++) { if (selected[idx][i]) { str += '【系列' + idx + '】' + serie.name + ' : ' + '【数据' + i + '】' + serie.data[i].name + ' '; } } } document.getElementById('wrong-message').innerHTML = str; })
南丁格尔玫瑰图：
专门在series中有这样一个设置属性roseType：南丁格尔玫瑰图模式，'radius'（半径） | 'area'（面积）
option = { title : { text: '南丁格尔玫瑰图', subtext: '纯属虚构', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { x : 'center', y : 'bottom', data:['rose1','rose2','rose3','rose4','rose5','rose6','rose7','rose8'] }, 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 : [50, 110], center : ['25%', 200], //圆心坐标，支持绝对值（px）和百分比 roseType : 'radius', //南丁格尔玫瑰图模式，'radius'（半径） | 'area'（面积） itemStyle : { normal : { label : { show : false }, labelLine : { show : false } }, emphasis : { label : { show : true }, labelLine : { show : true } } }, data:[ {value:10, name:'rose1'}, {value:5, name:'rose2'}, {value:15, name:'rose3'}, {value:25, name:'rose4'}, {value:20, name:'rose5'}, {value:35, name:'rose6'}, {value:30, name:'rose7'}, {value:40, name:'rose8'} ] }, { name:'面积模式', type:'pie', radius : [30, 110], center : ['75%', 200], roseType : 'area', data:[ {value:10, name:'rose1'}, {value:5, name:'rose2'}, {value:15, name:'rose3'}, {value:25, name:'rose4'}, {value:20, name:'rose5'}, {value:35, name:'rose6'}, {value:30, name:'rose7'}, {value:40, name:'rose8'} ] } ] };
多个环形图组合：
关键要设置两个参数来控制颜色
var labelTop = { //有颜色的地方 normal : { label : { show : true, position : 'center', textStyle: { baseline : 'bottom' } }, labelLine : { show : false } } }; var labelBottom = { //无颜色的地方 normal : { color: '#ccc', label : { show : true, position : 'center', formatter : function (a,b,c){return 100 - c + '%'}, textStyle: { baseline : 'top' // 垂直对齐方式，可选为：'top' | 'bottom' | 'middle' } }, labelLine : { show : false } }, emphasis: { color: 'rgba(0,0,0,0)' } }; var radius = [40, 55]; option = { tooltip : { trigger: 'item', formatter: "{b} : {c} ({d}%)" }, legend: { x : 'center', y : 'center', data:[ 'GoogleMaps','Facebook','Youtube','Google+','Weixin', 'Twitter', 'Skype', 'Messenger', 'Whatsapp', 'Instagram' ] }, title : { text: 'The App World', subtext: 'from global web index', x: 'center' }, toolbox: { show : true, feature : { dataView : {show: true, readOnly: false}, restore : {show: true}, saveAsImage : {show: true} } }, series : [ { type : 'pie', center : ['10%', '30%'], radius : radius, data : [ {name:'other', value:46, itemStyle : labelBottom}, {name:'GoogleMaps', value:54,itemStyle : labelTop} ] }, { type : 'pie', center : ['30%', '30%'], radius : radius, data : [ {name:'other', value:56, itemStyle : labelBottom}, {name:'Facebook', value:44,itemStyle : labelTop} ] }, { type : 'pie', center : ['50%', '30%'], radius : radius, data : [ {name:'other', value:65, itemStyle : labelBottom}, {name:'Youtube', value:35,itemStyle : labelTop} ] }, { type : 'pie', center : ['70%', '30%'], radius : radius, data : [ {name:'other', value:70, itemStyle : labelBottom}, {name:'Google+', value:30,itemStyle : labelTop} ] }, { type : 'pie', center : ['90%', '30%'], radius : radius, data : [ {name:'other', value:73, itemStyle : labelBottom}, {name:'Weixin', value:27,itemStyle : labelTop} ] }, { type : 'pie', center : ['10%', '70%'], radius : radius, data : [ {name:'other', value:78, itemStyle : labelBottom}, {name:'Twitter', value:22,itemStyle : labelTop} ] }, { type : 'pie', center : ['30%', '70%'], radius : radius, data : [ {name:'other', value:78, itemStyle : labelBottom}, {name:'Skype', value:22,itemStyle : labelTop} ] }, { type : 'pie', center : ['50%', '70%'], radius : radius, data : [ {name:'other', value:78, itemStyle : labelBottom}, {name:'Messenger', value:22,itemStyle : labelTop} ] }, { type : 'pie', center : ['70%', '70%'], radius : radius, data : [ {name:'other', value:83, itemStyle : labelBottom}, {name:'Whatsapp', value:17,itemStyle : labelTop} ] }, { type : 'pie', center : ['90%', '70%'], radius : radius, data : [ {name:'other', value:89, itemStyle : labelBottom}, {name:'Instagram', value:11,itemStyle : labelTop} ] } ] };
四分之一圆环图：
1.类似瀑布图需要设置辅助区域设置为透明色
2.在series中有一个clockWise属性需要设置成false
| {boolean} clockWise | true | 显示是否顺时针 |
var dataStyle = { normal: { label: {show:false}, labelLine: {show:false} } }; var placeHolderStyle = { normal : { color: 'rgba(0,0,0,0)', label: {show:false}, labelLine: {show:false} }, emphasis : { color: 'rgba(0,0,0,0)' } }; option = { title: { text: '你幸福吗？', subtext: 'From ExcelHome', sublink: 'http://e.weibo.com/1341556070/AhQXtjbqh', x: 'center', y: 'center', itemGap: 20, textStyle : { color : 'rgba(30,144,255,0.8)', fontFamily : '微软雅黑', fontSize : 35, fontWeight : 'bolder' } }, legend: { orient : 'vertical', x : document.getElementById('main').offsetWidth / 2, y : 55, itemGap:12, data:['68%的人表示过的不错','29%的人表示生活压力很大','3%的人表示“我姓曾”'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, restore : {show: true}, saveAsImage : {show: true} } }, series : [ { name:'1', type:'pie', clockWise:false, //显示是否顺时针 radius : [150, 125], itemStyle : dataStyle, data:[ { value:68, name:'68%的人表示过的不错' }, { value:32, name:'invisible', itemStyle : placeHolderStyle } ] }, { name:'2', type:'pie', clockWise:false, radius : [125, 100], itemStyle : dataStyle, data:[ { value:29, name:'29%的人表示生活压力很大' }, { value:71, name:'invisible', itemStyle : placeHolderStyle } ] }, { name:'3', type:'pie', clockWise:false, radius : [100, 75], itemStyle : dataStyle, data:[ { value:3, name:'3%的人表示“我姓曾”' }, { value:97, name:'invisible', itemStyle : placeHolderStyle } ] } ] };
个性化的一些东西：
option = { tooltip : { show: true, formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient : 'vertical', x : 'left', 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', center : ['35%', 200], radius : 80, itemStyle : { normal : { label : { position : 'inner', formatter : function (a,b,c,d) {return (d - 0).toFixed(0) + '%'} }, labelLine : { show : false } }, emphasis : { label : { show : true, formatter : "{b}\n{d}%" } } }, data:[ {value:335, name:'直达'}, {value:679, name:'营销广告'}, {value:1548, name:'搜索引擎'} ] }, { name:'访问来源', type:'pie', center : ['35%', 200], radius : [110, 140], data:[ {value:335, name:'直达'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, { value:1048, name:'百度', itemStyle : { normal : { color : (function (){ var zrColor = require('zrender/tool/color'); return zrColor.getRadialGradient( //渐变色 300, 200, 110, 300, 200, 140, [[0, 'rgba(255,255,0,1)'],[1, 'rgba(30,144,250,1)']] ) })(), label : { textStyle : { color : 'rgba(30,144,255,0.8)', align : 'center', baseline : 'middle', fontFamily : '微软雅黑', fontSize : 30, fontWeight : 'bolder' } }, labelLine : { length : 40, lineStyle : { color : '#f0f', width : 3, type : 'dotted' } } } } }, {value:251, name:'谷歌'}, { value:102, name:'必应', itemStyle : { normal : { label : { show : false }, labelLine : { show : false } }, emphasis : { label : { show : true }, labelLine : { show : true, length : 50 } } } }, {value:147, name:'其他'} ] }, { name:'访问来源', type:'pie', clockWise:true, startAngle: 135, center : ['75%', 200], radius : [80, 120], itemStyle : { normal : { label : { show : false }, labelLine : { show : false } }, emphasis : { color: (function (){ var zrColor = require('zrender/tool/color'); return zrColor.getRadialGradient( 650, 200, 80, 650, 200, 120, [[0, 'rgba(255,255,0,1)'],[1, 'rgba(255,0,0,1)']] ) })(), label : { show : true, position : 'center', formatter : "{d}%", textStyle : { color : 'red', fontSize : '30', fontFamily : '微软雅黑', fontWeight : 'bold' } } } }, data:[ {value:335, name:'直达'}, {value:310, name:'邮件营销'}, {value:234, name:'联盟广告'}, {value:135, name:'视频广告'}, {value:1548, name:'搜索引擎'} ], markPoint : { symbol: 'star', data : [ {name : '最大', value : 1548, x:'80%', y:50, symbolSize:32} ] } } ] };
