久久r热视频,国产午夜精品一区二区三区视频,亚洲精品自拍偷拍,欧美日韩精品二区

您的位置:首頁技術文章
文章詳情頁

Vue中使用Echarts儀表盤展示實時數據的實現

瀏覽:79日期:2022-11-07 18:42:30

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

標簽: Vue
相關文章:
主站蜘蛛池模板: 玛多县| 福鼎市| 文山县| 安陆市| 永川市| 曲麻莱县| 通州市| 三门县| 北宁市| 卢湾区| 津南区| 大渡口区| 晋江市| 平安县| 文登市| 延边| 宜良县| 枣庄市| 富蕴县| 石楼县| 揭东县| 东乌| 柳河县| 九龙坡区| 双柏县| 德惠市| 张家港市| 新宁县| 盐亭县| 封开县| 仁寿县| 宕昌县| 娱乐| 和政县| 武城县| 湖州市| 临夏市| 临清市| 涿州市| 类乌齐县| 高州市|