增加了显示比例，显示内容

显示比例代码显示完整代码：

series: [

{

name:'访问来源',

type:'pie',

radius: ['50%', '70%'],

avoidLabelOverlap: false,

label: {

normal: {

formatter: '{b}:{c}' + '\n\r' + '({d}%)',

show: true,

position: 'left'

},

emphasis: {

show: true,

textStyle: {

fontSize: '30',

fontWeight: 'bold'

}

}

},

labelLine: {

normal: {

show: true

}

},

data:[

{value:335, name:'直接访问'},

{value:310, name:'邮件营销'},

{value:234, name:'联盟广告'},

{value:135, name:'视频广告'},

{value:1548, name:'搜索引擎'}

]

}

]

具体添加的代码就是：

formatter: '{b}:{c}' + '\n\r' + '({d}%)', //增加了格式

如果要增加饼图的横线，则把横线标签设置为true即可:

labelLine: {

normal: {

show: true

}

},

原图效果图

另外对于{a} {b} {c} {d}变量的解释：

{a}
{b}: {c} ({d}%)"//模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比;

如果要修改图形的颜色则增加与以下代码：color

tooltip: {

trigger: 'item',

formatter: "{a}
{b}: ({d}%)"

},

color:['red', 'green','yellow','blueviolet'],

legend: {

如图希望图例不显示，则增加代码：show: false，如下：

legend: {

show: false,

orient: 'vertical',

x: 'right',

data:['男','女']

},

更改图例，加入代码：icon，具体代码如下：

legend: {

icon: 'circle',

orient: 'vertical',

left: 'left',

data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']

},

另外还支持以下图形：

标志图形类型，默认自动选择(8种类型循环使用，不显示标志图形可设为'none')，默认循环选择类型有：

'circle' | 'rectangle' | 'triangle' | 'diamond' |

'emptyCircle' | 'emptyRectangle' | 'emptyTriangle' | 'emptyDiamond'

另外，还支持五种更特别的标志图形'heart'(心形)、'droplet'(水滴)、'pin'(标注)、'arrow'(箭头)和'star'(五角星)，这并不出现在常规的8类图形中，但无论是在系列级还是数据级上你都可以指定使用，同时，'star' + n(n>=3)可变化出N角星，如指定为'star6'则可以显示6角星

自1.3.5起支持symbol为自定义图片，格式为'image://' + '图片路径'， 如'image://../asset/ico/favicon.png'

原图效果图

更改图例位置：增加以下代码：

orient: 'horizontal',//水平方向

left: 'center',

bottom:"bottom",

legend的具体参数信息如下：

legend={

show:true, //是否显示

zlevel:0, //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面

z:2, //所属组件的z分层，z值小的图形会被z值大的图形覆盖

left:"center", //组件离容器左侧的距离,'left', 'center', 'right','20%'

top:"top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'

right:"auto", //组件离容器右侧的距离,'20%'

bottom:"auto", //组件离容器下侧的距离,'20%'

width:"auto", //图例宽度

height:"auto", //图例高度

orient:"horizontal", //图例排列方向

align:"auto", //图例标记和文本的对齐,left,right

padding:5, //图例内边距，单位px 5 [5, 10] [5,10,5,10]

itemGap:10, //图例每项之间的间隔

itemWidth:25, //图例标记的图形宽度

itemHeight:14, //图例标记的图形高度

formatter:function (name) { //用来格式化图例文本，支持字符串模板和回调函数两种形式。模板变量为图例名称 {name}

return 'Legend ' + name;

},

selectedMode:"single", //图例选择的模式,true开启,false关闭,single单选,multiple多选

inactiveColor:"#ccc", //图例关闭时的颜色

textStyle:mytextStyle, //文本样式

data:['类别1', '类别2', '类别3'], //series中根据名称区分

backgroundColor:"transparent", //标题背景色

borderColor:"#ccc", //边框颜色

borderWidth:0, //边框线宽

shadowColor:"red", //阴影颜色

shadowOffsetX:0, //阴影水平方向上的偏移距离

shadowOffsetY:0, //阴影垂直方向上的偏移距离

shadowBlur:10, //阴影的模糊大小

};原图效果图

更多源代码可以关注我个人公众号：随记草堂