<template>
  <div>
    <div ref="complexChart" style="padding: 0px;" :style="{ width: width, height: height }" />
  </div>
</template>

<script>
export default {
  props: {
    titletext: { // 标题名称
      type: String,
      default: ''
    },
    optiondata: { // 数据
      type: Array,
      default: null
    },
    xaxisdata: { // xAxis数据
      type: Array,
      default: null
    },
    isdynamic: { // 判断是否刷新-刷新依据
      type: String,
      default: '0'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      myChart: []
    }
  },
  watch: {
    optiondata: function() {
      this.initializationData()
    },
    isdynamic: function() {
      if (this.isdynamic !== '0') {
        if (this.optiondata !== null) {
          this.initializationData()
        }
      }
    }
  },
  mounted() {
    this.initializationData()
  },
  methods: {
    initializationData() {
      var myChart = this.$echarts.init(this.$refs.complexChart)
      myChart.clear()
      this.myChart = myChart
      if (this.optiondata.length > 0) {
        this.myEcharts()
      }
    },
    myEcharts() {
      // 基于准备好的dom，初始化echarts实例
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: this.titletext
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.xaxisdata
        },
        grid: {
          top: '20%',
          left: '3%',
          right: '5%',
          bottom: '5%',
          containLabel: true
        },
        yAxis: {
          type: 'value'
        },
        series: this.optiondata,
        color: ['#3e72c5', '#009688', '#dc3545']
      }

      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option)
    }
  }
}
</script>

<style>
</style>
