<template>
  <div :id="elId" class="container"></div>
</template>

<script>
  import echarts from 'echarts'
  import uuidv4 from 'uuid/v4'
  import PropTypes from '../../_util/vue-types'
  export default {
    name: "TaEcharts",
    props: {
      option: PropTypes.object,
    },
    data(){
      return {
        myChart: undefined,
        elId: '',
      }
    },
    created() {
      this.elId = uuidv4() //获取随机id
    },
    mounted() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(document.getElementById(this.elId));
      // 绘制图表
      this.myChart.setOption(this.option);
    },
    methods:{
      /**
       * 更新echarts的option
       * @param option
       */
      updateOptions(option = {}){
        this.myChart.setOption(option)
      },
    },
  }
</script>
<style>
    .container{
        width: 300px;
        height: 200px;
    }
</style>
