国产成人精品亚洲777人妖,欧美日韩精品一区视频,最新亚洲国产,国产乱码精品一区二区亚洲

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

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

瀏覽:43日期: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
相關文章:
主站蜘蛛池模板: 石嘴山市| 绥棱县| 江达县| 义乌市| 吉林省| 新竹县| 江孜县| 锦州市| 南乐县| 湖口县| 会泽县| 辽宁省| 偃师市| 高安市| 石泉县| 常德市| 南澳县| 黔西县| 吴忠市| 酒泉市| 元谋县| 五峰| 曲水县| 巩义市| 东丰县| 安图县| 湾仔区| 葵青区| 都江堰市| 长沙市| 呼图壁县| 轮台县| 新田县| 平罗县| 黔东| 东乌| 来安县| 城市| 阳信县| 石首市| 竹溪县|