增加了显示比例，显示内容
显示比例代码显示完整代码：
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, //阴影的模糊大小
};原图效果图
更多源代码可以关注我个人公众号：随记草堂
echarts 默认显示图例_Echarts 饼状图显示信息 内容 值 百分比都显示的代码 更改图例等问题汇总...
