头图

图片描述

这是数据溢出导致echarts 圆环百分比出现不规则图形。
原因举例来源于:data: [{...}]; value: 100 - value_huizong,
若当value_huizong大于100,则出现溢出数据导致出现负值,故问题产生。

解决办法:
判断思路:当每个模块数据大于100的时候,赋值100(但label中还是显示溢出数据,比如131%),若小于100则显示正常值

最后效果与代码附上:
图片描述

var myChart = echarts.init(document.getElementById('huizong'));

    var data1 = {
        value: 131, //汇总
        text: '汇总',
        color: '#FF543C',
    };
    var data2 = {
        value: 79, //质量
        text: '质量',
        color: '#3E88F0',
    };
    var data3 = {
        value: 1221, //环保
        text: '环保',
        color: '#2FD574',
    };

    let value1 = data1.value || 0;
    let value2 = data2.value || 0;
    let value3 = data3.value || 0;

    if(value1 > 100){
        value_huizong = 100; 
    }else{
        value_huizong = value1;
    };
    if(value2 > 100){
        value_zhiliang = 100; 
    }else{
        value_zhiliang = value2;
    };
    if(value3 > 100){
        value_huanbao = 100; 
    }else{
        value_huanbao = value3;
    };
    
    option = {
        backgroundColor: '#fff',
        // tooltip: {
        //     trigger: 'item',
        // },
        series: [{
            name: '汇总',
            type: 'pie',
            radius: ['35', '45'],
            center: ['15%', '35%'],
            hoverAnimation: false,
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [{
                value: value1,
                name: data1.text,
                itemStyle: {
                    normal: {
                        color: data1.color,
                    }
                },
                label: {
                    normal: {
                        textStyle: {
                            fontSize: 12,
                            fontWeight: 100,
                            color: data1.color,
                        }
                    }
                }
            },
            {
                value: 100 - value_huizong,
                name: '占比',
                tooltip: {
                    show: false
                },
                itemStyle: {
                    normal: {
                        color: '#E0E3E9',
                    }
                },
                label: {
                    normal: {
                        formatter: value1 + '' + '%',
                        textStyle: {
                            fontSize: 16,
                            color: data1.color
                        }
                    },

                }
            }
            ]
        },
        {
            name: '质量',
            type: 'pie',
            radius: ['35', '45'],
            center: ['48%', '35%'],
            hoverAnimation: false,
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [{
                value: value2,
                name: data2.text,
                itemStyle: {
                    normal: {
                        color: data2.color,
                    }
                },
                label: {
                    normal: {
                        textStyle: {
                            fontSize: 12,
                            fontWeight: 100,
                            color: data2.color,
                        }
                    }
                }
            },
            {
                value: 100 - value_zhiliang,
                name: '占比',
                tooltip: {
                    show: false
                },
                itemStyle: {
                    normal: {
                        color: '#E0E3E9',
                    }
                },
                label: {
                    normal: {
                        formatter: value2 + '' + '%',
                        textStyle: {
                            fontSize: 16,
                            color: data2.color
                        }
                    },

                }
            }
            ]
        },
        {
            name: '环保',
            type: 'pie',
            radius: ['35', '45'],
            center: ['81%', '35%'],
            hoverAnimation: false,
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [{
                value: value3,
                name: data3.text,
                itemStyle: {
                    normal: {
                        color: data3.color,
                    }
                },
                label: {
                    normal: {
                        textStyle: {
                            fontSize: 12,
                            fontWeight: 100,
                            color: data3.color,
                        }
                    }
                }
            },
            {
                value: 100 - value_huanbao,
                name: '占比',
                tooltip: {
                    show: false
                },
                itemStyle: {
                    normal: {
                        color: '#E0E3E9',
                    }
                },
                label: {
                    normal: {
                        formatter: value3 + '' + '%',
                        textStyle: {
                            fontSize: 16,
                            color: data3.color
                        }
                    },

                }
            }
            ]
        }]
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

this_MyFunction
425 声望3 粉丝