Apache ECharts Gauge Gradient Style

Question

我想得到这样的东西，图表的样式从最小值的颜色变为最大值的颜色，进度值介于两者之间。

我有这个代码：

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 // default is false
                }
            }
        },
        pointer: {
            show: false
        },

        detail: {
            valueAnimation: true,
            formatter: '{value}'
        },
        data: [{
                // name of date item
                name: 'data1',
                // value of date item is 8
                value: 10,
            },
            // {
            //     name: 'data2',
            //     value: 40,
            //     // user-defined label format that only useful for this data item
            //     label: {},
            //     // user-defined special itemStyle that only useful for this data item
            //     itemStyle:{},
            //     anchor: {
            //       show: false
            //     },
            //     progress: {
            //       itemStyle: {
            //         color: 'black'
            //       }
            //     },
            //     title: {
            //       show: false
            //     },
            //     detail: {
            //       show: false
            //     },
            // }
        ]
    }]
};

这给出了接近我想要的但不是真的，因为你可以看到颜色范围适用于当前值。要对此进行测试，请在此处粘贴代码：

https://echarts.apache.org/examples/en/editor.html?c=gauge-simple

结果：

另一种解决方案是用这种渐变颜色绘制整个轴线，并在进度值之后覆盖右侧，但不确定如何做到这一点。

Answer 1

看看官方自定义仪表示例