乐趣区

关于javascript:echarts圆环百分比数据溢出解决办法

这是数据溢出导致 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);
退出移动版