vue+echarts:根據改變的數據實時刷新同步圖表(強制刷新組件)

需求：配置圖標項，根據配置實時展示更改的數據-實時刷新圖表。

因為圖表是被封裝到組件中，所以用到了實時刷新組件的方法：

實時刷新組件有三個常用方法：

1：利用v-if 這個不優雅，不推薦使用：

<template>
   <third-comp v-if="reFresh"/>
</template>
 
<script>
   export default{
       data(){
          return {
                reFresh:true,
                menuTree:[]
            }
       },
       watch:{
             menuTree(){
 
                  this.reFresh= false
                  this.$nextTick(()=>{
                    
                    this.reFresh = true
                })
            }
       }
}
</script>

2：利用 vue提供的force update:這個是vue提供的，使用起來簡單，需要配置下

import Vue from 'vue'
Vue.forceUpdate()

export default {
  methods: {
    handleUpdateClick() {
      // built-in
      this.$forceUpdate()
    }
  }
}

 

3:利用vue 組件的key

推薦使用這個，當組件key值改變 vue組件會自動重新刷新

<template>
  <div class="pieSetting">
    <el-row>
      <el-col :span="24">
        <el-card style="width: 500px; height: 360px; margin: 8px">
          <pie
            id-pie="idpie1"
            :width="width"
            :height="height"
            :titleArr="titleArr"
            :dataArr="dataArr"
            :pieTileName="form.titleName"
            :key="menuKey"
          ></pie>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-card>
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="標題">
              <el-input v-model="form.titleName"></el-input>
            </el-form-item>
          </el-form>
        </el-card>
        <el-card>
          {{ this.form.titleName }}
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import pie from "../charts/Pie/pie1.vue";
export default {
  name: "PieSetting",
  components: {
    pie,
  },
  data() {
    return {
      menuKey: 1,
      form: {
        titleName: "",
      },
      width: "500px",
      height: "360px",
      titleArr: ["1", "13", "21", "3"],
      dataArr: [11, 22, 11, 33, 44, 22, 33],
    };
  },
    // 重點這里，監聽form表單數據，這里注意要深層檢測。當form值改變，都會重新刷新組件
  watch: { 
    form: {
      handler(val, oldVal) {
        console.log(val, oldVal);
        this.menuKey += 1;
      },
      deep: true,
    },
  },
  methods: {},
};
</script>
<style scoped>
</style>