專案裡有儀表盤，整理下樣式配置：

程式碼：

import { Pieces } from "./share/pieces";

/**
 * 儀表盤
 * 文件：https://echarts.apache.org/zh/option.html#series-gauge.axisLine
 * demo：https://echarts.apache.org/examples/zh/editor.html?c=gauge-stage
 */
export class Dashboard {
    constructor(myChart) {
        myChart.setOption(this.getOptions());
        
 
this.doRandomStyle(myChart);
    }

    /**
     * 設定隨機樣式
     */
    doRandomStyle(myChart) {
        let self = this;
        setInterval(function () {
            myChart.setOption({
                series: [
                    {
                        data: [
                            {
                                value: 
 
+(Math.random() * 100).toFixed(2)
                            }
                        ],
                        axisLine: {
                            lineStyle: {
                                color: self.getRandomRange(), // 顏色區間設定
                            }
                        }
                    }
                ]
            });
        }, 
 
2000);
    }

    getOptions() {
        return {
            series: [
                {
                    type: 'gauge',
                    center: [ 400, 400 ], // 的中心（圓心）座標，陣列的第一項是橫座標，第二項是縱座標。
                    // center : ['50%', '50%'], // 支援設定成百分比，設定成百分比時第一項是相對於容器寬度，第二項是相對於容器高度。
                    // radius: '55%', // 儀表盤半徑
                    radius: 240, // 儀表盤半徑
                    startAngle: 225, // 儀表盤起始角度。圓心 正右手側為0度，正上方為90度，正左手側為180度。預設 225
                    endAngle: -45, // 儀表盤結束角度。預設 -45
                    clockwise: true, // 儀表盤刻度是否是順時針增長。 預設 true
                    splitNumber: 10, // 刻度的分割段數。
                    min: 0, // 最小的資料值，對映到 minAngle。
                    max: 120, // 最大的資料值，對映到 maxAngle。
                    axisLine: { // 儀表盤軸線相關配置。
                        show: true, // 是否顯示儀表盤軸線。
                        roundCap: false, // 是否在兩端顯示成圓形。
                        lineStyle: { // 儀表盤軸線樣式。 { color , width , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }
                            width: 30,
                            color: this.getRandomRange(), // 顏色區間設定
                        }
                    },
                    pointer: { // 儀表盤指標。
                        show: true, // 是否顯示指標。
                        showAbove: true, // 指標是否顯示在標題和儀表盤詳情上方。
                        // icon:'none', // ECharts 提供的標記型別包括 circle|rect|roundRect|triangle|diamond|pin|arrow|none，可以通過 'image://url' 設定為圖片，其中 URL 為圖片的連結，或者 dataURI。
                        offsetCenter: [ 0, 0 ], // 相對於儀表盤中心的偏移位置，陣列第一項是水平方向的偏移，第二項是垂直方向的偏移。可以是絕對的數值，也可以是相對於儀表盤半徑的百分比。
                        length: '60%', // 指標長度，可以是絕對數值，也可以是相對於半徑的半分比。
                        width: 10, // 指標寬度。
                        itemStyle: { // 指標樣式。{ color , borderColor , borderWidth , borderType , borderDashOffset , borderCap , borderJoin , borderMiterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }
                            color: 'auto'
                        }
                    },
                    anchor: { // 錶盤中指標的固定點。跟儀表盤指標配置差不多
                        show: true,
                        size: 10,
                        showAbove: true, // 固定點是否顯示在指標上面。
                        icon: 'circle', // ECharts 提供的標記型別包括 circle|rect|roundRect|triangle|diamond|pin|arrow|none，可以通過 'image://url' 設定為圖片，其中 URL 為圖片的連結，或者 dataURI。
                        offsetCenter: [ 0, 0 ], // 相對於儀表盤中心的偏移位置，陣列第一項是水平方向的偏移，第二項是垂直方向的偏移。可以是絕對的數值，也可以是相對於儀表盤半徑的百分比。
                        itemStyle: { // 指標樣式。{ color , borderColor , borderWidth , borderType , borderDashOffset , borderCap , borderJoin , borderMiterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }
                            color: '#fff'
                        }
                    },
                    splitLine: { // 分隔線樣式。
                        show: true, // 是否顯示分隔線。
                        distance: -30, // 分隔線與軸線的距離。
                        length: 30, // 分隔線線長。支援相對半徑的百分比。
                        lineStyle: { // { color , width , type , dashOffset , cap , join , miterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }
                            color: '#fff',
                            width: 4
                        }
                    },
                    axisTick: { // 刻度樣式。
                        show: true, // 是否顯示刻度。
                        splitNumber: 5, // 分隔線之間分割的刻度數。預設 5
                        distance: -30, // 分隔線與軸線的距離。
                        length: 8, // 刻度線長。支援相對半徑的百分比。
                        lineStyle: { // { color , width , type , dashOffset , cap , join , miterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }
                            color: '#fff',
                            width: 2
                        }
                    },
                    axisLabel: {
                        show: true, // 是否軸線顯示標籤。
                        color: 'auto', // 文字的顏色。 預設 auto 歸屬區間顏色
                        fontStyle: 'normal', // 文字字型的風格。 normal|italic|oblique
                        fontWeight: 'bold', // 文字字型的粗細。 normal|bold|bolder|lighter
                        distance: 40, // 標籤與刻度線的距離。
                        fontSize: 20, // 字型樣式相關
                        // formatter: '{value} km/h', // 刻度標籤的內容格式器，支援字串模板和回撥函式兩種形式。
                        // formatter: function (value) {
                        //     return value + 'km/h';
                        // },
                    },
                    detail: { // 儀表盤詳情，用於顯示資料。
                        show: true, // 是否顯示詳情。
                        valueAnimation: true, // 是否開啟標籤的數字動畫。
                        formatter: '{value} km/h', // 格式化函式或者字串
                        color: 'auto', // 文字顏色，預設取數值所在的區間的顏色。
                        offsetCenter: [ 0, '40%' ], // 相對於儀表盤中心的偏移位置，陣列第一項是水平方向的偏移，第二項是垂直方向的偏移。可以是絕對的數值，也可以是相對於儀表盤半徑的百分比。
                        // 字型相關樣式
                    },
                    data: [
                        {
                            value: 70
                        }
                    ],
                    // data: [{
                    //     // 資料項的名稱
                    //     name: '資料1',
                    //     // 資料項值8
                    //     value: 10
                    // }, {
                    //     name: '資料2',
                    //     value: 20
                    // }]
                }
            ]
        };
    }

    /**
     * 獲取隨機顏色區間配置
     * @return [
     *    [ 0.3, '#67e0e3' ],
     *    [ 0.7, '#37a2da' ],
     *    [ 1, '#fd666d' ]
     * ]
     */
    getRandomRange() {
        let arr = Pieces.getRandomPercentByCount(5);
        let res = [];
        let num = 0;
        for (let i = 0; i < arr.length; i++) {
            num += arr[i];
            res.push([ num, Pieces.getColor() ]);
        }
        return res;
    }
}