Echarts响应式 ，饼图-南丁格尔玫瑰图数据差值过大，数据太小显示不全问题， 自定义配置每个扇叶颜色 ，以及响应式设置字体大小，legend大小

先上代码：

//数据
list1:[
    {
        name: '检测羊毛衫',
        value: 1848,
    }, {
        name: '检测棉纺织物',
        value: 235

    }, {
        name: '纺检皮革',
        value: 231
    }, {
        name: '检测丝绸',
        value: 43
    }, {
        name: '检测化学纤维',
        value: 338
    }
],

//echarts渲染
initCharts1() {
    var ele = echarts.init(document.getElementById('tj1'));
    var color = ['#88d112', '#f96740', "#f9bd41", "#07b2e8", "#065fc3"]

    var data = []
    var sumNumber=0
    var max = 0
    this.list1.forEach(item => {
        sumNumber += item.value;
        if(item.value >= max) max = item.value;//记录一个最大值
    });
    // 放大规则
    let number_sure = Math.round(max * 0.5);
    data = this.list1.map(item => {
        return {
            value: number_sure + item.value,
            name: item.name
        }
    })

    // var data = this.list1
    ele.setOption({
        tooltip: {
            trigger: 'item',
            formatter: function (params) {
                return params.marker + params.name + '<span style="padding-left:20px;"></span>' + (params.value - number_sure)
            },
        },
        legend: {
            show: true,
            left: "50%",
            top: "center",
            textStyle: {
                color:'#fff',
                rich: {
                    labelName: {
                        fontSize:'.16rem',
                        width: this.nowSize(85),
                        color:"#000",
                    },
                    count: {
                        width:40,
                        fontSize: '.16rem',
                        align: 'right',
                        color: '#00b6e0',
                        padding: [0, 0, 0, 15],
                    },
                },
                padding:[0,0,-2,0]
            },
            itemHeight: this.nowSize(12),
            itemWidth: this.nowSize(12),
            itemGap: this.nowSize(12),
            formatter:  function(name){
                var target = 0;
                for (var i = 0, l = data.length; i < l; i++) {
                if (data[i].name == name) {
                    target = (data[i].value - number_sure);
                }
                }
                return `{labelName|${name.length>8?name.slice(0,8)+'...':name}}{count|${target}}`
            },
        
        },
        series: [{
            total: 0,
            type: 'pie',
            radius: ['15%', "80%"],
            center: ['24%', '53%'],
            avoidLabelOverlap: false,
            roseType: 'radius',
            minAngle:10,
            itemStyle: {
                normal: {
                    borderRadius: 2,
                    color: function (params) {
                        return color[params.dataIndex]
                    },
                    textStyle: {
                        color: function (params) {
                            return color[params.dataIndex]
                        },
                    },
                    labelLine: {
                        show: false, //选中时不显示数据标签引导线
                        length: 30,
                        lineStyle: {
                            width: 1,
                            type: 'solid'
                        }
                    }
                }
            },
            label: {
                normal: {
                    show: false,
                    formatter: function (params) {
                        return params.name + '\n' + (params.value - number_sure)
                    },
                },
            },
            data: data
        }]
    });
    
    window.addEventListener('resize',function () {//执行
        ele.resize();
    })
},

1、数据差值过大，数据太小显示不全问题

这个问题需要解决的点有两个一个是，数据太小，饼图占比太小，要解决这个问题很简单，只需要加一个minAngle: 10, //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互，即可，详见上方代码

二是在南丁格尔玫瑰图中还要控制最大值过大导致扇叶过高超出屏幕问题，要解决这个问题，那就只能对数据进行处理，找出数据中的最大值，为每一项数据都加上最大值的一半，重点！！！，渲染tooltip和legend时记得把数据转回正确的值，代码如上

核心代码：

this.list1.forEach(item => {
    sumNumber += item.value;
    if(item.value >= max) max = item.value;//记录一个最大值
});
// 放大规则
let number_sure = Math.round(max * 0.5);
data = this.list1.map(item => {
    return {
        value: number_sure + item.value,
        name: item.name
    }
})

2、响应式设置字体大小，legend大小，自定义配置每个扇叶颜色

直接上图：

320x568分辨率下：

430x932分辨率下：

820x1180分辨率下：

1.自定义扇叶颜色，定义一个需要的颜色合集，在series.itemStyle.normal.color中去动态渲染，关键代码如下：

...
var color = ['#88d112', '#f96740', "#f9bd41", "#07b2e8", "#065fc3"]
...
series: [{
    ...
    itemStyle: {
        normal: {
            color: function (parme) {
                return color[parme.dataIndex]
            },
            textStyle: {
                color: function (parme) {
                    return color[parme.dataIndex]
                },
            },
            labelLine: {
                show: false, //选中时不显示数据标签引导线
                length: 30,
                lineStyle: {
                    width: 1,
                    type: 'solid'
                }
            }
        }
    },
   ...
}]

2.文字响应式控制的核心还是用媒体查询配合rem，rem单位在设置echatrs的fontSize时，是生效的，如图配置：

@media(min-width:2560px){ html { font-size:150px; } } /*非移动端*/
@media(max-width:2560px){ html { font-size:130px; } } /*非移动端*/
@media(max-width:2200px){ html { font-size:100px; } } /*非移动端*/
@media(max-width:540px){ html { font-size:84.375px; } } /*Android常用宽度*/
@media(max-width:480px){ html { font-size:75px; } }		/*Android常用宽度*/
@media(max-width:414px){ html { font-size:64.69px; } }  /*i6Plus,i7Plus宽度*/  
@media(max-width:375px){ html { font-size:58.59px; } }	/*i6,i7宽度*/
@media(max-width:360px){ html { font-size:56.25px; } }	/*Android常用宽度*/
@media(max-width:320px){ html { font-size:50px; } }	

3.对于echarts中的其他的width和heigth设置，可通过计算来实现，如图：

// 换算方法
nowSize(val,initWidth=430){
    //当前视口宽度
    let nowClientWidth = document.documentElement.clientWidth;
    // 如果要考虑适配pc端，加上这个if判断，或根据实际情况进行调整
    if(nowClientWidth>600 && nowClientWidth<2200){
        nowClientWidth = 600
    }else if(nowClientWidth >= 2200){
        nowClientWidth = 800
    }
    return val * (nowClientWidth/initWidth);
}