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

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

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

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

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

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

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

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儀表盤展示實時數據的實現的文章就介紹到這了,更多相關Vue Echarts儀表盤 內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！