Echarts之gauge錶盤的用法

寫移動端有一個監測功率的數據展示,要用錶盤類型的圖示,如下是效果:
在這裏插入圖片描述
四角的數據那是自己寫上去的,和echarts沒關係,主要是中間的錶盤:

drawLine (d) {         // 參數d是後臺獲取的當前功率
        let myChart = echarts.init(document.getElementById('lines'))    //  容器
        window.addEventListener("resize",function(){
            myChart.resize()
        })
        // this.infoList.t2
        // d
        myChart.setOption({
            tooltip : {
                formatter: "{a} <br/>{b} : {c}%"
            },
            series: [
                {
                    name: '功率指標',
                    type: 'gauge',
                    detail: {formatter:'{value}kw',fontSize: 22,},
                    data: [{value: d, name: '實時功率'}],           //  錶盤中央顯示的值和字
                    min:0,   
                    max: 1300,    //設置刻度盤內數值最大值
                    splitNumber: 6,  //設置間隔區域的顯示數量
                    axisLine: {            // 座標軸線 色塊
                        lineStyle: {       // 屬性lineStyle控制線條樣式
                            width: 25,
                            color: [[0.3, '#1ce4e8'], [0.8, '#f7ad1d'] , [1, '#f43d3d']]       //  此處是將錶盤分成的塊數,0-1之間的小數,後面的顏色是每塊的背景色
                        }
                    },
                    axisLabel:{
                        distance: -3,         //  文字距錶盤的距離
                        formatter:function(v){
                            let c = parseInt(v)
                            switch (c + '') {           // 這是每塊的註釋,算法是刻度最大值/設置間隔區域的顯示數量,我這裏是1300/6,具體顯示位置自己根據需要調節
                                case '0' : return ' ';
                                case '216' : return '輕載';
                                case '650' : return '正常';
                                case '1083' : return '重載';
                                case '1300' : return '過載';
                            }
                        }
                    },
                    pointer: { //指針粗細
                      width: 7,
                      length: '68%'
                    },
                    title: {
                offsetCenter: [0, '-30%'],       // x, y,單位px
            },
                }
            ]
        })
    }

所有的註釋我都在代碼上做了標識,如果還有疑問可以看官網示例Echarts

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章