echars饼图南丁格尔图极差较大半径问题

1、由于值的极差比较大导致饼图半径比例较大,给用户体验不好,不太直观。

解决思路:

  1. 放大数据再还原之前的值
    代码如下:
                //放大值
                var pieData=data.data;
					var showData =[];
					var sum = 0, max = 0;
					pieData.forEach(item => {
					    sum += item.value;
					    if(item.value >= max) max = item.value;
					});
					// 放大规则
					var number = Math.round(max * 0.5);
					showData = pieData.map(item => {
					    return {
					        value: number + item.value,
					        name: item.name
					    }
					});
				myChart.setOption({
			    	backgroundColor: '#fff',
			        legend:{
			             orient: 'vertical', 
			            x: 'left', 
			            y: '80', 
			            padding: 10, 
			            itemGap: 20,
			            textStyle: {color: '#c3cad9'},
			        },
			        title: {
			            text: 'IEP目标',
			            left: 'center',
			            top: 20,
			            textStyle: {
			                color: '#000'
			            }
			        },
				
   //还原值
    tooltip: {
			            trigger: 'item',
			            formatter: function (param){
			                return param.name +': '+ (param.value - number) + ' ' + (((param.value - number) / sum) *       100).toFixed(2) + '%'
			            }
			        },
			        visualMap: {
			            show: false,
			            min: 500,
			            max: 600,
			            inRange: {
			            }
			        },
			        series: [{
			            name: '访问来源',
			            type: 'pie',
			            radius: '50%',
			                selectedMode: 'single',
			                selectedOffset: 10,
			            clockwise: true,
			            center: ['50%', '50%'],
			            color: ['#43cadd','#3893e5','#FCC708','#03B48E'],
			            data:showData,
			            roseType: 'radius',
			            label: {
			                normal: {
			                    rich: {
			                        b: {
			                            color: '#d9efff',
			                            fontSize: 15,
			                            height: 40
			                        },
			                        c: {
			                            color: '#fff',
			                            fontSize: 14,
			                            fontWeight:'bold',
			                            lineHeight: 5
			                        },
			                    },
			                }
			            },
			            itemStyle:{
			              borderWidth:'10',
			              color:'pink',
			              borderColor:'#FFF',
			              normal:{
			              borderWidth:'5',
			              borderColor:'rgba(255,255,255,2)',
			              },
			            },
			            labelLine: {
			                normal: {
			                    backgroundColor:'yellow',
			                    borderColor:'skyblue',
			                    borderWidth:10,
			                    lineStyle: {
			                    borderColor:'skyblue',
			                    borderWidth:10,
			                    backgroundColor:'yellow',
			                }
			            },
			            }
			        }]	
				}, true);	

效果如下:
在这里插入图片描述

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值