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

<script>
import * as echarts from 'echarts'
export default {
  name: 'ComOneBatteryChart', //单值电池图
  props: {
    chartData: {}
  },
  data() {
    return { myChart: null }
  },
  watch: {
    chartData(val) {
      this.$nextTick(() => {
        this.initialChart()
      })
    }
  },
  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() {
      let num = this.chartData.num
      let numUnit = this.chartData.numUnit
      let total = this.chartData.total
      let totalUnit = this.chartData.totalUnit
      let option = {
        backgroundColor: 'transparent',
        title: {
          show: true,
          text: `总投资：${total}${totalUnit ? totalUnit : ''}`,
          textStyle: {
            fontSize: this.$listeners.fontSize(14),
            color: '#2BA7FF'
          },
          left: 'center',
          bottom: '-6%'
        },
        grid: {
          // left: '5%',
          // right: '5%',
          bottom: 'center',
          containLabel: true
        },
        xAxis: [
          {
            type: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            //type: 'category',
            data: [''],
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              color: '#fff'
            }
          }
        ],
        series: [
          {
            silent: true,
            name: '完成产值',
            type: 'bar',
            barWidth: 8,
            label: {
              show: true,
              lineHeight: 7,
              width: 80,
              height: 30,
              position: ['50%', '-32px'],
              distance: 1,
              formatter: [
                `{a|完成产值：}{c|${num}${numUnit ? numUnit : ''}（${((num / total) * 100).toFixed(2) + '%'}）}\n\n`,
                '{d|●}\n',
                '{b|}'
              ].join(''),
              rich: {
                a: {
                  color: '#fff',
                  align: 'center'
                },
                b: {
                  width: 1,
                  height: 10,
                  borderWidth: 1,
                  borderColor: 'rgba(239, 213, 84, 1)',
                  align: 'center'
                },
                c: {
                  fontWeight: 'bold',
                  color: '#fff'
                },
                d: {
                  color: 'rgba(239, 213, 84, 1)',
                  align: 'center'
                }
              }
            },
            itemStyle: {
              color: {
                type: 'bar',
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(221, 200, 94, 1)' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(3, 211, 224, 1)' // 100% 处的颜色
                  }
                ],
                globalCoord: false // 缺省为 false
              }
            },
            z: 1,
            data: [num]
          },
          {
            // 分隔
            type: 'pictorialBar',
            itemStyle: {
              color: '#07314a'
            },
            z: 2,
            symbolRepeat: 'fixed',
            symbolMargin: 2,
            symbol: 'rect',
            symbolClip: true,
            symbolSize: [2, 12],
            symbolPosition: 'start',
            symbolOffset: [0, -1],
            // symbolBoundingData: 100,
            data: [total],
            animationEasing: 'elasticOut'
          },
          {
            type: 'bar',
            barGap: '-150%',
            data: [total],
            barWidth: 16,
            itemStyle: {
              color: 'transparent', // 填充色
              borderColor: 'rgba(43, 167, 255, 0.26)', // 边框色
              borderWidth: 3 // 边框宽度
            },
            z: 0
          }
        ]
      }
      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>