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

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

  export default {
    name: "vps-charts",
    components: {
      loading
    },
    props: {
      type: {
        default: 'defaultChart',
        type: String
      },
      query: {
        default: function () {
          return {}
        },
        type: Object
      }
    },
    methods: {
      init () {
        this.$refs.loadingData.isShow = true
        const num = (Math.random() * 1000).toFixed(0)
        setTimeout(() => {
          this.$refs.loadingData.isShow = false
        }, num)
        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: 100%;
        width: 100%;
    }
    .loadingBox{
        position:absolute;
        top:0;
        left:0;
    }
</style>