<template>
  <div class="echarts">
    <div
      ref="chartpie"
      :style="'width:'+width+';height:'+height"
    ></div>
  </div>
</template>

<script>
export default {
  name: "echarts",
  components: {},
  props: {
    options: Object,
    height: String,
    width: String,
  },
  data() {
    return {
      myChart: "",
    };
  },
  methods: {
    getEchart() {
      const chart = this.$refs.chartpie;
      if (chart) {
        let myChart = this.$echarts.init(chart);
        this.myChart = myChart;
        console.log("aaaa", myChart);
        //const myChart = echarts.init(chart, null, { renderer: "svg" });
        const option = this.options;
        myChart.setOption(option, true);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      }
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
    resize() {
      this.myChart.resize();
    },
    rerender() {
      this.myChart.setOption(this.options, true);
    },
  },
  created() {},
  mounted() {
    // console.log("子组件接受到的", this.options);
    this.getEchart();
  },
  watch: {
    options(newval, oldval) {
      this.myChart.setOption(newval, true);
    },
  },
};
</script>

<style lang="less" scoped>
.echarts {
  width: 100%;
}
</style>