<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,
    // bage: String,
  },
  data() {
    return {};
  },
  methods: {
    getEchart() {
      const chart = this.$refs.chartpie;
      if (chart) {
        const myChart = this.$echarts.init(chart);

        //const myChart = echarts.init(chart, null, { renderer: "svg" });
        const option = this.options;
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      }
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
  },
  created() {},
  mounted() {
    this.getEchart();
  },
};
</script>

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