<template>
  <div class="chart" ref="chart"></div>
</template>

<script>
import * as echarts from 'echarts'
import { fontSize } from '../../util'
export default {
  name: 'ComRankingBarChart', //项目统计柱状图
  props: {
    chartData: {}
  },
  data() {
    return { myChart: null }
  },
  watch: {
    chartData: {
      handler() {
        this.$nextTick(() => {
          this.initialChart()
        })
      },
      deep: true
      // immediate: true
    }
  },
  mounted() {
    //图表大小自适应
    window.addEventListener('resize', this.onResize)
  },
  methods: {
    destroyChart() {
      if (this.myChart != null) {
        this.myChart.dispose()
        this.myChart = null
      }
    },
    onResize() {
      if (this.myChart) {
        this.initialChart()
      }
    },
    getBarColor(index) {
      const colors = [
        { index: 0, color0: '#D72627', color1: '#FF6162' },
        { index: 1, color0: '#D6791F', color1: '#FFA44B' },
        { index: 2, color0: '#ECC438', color1: '#F5D975' }
      ]
      return colors.find((i) => i.index == index) || { index: 3, color0: '#0A89FF', color1: '#05CFE1' }
    },
    initialChart() {
      this.destroyChart()
      let seriesData = [],
        yData = [],
        dataArr = this.chartData;
      let totalNum=0;
      dataArr.forEach(item=>{
        totalNum+=item.num;
      })
      // dataArr.sort((a, b) => b - a)
      dataArr.forEach((item, index) => {
        yData.unshift(item.type)
        seriesData.unshift({
          value: item.num,
          tempRatio:(item.num/totalNum).toFixed(2),
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                { offset: 0, color: this.getBarColor(index).color0 },
                { offset: 1, color: this.getBarColor(index).color1 }
              ],
              global: false
            }
          }
        })
      })
      let option = {
        tooltip: {
          show: true,
          confine: true,
          borderWidth: 0,
          textStyle: {
            color: '#fff'
          },
          backgroundColor: 'rgba(50,50,50,0.7)',
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              type: 'solid',
              color: 'rgba(255, 255, 255, 0.3)'
            }
          }
        },
        grid: {
          top: '5%',
          left: '5%',
          right: '8%',
          bottom: '-5%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          show: false
        },
        yAxis: {
          type: 'category',
          axisTick: { show: false },
          axisLine: { show: false },
          axisLabel: {
            color: '#A4D9F9',
            width: fontSize(100),
            overflow: 'truncate'
          },
          data: yData
        },
        series: [
          {
            name: '2011',
            type: 'bar',
            barWidth: 8,
            label: {
              show: true,
              position: 'right',
              fontSize: fontSize(14),
              fontFamily: 'Source Han Sans CN',
              fontWeight: 500,
              color: '#FEFFFF',
              formatter:(e,a)=>{
                let tempStr=(e.data.value +"  "+(e.data.tempRatio*100)+"%");
                return tempStr
              } 
            },
            itemStyle: {
              borderRadius: [0, 5, 5, 0]
            },
            data: seriesData
          }
        ]
      }
      this.creatChart(option, this.$refs.chart)
    },
    creatChart(option, ref) {
      try {
        this.myChart = echarts.init(ref) //this.$refs.chart
        this.myChart.setOption(option, { notMerge: true })
        var autoHeight = option.yAxis[1].data.length * 50 + 100
        this.myChart.getDom().style.height = autoHeight + 'px'
        this.myChart.getDom().childNodes[0].style.height = autoHeight + 'px'
        this.myChart.getDom().childNodes[0].childNodes[0].setAttribute('height', autoHeight)
        this.myChart.getDom().childNodes[0].childNodes[0].style.height = autoHeight + 'px'
        this.myChart.resize()
      } catch {}
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.onResize)
    this.destroyChart()
  }
}
</script>
<style lang="scss" scoped>
.chart {
  height: 100%;
  width: 100%;
}
</style>