<template>
  <div id="leoChart" class="leo-chart" :style="`height: ${divHeight}`">

  </div>
</template>

<script>
// 引入基本模板
const ECHARTS = require('./../../node_modules/echarts/lib/echarts')
// 引入柱状图
require('./../../node_modules/echarts/lib/chart/bar')
require('./../../node_modules/echarts/lib/chart/line')
// 引入提示框和标题组件
require('./../../node_modules/echarts/lib/component/tooltip')
require('./../../node_modules/echarts/lib/component/title')

export default {
  name: 'leo-chart',
  mounted () {
    this.initLine()
    this.drawLine()
  },
  props: {
    id: {
      type: String,
      default: 'leoChart'
    },
    divHeight: {
      type: String,
      default: '500px'
    },
    chartData: {
      type: Object,
      default () {
        return {}
      },
    },
  },
  watch: {
    chartData () {
      this.drawLine()
    }
  },
  data () {
    return {
      leoChart: null,
    }
  },
  methods: {
    initLine () {
      if (this.leoChart === null) {
        this.leoChart = ECHARTS.init(document.getElementById(this.id))
      }
    },
    drawLine () {
      this.leoChart.setOption(this.chartData)
    }
  }
}
</script>

<style scoped>
</style>