<template>
  <div id="reportCharts_id" style="width: 100%;height:280px;">
  </div>
</template>
<script>

export default {
  name: "reportCharts",
  components: {

  },
  props: {
    title: {
      type: String,
      default () {
        return ''
      }
    },
    subtitle: {
      type: String,
      default () {
        return ''
      }
    },
    value: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      myChart: null,
      data: [],
      count: [],
    }
  },
  created () {
    if (!!this.value) {
      this.value.forEach(p => {
        this.data.push(p.name)
        this.count.push(p.value)
      })
    }
  },
  mounted () {
    this.$nextTick(() => {
      var timer = setTimeout(() => {
        this.drawChart();
        clearInterval(timer);
      }, 0)
    })
  },
  methods: {
    drawChart () {
      this.myChart = this.$echarts.init(document.getElementById("reportCharts_id"))
      window.addEventListener('resize', () => { this.myChart.resize() })
      let option = {
        color: ['#61a0a8'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.data,
            // -----------------------------------------------------横坐标倾斜显示
            axisLabel: {
              interval: 0,
              rotate: 20  //倾斜的程度
            },
            // -----------------------------------------------------横坐标倾斜显示
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            axisTick: {
              show: false
            },
            axisLine: {
              show: false, //不显示坐标轴线
            },
            // minInterval: 10
          }
        ],
        title: {
          text: this.title,
          subtext: this.subtitle,
          x: 'center',
          y: 'top',
          textAlign: 'center'
        },
        series: [
          {
            name: '项目数',
            type: 'bar',
            barWidth: '60%',
            data: this.count,

            label: {
              show: true,
              position: 'top',
              color: '#333',
              fontSize: '12px',
              formatter: '{c}'
            }
          }
        ]
      };
      this.myChart.setOption(option, true)
      this.myChart.resize();
    },
  },
  beforeDestroy () {
    window.removeEventListener("resize", () => { this.myChart.resize(); })
  },
  watch: {
    value: {
      handler (value) {
        if (value && value.length > 0) {
          this.data = []
          this.count = []
          value.forEach(p => {
            this.data.push(p.name)
            this.count.push(p.value)
          })
          this.drawChart()
        }
      },
    },
  }
}
</script>
<style lang="less" scoped>
</style>