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>