在vue中echarts儀表盤實時數(shù)據(jù)彩筆一枚，簡單記錄一下。業(yè)務場景：通過websocket實時推送數(shù)據(jù)，將數(shù)據(jù)渲染到儀表盤中。

第一步：基于準備好的dom，初始化echarts儀表盤實例。

第二步：我是通過父子組件傳值把數(shù)據(jù)接收過來，在data中定義upPressure參數(shù)，并將接收來的devicePressure參數(shù)賦值給它，便于后面將值傳入到echarts中

父組件中 <div shadow='always'> <objEcharts :devicePressure='pressure'></objEcharts> </div>子組件中export default { props: { devicePressure: { type: String, require: true }, }, data() { return { upPressure: this.devicePressure, }; },

第三步：因為是實時數(shù)據(jù)，就需要在watch中監(jiān)聽數(shù)據(jù)變化，實時更新。注：這里我只監(jiān)聽一個參數(shù)變化，沒有使用deep: true。

watch: { //監(jiān)聽devicePressure的數(shù)據(jù)變化。 devicePressure(newData, oldData) { //把更新后的數(shù)據(jù)newData，賦值給需要傳入echarts中的參數(shù)。 this.upPressure = newData; //一定要調用echarts實例，要不然echarts不實時展示。 this.drawLine(); }, },

第四步：數(shù)據(jù)處理完之后，就要把它展示到儀表盤中了，所以直接找到echarts中需要數(shù)據(jù)的地方就好了。介于儀表盤樣式，可結合官方文檔自定義。

export default { props: { devicePressure: { type: String, require: true }, }, data() { return { upPressure: this.devicePressure, }; }, mounted() { this.drawLine(); }, watch: { devicePressure(newData, oldData) { this.upPressure = newData; this.drawLine(); }, },methods: { drawLine() { // 基于準備好的dom，初始化echarts實例 let visualOneChart = this.$echarts.init(document.getElementById('visualOneChart')); // 繪制圖表 visualOneChart.setOption({ tooltip: { formatter: '{a} <br/>{b} : {c}Pa', }, series: [ { name: '壓力值', type: 'gauge', clockwise: true, detail: { formatter: this.upPressure, textStyle: {fontSize: 14, }, }, data: [{ value: this.upPressure, name: '壓力值' }], radius: '90%', axisLabel: {// 刻度標簽。 show: true, distance: -5, color: 'black',fontSize: 10,formatter: '{value}', }, axisLine: {// 儀表盤軸線(輪廓線)相關配置。 show: true,lineStyle: {// 儀表盤軸線樣式。opacity: 1, width: 15, shadowBlur: 10,}, }, pointer: { // 儀表盤指針。 show: true, length: '70%',width: 4, }, }, ], }); }, },}

到此這篇關于Vue中使用Echarts儀表盤展示實時數(shù)據(jù)的實現(xiàn)的文章就介紹到這了,更多相關Vue Echarts儀表盤 內容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持好吧啦網(wǎng)！