echarts 饼状图,显示指示线和百分数

有时候要在一个饼状图上显示指示线和百分数,(页面空白比较多的话,给人感觉太单一,没有统计感,安全感),但是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} "
                    }
                }
            },

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值