<template>
    <div class="chart-box" ref="chartBox"></div>
</template>

<script>
  import echarts from 'echarts'
  import configObj from '../config'

  export default {
    name: "vps-charts",
    props: {
      type: {
        default: 'defaultChart',
        type: String
      },
      query: {
        default: function () {
          return {}
        },
        type: Object
      }
    },
    methods: {
      init () {
        const chartBox = this.$refs.chartBox
        const myChart = echarts.init(chartBox);
        // 指定图表的配置项和数据
        const option = configObj[this.type] || configObj.defaultChart;
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
        window.addEventListener('resize', () => {
          myChart.resize()
        })
      }
    },
    mounted () {
      // 基于准备好的dom，初始化echarts实例
      this.$nextTick(() => {
        this.init()
      })
    }
  }
</script>

<style scoped>
    .chart-box {
        height: 400px;
        width: 100%;
    }
</style>