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

<script>
import * as echarts from 'echarts'
export default {
  name: 'ComProgressChart', //进度图
  props: {
    chartData: {}
  },
  watch: {
    chartData(val) {
      this.$nextTick(() => {
        this.initialChart()
      })
    }
  },
  data() {
    return {
      symbol: 0,
      myChart: null
    }
  },
  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() {
      if (!this.$refs.chart) return
      let that = this
      that.symbol = 0
      let titleData = []
      let yAxisData = []
      let finishData = []
      let totalData = []
      this.chartData.forEach((item) => {
        titleData.push(item.name)
        yAxisData.push(item.percent)
        finishData.push(item.finishAmout)
        totalData.push(item.totalAmout)
      })
      let option = {
        backgroundColor: 'transparent',
        grid: {
          top: '10%',
          left: '-20%',
          right: '0%',
          bottom: '-20%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          },
          borderWidth: 0,
          textStyle: {
            color: '#fff'
          },
          backgroundColor: 'rgba(50,50,50,0.7)',
          formatter: function (params) {
            return (
              params[0].name +
              '<br/>' +
              "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
              params[0].seriesName +
              ' : ' +
              params[0].data +
              '亿' +
              '<br/>'
            )
          }
        },
        xAxis: {
          show: false,
          type: 'value'
        },
        yAxis: [
          {
            type: 'category',
            inverse: true,
            show: false,
            data: titleData
          },
          {
            type: 'category',
            inverse: true,
            axisTick: 'none',
            axisLine: 'none',
            show: false,
            axisLabel: {
              color: '#ffffff',
              fontSize: '12',
              formatter: function (value) {
                let str
                // str = `{a|${finishData[that.symbol]}/${totalData[that.symbol]}亿}  {b|${value}}`
                str = `{b|${value}}`
                if (that.symbol < finishData.length - 1) that.symbol++
                else that.symbol = 0
                return str
              },
              rich: {
                a: {
                  color: '#FFFFFF',
                  fontWeight: 500,
                  fontFamily: 'Source Han Sans CN'
                },
                b: {
                  color: '#259AFF',
                  fontWeight: 'bold',
                  fontFamily: 'Source Han Sans CN-HEAVY'
                }
              }
            },
            data: yAxisData
          }
        ],
        series: [
          {
            name: '完成金额',
            type: 'bar',
            zlevel: 1,
            label: {
              show: true,
              position: [0, '-20'],
              fontSize: this.$listeners.fontSize(14),
              color: '#FFFFFF',
              formatter: function (params) {
                return params.name
              }
            },
            itemStyle: {
              borderRadius: 30,
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: 'rgba(13, 128, 241, 1)'
                },
                {
                  offset: 1,
                  color: 'rgba(2, 179, 195, 1)'
                }
              ])
            },
            barWidth: 8,
            data: finishData
          },
          {
            name: '背景',
            type: 'bar',
            barWidth: 14,
            barGap: '-130%',
            data: totalData,
            label: {
              show: true,
              position: 'right',
              fontSize: this.$listeners.fontSize(12),
              color: '#259AFF',
              fontWeight: 'bold',
              fontFamily: 'Source Han Sans CN-HEAVY',
              formatter: function (params) {
                return yAxisData[params.dataIndex]
              }
            },
            itemStyle: {
              color: 'rgba(6, 24, 44, 0.5)',
              borderRadius: 7,
              borderWidth: 2,
              borderColor: 'rgba(43, 167, 255, 0.26)',
              shadowColor: 'rgba(0, 0, 0, 0.5)',
              shadowBlur: 10
            }
          }
        ]
      }
      this.creatChart(option, this.$refs.chart)
    },
    creatChart(option, ref) {
      this.myChart = echarts.init(ref) //this.$refs.chart
      this.myChart.resize()
      this.myChart.setOption(option, {
        notMerge: true
      })
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.onResize)
    this.destroyChart()
  }
}
</script>

<style lang='scss' scoped>
.chart {
  height: 100%;
  width: 100%;
}
</style>