<template>
  <div ref="chart" style="height:100%"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  name: 'BaseChart',
  props: {
    option: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      chart: null,
      data: [5, 20, 36, 10, 10, 20, 5, 20, 36, 10, 20, 36, 10, 10, 20, 5, 20, 36, 10]
    }
  },
  watch: {
    option: {
      handler(newValue, oldValue) {
        this.chart.setOption(newValue)
      },
      // 因为option是个对象，而我们对于echarts的配置项，要更改的数据往往不在一级属性里面
      // 所以这里设置了deep:true，vue文档有说明
      deep: true
    }
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chart,null,{width:this.option.width,height:this.option.height})
    this.chart.setOption(this.option)    
   
  },
  methods: {
    
  }
}
</script>
