<template>
  <div :id="`echarts_${uuid}`" :style="styles"></div>
</template>
<script>
// 引入 ECharts 主模块
let echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');


export default {
  name: 'Echarts',
  props: {
    height: {
      type: String,
      default: '0px'
    },
    width: {
      type: String,
      default: '0px'
    },
    options: {
      type: Object
    }
  },
  data() {
    return {
      uuid: Math.random().toString(36).substring(3, 8)
    }
  },
  mounted() {
    this.initEcharts()
  },
  computed: {
    styles() {
      return `width:${this.width};height:${this.height}`;
    }
  },
  watch: {
    options(val) {
      // 绘制图表
      this.initEcharts()
    }
  },
  methods: {
    initEcharts() {
      // 基于准备好的dom，初始化echarts实例
      let echartsObj = echarts.init(document.getElementById("echarts_"+this.uuid))
      echartsObj.setOption(this.options)
      this.$emit('on-init-completed',echartsObj)
    }
  }
}
</script>
