vue 数据更新后，echarts图表不更新

vue 数据更新后，echarts图表不更新

用watch监听传递的数据，重新调用渲染图表,echarts中setOption这个方法有三个属性，有的情况下也需要修改

 watch: {
    datas: {
      handler: function () {
        console.log(1);
        this.$nextTick(function () {
          this.drawCharts(this.datas, this.text);
        });
      },
      deep: true,
    },
  },

<!-- 封装环形图组件 -->
<template>
  <div>
    <div class="charts" :id="id"></div>
  </div>
</template>

<script>
import echarts from "echarts";

export default {
  props: ["id", "datas", "text"],
  data() {
    return {
      myChart: null,
    };
  },
    
  watch: {
    datas: {
      handler: function () {
        console.log(1);
        this.$nextTick(function () {
          this.drawCharts(this.datas, this.text);
        });
      },
      deep: true,
    },
  },

  mounted() {
    this.$nextTick(function () {
      this.drawCharts(this.datas, this.text);
    });
  },

  methods: {
    drawCharts(a, b) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById(this.id));

      var option = {
        tooltip: {
          trigger: "item",
        },
        graphic: [
          {
            // 环形图中间添加文字
            type: "text", // 通过不同top值可以设置上下显示
            left: "center",
            top: "35%",
            style: {
              text: b,
              textAlign: "center",
              fill: "#fff", // 文字的颜色
              fontSize: 24,
              fontFamily: "Microsoft YaHei",
            },
          },
        ],
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["60%", "80%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              formatter: "{d}%",
            },
            labelLine: {
              show: false,
            },
            itemStyle: {
              borderRadius: 10,
              borderColor: "raba(0,0,0,0)",
              borderWidth: 1,
            },
            // 提示框组件,鼠标移动上去显示的提示内容
            tooltip: {
              trigger: "item",
              formatter: "{b}:{c}%", // 模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。
            },
            data: a,
          },
        ],
      };
      myChart.setOption(option, true);
    },
  },
};
</script>

<style lang="less" scoped>
.charts {
  width: 400px;
  height: 250px;
}
</style>