echarts 仪表盘 根据值使刻度实现渐变色，但是值大于70多，仪表盘外层就有一圈颜色。很严重的bug。不知道怎么会这样。

echarts 仪表盘 UI需求是根据值使刻度实现渐变色，比如值是50%，刻度就只渐变50%的数量。剩下的是固定刻度底色。
我自己不会写，我是照着网友的代码写的。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #wzy {
            width: 300px;
            height: 300px;
            background-color: #999;
        }
    </style>
</head>
<script src="./js/echarts.js"></script>

<body>
    <div id="wzy"></div>

</body>
<script>
    let value=100
    console.log(value/100);
    var myChart = echarts.init(document.getElementById('wzy'));
    var option = {
        title: { //标题组件
            text: value + '%',
            x: 'center', //设置标题居中
            bottom: 10,
        },
        series: [{
            type: 'gauge',
            min:0,
                            max:100,
                            startAngle: 180, //开始角度 左侧角度
                            endAngle: 0, //结束角度 右侧
                            radius: '80%' ,
                            // progress: {
                            //     show: true,
                            //     width: 10,
                            // },
            axisLine: { //仪表盘轴线样式
                show: true,
                lineStyle: {
                    width: 0,
                    color:((value/100)<=0.1)?([[value/100, '#04b9f8'],[1, 'rgb(70,100,144)']]):(((value/100)<=0.2)?([[0.1, '#04b9f8'],[value/100,'#53c47a'],[1, 'rgb(70,100,144)']]):[
                        [0.1, '#04b9f8'],
                        [0.2,'#53c47a'],
                        [value/100, '#a2fd09'],

                        // [0.3, 'red'],
                        // [0.5, 'orange'],
                        // [0.7, 'yellow'],
                        // [0.9, 'purple'],
                        [1, 'rgb(70,100,144)']
                    ]),
                    opacity: 1, //盘的颜色变成透明
                }
            },
            axisLabel: {
                show: false,
                lineStyle: {
                    width: 20,
                    color: 'auto'
                    // color: [[0.8, '#0066FF'], [1, '#E6EBF8']],
                    // opacity: 0.4, //盘的颜色变成透明
                }
            },

            splitLine: { //分割线样式,是大分割线
                show: false,
                length: 20,
                // 距离线的位置
                //   distance: 0,
                lineStyle: {
                    color: 'auto',
                    width: 5,
                    // color: [[0.8, '#0066FF'], [1, '#E6EBF8']],
                    opacity: 1,
                }
            },

            // 刻度线
            axisTick: {
                show: true,
                length: 20,
                splitNumber: 5, // 每个分割线内的刻度线分为5份
                lineStyle: {
                    color: 'auto',
                    width: 2,
                    opacity: 1,
                }
            },
            data: [{
                value: value,
            }]
        }]
    };
    myChart.setOption(option);
</script>

</html>

当value值超过77时，外层就有一圈颜色。不知道咋回事。

img


img

这个问题可能是因为在渐变颜色的设置中，没有设置完全渐变到固定刻度底色，导致仪表盘外层有一圈颜色。

解决方法是在设置渐变颜色的数组中，最后一个元素设置为固定刻度底色。如下：

lineStyle: {
    width: 0,
    color: [[value/100, '#04b9f8'], [1, 'rgb(70,100,144)']],
    opacity: 1, //盘的颜色变成透明
}

这样仪表盘外层就不会有一圈颜色了。

另外建议您使用条件语句的方法来控制颜色的变化。如下：

if(value<=10){
    color:[[value/100, '#04b9f8'],[1, 'rgb(70,100,144)']]
}else if(value<=20){
    color:[[0.1, '#04b9f8'],[value/100,'#53c47a'],[1, 'rgb(70,100,144)']]
}else{
    color:[[0.1, '#04b9f8'],[0.2,'#53c47a'],[value/100, '#a2fd09'],[1, 'rgb(70,100,144)']]
}

这样更加清晰明了。

试试把这里的[[value/100, '#04b9f8'],[1, 'rgb(70,100,144)']] 改成[[value/100, '#04b9f8'],[1, '#04b9f8']]。