Apache ECharts仪表盘实现全量程渐变进度效果方案咨询

需求说明 #

• 目标效果：仪表盘从最小值到最大值的弧段呈现连续颜色渐变，当前进度值对应渐变中的对应颜色位置
• 参考效果：
  

现有实现问题 #

当前代码将渐变色配置在progress进度条属性上，渐变范围会被限制在已渲染的进度弧段内，导致无论进度值是多少，渐变色都会在当前进度长度内完整铺展，无法实现全量程渐变位置和进度值匹配的效果。
当前错误运行效果：

现有实现代码：

option = {
    tooltip: {
        formatter: '{a} <br/>{b} : {c}%'
    },
    series: [{
        name: 'Pressure',
        type: 'gauge',
        max: 40,
        min: -10,
        startAngle: 180,
        endAngle: 0,

        progress: {
            show: true,
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 1,
                    x2: 1,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: "blue"
                    }, {
                        offset: 0.25,
                        color: "blue"
                    }, {
                        offset: 0.5,
                        color: "green"
                    }, {
                        offset: 0.75,
                        color: "orange"
                    }, {
                        offset: 1,
                        color: "red"
                    }],
                    global: false
                }
            }
        },
        pointer: {
            show: false
        },

        detail: {
            valueAnimation: true,
            formatter: '{value}'
        },
        data: [{
            name: 'data1',
            value: 10,
        }]
    }]
};

实现方案 #

采用「底层渐变轴+上层遮罩」的双层弧段逻辑实现：

• 给仪表盘轴线axisLine配置覆盖全量程的完整连续渐变，作为底层固定层，渐变范围覆盖最小值到最大值的全部弧段
• 关闭默认的progress进度条，新增一层和仪表盘背景色一致的弧段，从当前进度对应的角度位置开始，覆盖到最大值对应的弧段终点，遮挡住进度值之后的渐变部分，露出的渐变段长度、颜色位置就会和当前进度完全匹配
• 角度计算规则：仪表盘总角度跨度为startAngle - endAngle，单数值对应角度 = 总角度跨度/(最大值-最小值)，遮罩层起始角度 = 起始角度 - (当前值-最小值)*单数值对应角度

注意：遮罩层的颜色需要和仪表盘所在画布的背景色保持一致，深色主题替换为对应深色值即可

可直接运行的修正代码：

// 基础配置参数
const gaugeMin = -10
const gaugeMax = 40
const startAngle = 180
const endAngle = 0
const currentValue = 10
const totalAngle = startAngle - endAngle
const valueRange = gaugeMax - gaugeMin
const perValueAngle = totalAngle / valueRange
// 计算遮罩起始角度
const maskStartAngle = startAngle - (currentValue - gaugeMin) * perValueAngle

const option = {
    tooltip: {
        formatter: '{a} <br/>{b} : {c}'
    },
    series: [
        // 第一层：全量程渐变底层轴
        {
            name: 'Pressure',
            type: 'gauge',
            max: gaugeMax,
            min: gaugeMin,
            startAngle: startAngle,
            endAngle: endAngle,
            pointer: {show: false},
            axisTick: {show: false},
            splitLine: {show: false},
            axisLabel: {show: false},
            axisLine: {
                lineStyle: {
                    width: 20,
                    color: [
                        [1, {
                            type: 'linear',
                            x: 0,
                            y: 1,
                            x2: 1,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: "blue"
                            }, {
                                offset: 0.25, color: "blue"
                            }, {
                                offset: 0.5, color: "green"
                            }, {
                                offset: 0.75, color: "orange"
                            }, {
                                offset: 1, color: "red"
                            }],
                            global: false
                        }]
                    ]
                }
            },
            detail: {
                valueAnimation: true,
                formatter: '{value}',
                offsetCenter: [0, '30%']
            },
            data: [{value: currentValue, name: 'data1'}]
        },
        // 第二层：进度后段遮罩
        {
            type: 'gauge',
            max: gaugeMax,
            min: gaugeMin,
            startAngle: maskStartAngle,
            endAngle: endAngle,
            pointer: {show: false},
            axisTick: {show: false},
            splitLine: {show: false},
            axisLabel: {show: false},
            detail: {show: false},
            axisLine: {
                lineStyle: {
                    width: 20,
                    // 此处颜色替换为实际仪表盘背景色
                    color: [[1, '#fff']]
                }
            },
            data: [{value: gaugeMax}]
        }
    ]
};

动态更新进度时，只需要重新计算遮罩层的起始角度，同步更新两层系列的对应配置即可。

内容的提问来源于stack exchange，提问作者Solomon