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

<script>
import * as echarts from 'echarts'
export default {
  name: 'ComBarChart', //项目统计柱状图
  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.myChart.resize()
      }
    },
    initialChart() {
      this.destroyChart()
      let province = this.chartData.province
      let projectName = this.chartData.projectName
      let investment = this.chartData.investment
      let lineY = []
      for (var i = 0; i < this.chartData.projectName.length; i++) {
        var x = i
        if (x > 1) {
          x = 2
        }
        var data = {
          province: province[i],
          name: projectName[i],
          value: investment[i],
          itemStyle: {
            show: true,
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              1,
              0,
              [
                {
                  offset: 0,
                  color: 'rgba(181, 60, 231, 1)'
                },
                {
                  offset: 1,
                  color: 'rgba(17, 156, 255, 1)'
                }
              ],
              false
            ),
            borderRadius: 7
          },
          emphasis: {
            shadowBlur: 15,
            shadowColor: 'rgba(0, 0, 0, 0.1)'
          }
        }
        lineY.unshift(data)
      }
      let option = {
        backgroundColor: 'transparent',
        tooltip: {
          confine: true,
          trigger: 'item',
          textStyle: {
            color: '#fff'
          },
          borderWidth: 0,
          backgroundColor: 'rgba(50,50,50,0.7)'
          // formatter: (p) => {
          //   if (p.seriesName === 'total') {
          //     return ''
          //   }
          //   return `${p.name}<br/>${p.value}`
          // }
        },
        grid: {
          borderWidth: 0,
          top: '1%',
          left: '5%',
          right: '20%',
          bottom: '3%'
        },
        yAxis: [
          {
            type: 'category',
            inverse: true,
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: false,
              inside: false
            },
            data: projectName
          },
          {
            type: 'category',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              inside: false,
              verticalAlign: 'middle',
              color: '#FFFFFF',
              fontSize: this.$listeners.fontSize(14),
              formatter: function (val) {
                return `${val + '亿'}`
              }
            },
            splitArea: {
              show: false
            },
            splitLine: {
              show: false
            },
            data: investment
          }
        ],
        xAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        series: [
          {
            // name: 'bar',
            type: 'bar',
            zlevel: 2,
            barWidth: '10px',
            data: lineY,
            label: {
              show: true,
              position: [0, '-24px'],
              formatter: function (a) {
                let region = a.data.province
                let str = ''
                if (a.dataIndex === 0) {
                  str = `{color0|${region}} {b|${a.name}}`
                } else if (a.dataIndex === 1) {
                  str = `{color1|${region}} {b|${a.name}}`
                } else if (a.dataIndex === 2) {
                  str = `{color2|${region}} {b|${a.name}}`
                } else {
                  str = `{color|${region}} {b|${a.name}}`
                }
                return str
              },
              rich: {
                b: {
                  color: 'rgba(130, 186, 226, 1)',
                  fontSize: this.$listeners.fontSize(14)
                },
                color0: {
                  width: 32,
                  height: 18,
                  color: '#fff',
                  align: 'center',
                  fontWeight: 'bold',
                  fontSize: this.$listeners.fontSize(12),
                  backgroundColor: 'rgba(29, 130, 203, 1)'
                },
                color1: {
                  width: 32,
                  height: 18,
                  color: '#fff',
                  align: 'center',
                  fontWeight: 'bold',
                  fontSize: this.$listeners.fontSize(12),
                  backgroundColor: 'rgba(4, 181, 206, 1)'
                },
                color2: {
                  width: 32,
                  height: 18,
                  color: '#fff',
                  align: 'center',
                  fontWeight: 'bold',
                  fontSize: this.$listeners.fontSize(12),
                  backgroundColor: 'rgba(198, 164, 30, 1)'
                },
                color: {
                  width: 32,
                  height: 18,
                  color: '#fff',
                  align: 'center',
                  fontWeight: 'bold',
                  fontSize: this.$listeners.fontSize(12),
                  backgroundColor: 'rgba(6, 174, 97, 1)'
                }
              }
            }
          }
        ]
      }
      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 {
  width: 100%;
}
</style>