ECharts 儀表盤樣式修改

 

1.代碼

  option = {
        title: {
        },
        tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
            {
                //類型
                type: 'gauge',
                //半徑
                radius: 80,
             
                //起始角度。圓心 正右手側為0度，正上方為90度，正左手側為180度。
                startAngle: 210,
                //結束角度。
                endAngle: -30,
                center: ['50%', '60%'],
                //儀表盤軸線相關配置。
                axisLine: {
                    show: true,
                    // 屬性lineStyle控制線條樣式
                    lineStyle: {
                        width: 20,
                        //color: [[1, '#63869e']]
                        color: [[1, '#EDEFF2']]
                    }
                },
                //分隔線樣式。
                splitLine: {
                    show: true,
                },
                //刻度樣式。
                axisTick: {
                    show: true,
                },
                //刻度標簽。
                axisLabel: {
                    show: true,
                },
                //儀表盤指針。
                pointer: {
                    //這個show屬性好像有問題，因為在這次開發中，需要去掉指正，我設置false的時候，還是顯示指針，估計是BUG吧，我用的echarts-3.2.3；希望改進。最終，我把width屬性設置為0，成功搞定！
                    show: true,
                    //指針長度
                    length: '90%',
                    //width: 0,
                },
                //儀表盤標題。
                title: {
                    show: true,
                    offsetCenter: [0, '-0%'], // x, y，單位px
                    textStyle: {
                        color: '#fff',
                        fontSize: 20
                    }
                },
                //儀表盤詳情，用於顯示數據。
                detail: {
                    show: true,
                    offsetCenter: [0, '60%'],
                    formatter: '{value}%',
                    textStyle: {
                        fontSize: 30,
                        color: '#169FFE',
                    }
                },
                data: [{
                    value: 0,
                    name: 'OEE'
                }]
            }]
    };
    // 基於准備好的dom，初始化echarts實例
    var myChart = echarts.init(document.getElementById(“div的id”));
      var color = [[80 / 100, '#169FFE'], [1, '#EDEFF2']];
                    option.series[0].axisLine.lineStyle.color = color;
                    option.series[0].data[0].value = 80;
    // 使用剛指定的配置項和數據顯示圖表。
    myChart.setOption(option, true);