vue echarts儀表盤漸變色

效果如圖

 

 

　　　　// this.$echarts 為 echarts對象，該代碼是使用在vue中的
       let option4 = {
            series: [
                {
                type: 'gauge',
                center: ['40%', '60%'],
                startAngle: 200,
                endAngle: -20,
                min: 0,
                max: 60,
                splitNumber: 7,
                itemStyle: {
                    color: new this.$echarts.graphic.LinearGradient(0,0,1,0,[
                        {
                            offset: 0.1,
                            color: "#FFC600"
                        },
                        {
                            offset: 0.6,
                            color: "#30D27C"
                        },
                        {
                            offset: 1,
                            color: "#0B95FF"
                        }
                    ]),
                },
                progress: {
                    show: true,
                    width: 5
                },
                pointer: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        width: 30,
                        color:'#FFAB91'
                    }
                },
                axisTick: {
                    distance: -45,
                    splitNumber: 9,
                    lineStyle: {
                        width: 1,
                        color: new this.$echarts.graphic.LinearGradient(0,0,1,0,[
                            {
                                offset: 0.1,
                                color: "#FFC600"
                            },
                            {
                                offset: 0.6,
                                color: "#30D27C"
                            },
                            {
                                offset: 1,
                                color: "#0B95FF"
                            }
                        ]),
                    }
                },
                splitLine: {
                    distance: -52,
                    length: 11,
                    lineStyle: {
                        width: 2,
                        color: new this.$echarts.graphic.LinearGradient(0,0,1,0,[
                            {
                                offset: 0.1,
                                color: "#FFC600"
                            },
                            {
                                offset: 0.6,
                                color: "#30D27C"
                            },
                            {
                                offset: 1,
                                color: "#0B95FF"
                            }
                    ]),
                    }
                },
                axisLabel: {
                    distance: -20,
                    color: new this.$echarts.graphic.LinearGradient(0,0,1,0,[
                            {
                                offset: 0.1,
                                color: "#FFC600"
                            },
                            {
                                offset: 0.6,
                                color: "#30D27C"
                            },
                            {
                                offset: 1,
                                color: "#0B95FF"
                            }
                        ]),
                    fontSize: 0
                },
                anchor: {
                    show: false
                },
                title: {
                    show: true
                },
　　　　　　　　　 // 圖中的34%是我另外添加的，把下面的show設置為true可以顯示自帶的數字
                detail: {
                    valueAnimation: true,
                    width: '60%',
                    lineHeight: 40,
                    borderRadius: 8,
                    offsetCenter: [0, '-15%'],
                    fontSize: 10,
                    fontWeight: 'bolder',
                    formatter: '{value}',
                    color: '#FFAB91',
                    show:false
                },
                data: [
                    {
                        value: 100
                    }
                ]
                }
            ]
        };