echarts 玫瑰图比例太小显示优化

选择了 echarts 做大数据统计，但是由于统计数据的差异太大，数据特别小的时候，使用玫瑰图展示会造成看不清楚扇区的问题，用户体验着实不好！如果使用普通饼图就不会有这种情况发生，但会让项目看着很单调！我从网上找解决方法，关于这个问题的解答实在太少了，一直都没找到，终于，今天想到了合适的方法并解决这个bug！：）具体如下。

1.效果图

---

数据中，最小值为 1 ，最大值为 17400
如果不做处理，相信 1 的那一块扇区肯定不能正常显示！！！

---

2.实现思路

思路其实很简单，就是把原始的数据放大！

1. 计算原始数据的总和 sum ，并找出最大数值 max ;
2. 设计数据放大规则，我这里是斜体样式先将最大值 max 放大 20% 取随机数得到 number，然后在原始数据的基础上，每条数据的 value 再加上 number，形成新的饼图数据数组 showData
3. 数据放大后玫瑰图就不会出现扇区太小的问题，但是记得把 tooltip 中的 formatter 还原成原始数据

3.代码

var pieData =[
    {value:1, name:'直接访问-1'},
    {value:100, name:'邮件营销-100'},
    {value:2740, name:'联盟广告-2740'},
    {value:1235, name:'视频广告-1235'},
    {value:5500, name:'搜索引擎-5500'},
    {value:10, name:'直接访问-10'},
    {value:130, name:'邮件营销-130'},
    {value:17400, name:'联盟广告-17400'},
    {value:1235, name:'视频广告-1235'},
    {value:5400, name:'搜索引擎-5400'}
]
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
    }
})

option = {
    backgroundColor: '#2c343c',
    
    tooltip : {
        trigger: 'item',
        formatter: function (param){
            return param.name +': '+ (param.value - number) + ' ' + (((param.value - number) / sum) * 100).toFixed(4) + '%'
        }
    },

    visualMap: {
        show: false,
        min: 0,
        max: 50,
        inRange: {
            colorLightness: [0, 0.5]
        }
    },
    
    series : [
        {
            name:'访问来源',
            type:'pie',
            radius : ['10%', '55%'],
            center: ['50%', '50%'],
            data: showData,
            roseType: 'radius',
            label: {
                normal: {
                    textStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    }
                }
            },
            labelLine: {
                normal: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 20
                }
            },
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },

            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
                return Math.random() * 200
            }
        }
    ]
}