<template>
  <!--作为echarts表的盒子-->
  <div class="echarts-box" ref="echarts"></div>
</template>

<script>
import * as echarts from 'echarts'
/**
 * echarts的总封装，可用于所有基本图表
 */
export default {
  name: "echartsContainer",
  props:{
    //echarts的配置
    options:{
      required:true,
      type:Object
    }
  },
  data(){
    return {
      echartsObj: null
    }
  },
  watch:{
    //监听配置对象每次变化，重置echarts
    options:{
      handler(){
        this.createEcharts();
      },
      deep:true
    }
  },
  methods:{
    //创建echarts表
    createEcharts(){
      if(!this.echartsObj){
        this.echartsObj = echarts.init(this.$refs.echarts);
      }
      this.echartsObj.setOption(this.options, true);
      this.echartsObj.resize();
    }
  },
  mounted(){
    //初始化时，操作
    this.createEcharts();
  }
}
</script>

<style scoped>
.echarts-box{
  width: 100%;
  height: 100%;
}
</style>
