有时候要在一个饼状图上显示指示线和百分数,(页面空白比较多的话,给人感觉太单一,没有统计感,安全感),但是echarts常规设置没有直接设置既显示指示线,又显示百分数的,所以只能通过非正常渠道去完成这样的需求,话不多说。
思路:两个饼状图,一个设置指示线,一个设置百分数,将两个饼状图重合,达到效果(注意:两个饼状图只是复制series中关于饼状图的设置为两份,在一份中设置指示线,一个设置百分比)。
效果图:
代码:
series : [
// 设置百分比的饼状图
{
name:'上报类型',
type:'pie',
radius : '60%',
center: ['40%', '40%'],
itemStyle : {
normal : {
label:{ //饼图图形上的文本标签
show:true,
position:'inner', //标签的位置
textStyle : {
fontWeight : 300 ,
fontSize : 12 //文字的字体大小
},
formatter:'{d}%'
},
labelLine : {
show : false //隐藏标示线
}
}
},
data:series // function 传进来的数据
},
{ // 设置指示线和指示线上的文字的饼状图
name:'上报类型',
type:'pie',
radius : '60%',
center: ['40%', '40%'],
itemStyle : {
normal : {
label:{ //饼图图形上的文本标签
show : true
},
labelLine : {
show : true //隐藏标示线
}
}
},
data:series // function 传进来的数据
}
]
*:series中copy的两份,除了一个设置指示线和文字,一个设置百分比,其他的设置要一样。指示线和文字的设置都在itemStyle中进行设置了。itemStyle中的属性具体参考官网api:http://echarts.baidu.com/echarts2/doc/option.html#title~series-i(pie).itemStyle
另外还有一种如下图:
series中设置itemStyle:
itemStyle : {
normal : {
label : {
show : true,
formatter: " {d}% \n {b} "
}
}
},