EchartBar.vue

EchartBar.vue

<template>
  <div class="ui-echart ui-echart-bar" ref="chart"></div>
</template>
<script>
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/title'
import 'echarts/lib/component/tooltip'
export default {
  props: {
    option: {
      required: true
    },
    loading: Boolean
  },
  data () {
    return {
      echart: null
    }
  },
  watch: {
    option: {
      deep: true,
      handler (val) {
        if (val) {
          // draw chart
          this.echart.setOption(val)
        }
      }
    },
    loading (val) {
      if (val) {
        this.echart.clear()
        // this.echart && this.echart.showLoading()
      } else {
        // this.echart && this.echart.hideLoading()
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      // init echart instance
      this.echart = echarts.init(this.$refs.chart)
      this.echart.setOption(this.option)
    })
  }
}
</script>