<script>
import Vue from 'vue'
import theme from '@static/lib/echarts_theme_macarons.json'

window.VueECharts.registerTheme('macarons', theme)
Vue.component('chart', window.VueECharts)

export default {
  props: {
    options: {
      type: Object,
      required: true
    },
    theme: {
      type: String,
      required: false,
      default: 'macarons'
    },
    width: {
      type: String,
      required: false,
      default: '100%'
    },
    height: {
      type: String,
      required: false,
      default: '100%'
    },
    autoresize: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data() {
    return {

    }
  },
  computed: {
    styleObj() {
      return {
        width: this.width,
        height: this.height
      }
    }
  },
  async mounted () {
    this.init()
  },
  methods: {
    async initEcharts() {
      let chartItem = this.$refs['chart']
      if (this.autoresize) {
        window.addEventListener('resize', function () {
          chartItem.resize()
        })
      }
    },
    async init() {
      await this.initEcharts()
    }
  }
}

</script>
<template>
  <div class="vue-echarts">
    <chart :options="options" ref="chart" :theme="theme" :style="styleObj"></chart>
  </div>
</template>

<style>
</style>
