寫移動端有一個監測功率的數據展示,要用錶盤類型的圖示,如下是效果:
四角的數據那是自己寫上去的,和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