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

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

第二步：
我是通過父子元件傳值把資料接收過來，在data中定義upPressure引數，並將接收來的devicePressure引數賦值給它，便於後面將值傳入到echarts中

父元件中
 <div class="chart" 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,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儀表盤 內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！