快捷導(dǎo)航

Vue中使用Echarts儀表盤展示實(shí)時(shí)數(shù)據(jù)的實(shí)現(xiàn)

更新時(shí)間：2020年11月01日 16:30:51 作者：Why？orange

這篇文章主要介紹了Vue中使用Echarts儀表盤展示實(shí)時(shí)數(shù)據(jù)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

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

第一步：
基于準(zhǔn)備好的dom，初始化echarts儀表盤實(shí)例。

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

父組件中
 <div class="chart" shadow="always">
  <objEcharts :devicePressure="pressure"></objEcharts>
 </div>

子組件中
export default {
 props: {
  devicePressure: { type: String, require: true },
 },
 data() {
  return {
   upPressure: this.devicePressure,
  };
 },

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

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

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

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() {
   // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
   let visualOneChart = this.$echarts.init(document.getElementById("visualOneChart"));
   // 繪制圖表
   visualOneChart.setOption({
    tooltip: {
     formatter: "{a} <br/> : {c}Pa",
    },
    series: [
     {
      name: "壓力值",
      type: "gauge",
      clockwise: true,
      detail: {
       formatter: this.upPressure,
       textStyle: {
        fontSize: 14,
       },
      },
      data: [{ value: this.upPressure, name: "壓力值" }],
      radius: "90%",
      axisLabel: {// 刻度標(biāo)簽。
       show: true,
       distance: -5,
       color: "black", 
       fontSize: 10, 
       formatter: "{value}", 
      },
      axisLine: {// 儀表盤軸線(輪廓線)相關(guān)配置。
       show: true, 
       lineStyle: {// 儀表盤軸線樣式。
        opacity: 1, 
        width: 15, 
        shadowBlur: 10, 
       },
      },
      pointer: { // 儀表盤指針。
       show: true,
       length: "70%", 
       width: 4, 
      },
     },
    ],
   });
  },
 },
}

在這里插入圖片描述

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

您可能感興趣的文章: