<template>
  <div class="chart" id="charts_canvas" ref="chartRef"></div>
</template>

<script>
import * as echarts from "echarts";
// import "echarts-wordcloud";
export default {
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      chartObj: null,
      chartData: null
    };
  },
  watch: {
    data() {
      this.getChartData();
    }
  },
  methods: {
    getChartData() {
      if (this.chartObj === null) {
        this.chartObj = echarts.init(this.$refs.chartRef);
      }
      this.chartObj.setOption(this.data);
      window.addEventListener("resize", () => {
        this.chartObj.resize();
      });
    }
  },
  mounted() {
    this.getChartData();
  }
};
</script>

<style scoped>
.chart {
  max-width: 100%;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
</style>
