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

<script>
export default {
  props: {
    titletext: { // 标题名称
      type: String,
      default: ''
    },
    seriesType: {
      type: String,
      default: 'bar'
    },
    seriesName: {
      type: String,
      default: '--'
    },
    xAxisData: { // 数据
      type: Array,
      default() {
        return []
      }
    },
    seriesData: { // 数据
      type: Array,
      default() {
        return []
      }
    },

    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      myChart: []
    }
  },
  watch: {
    seriesData: function() {
      this.initializationData()
    }
  },
  mounted() {
    this.initializationData()
  },
  methods: {
    initializationData() {
      var myChart = this.$echarts.init(this.$refs.histogramChart)
      myChart.clear()
      this.myChart = myChart
      //   if (this.optiondata.length > 0) {

      //   }
      this.myEcharts()
    },
    myEcharts() {
      // 基于准备好的dom，初始化echarts实例
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: this.titletext
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '10%',
          left: '3%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.xAxisData,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: this.seriesName,
            type: this.seriesType,
            // barWidth: '50%',
            data: this.seriesData
          }
        ],
        color: ['#3e72c5', '#17a2b8', '#20c997', '#00c0ef', '#0066FF', '#5599FF', '#33CCFF', '#9F88FF', '#99BBFF', '#00BBFF']
        // color: ['#3e72c5', '#009688', '#dc3545']
      }

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

<style>
</style>
