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

<script>
import * as echarts from 'echarts'
export default {
  name: 'batteryChart', //电池图
  props: {
    chartData: {}
  },
  data() {
    return { myChart: null }
  },
  watch: {
    chartData(val) {
      this.$nextTick(() => {
        this.initialChart()
      })
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initialChart()
    })
    //图表大小自适应
    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()
      const { spending, income, profits } = this.chartData
      let IAS = [spending, income]
      let option = {
        backgroundColor: 'transparent',
        title: {
          // show: true,
          show: false,
          text: `累计利润：${profits}亿`,
          textStyle: {
            fontSize: this.$listeners.fontSize(14),
            color: '#01D8E2'
          },
          right: '10%',
          bottom: '10%'
        },
        grid: {
          top: '15%',
          left: '5%',
          right: '10%',
          bottom: '15%'
        },
        xAxis: [{ show: false }, { show: false }],
        yAxis: [
          {
            // data: ['累计支出', '累计收入'],
            data: ['累计对上结算', '累计对下结算'],
            inverse: true,
            show: false
          }
        ],
        series: [
          {
            type: 'bar',
            barWidth: 16,
            label: {
              show: true,
              position: 'right',
              distance: 10,
              formatter: function (params) {
                return `{a|${params.value}亿}`
              },
              rich: {
                a: {
                  color: '#fff',
                  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
              }
            },
            data: IAS,
            z: 1
          },
          {
            // 分隔
            type: 'pictorialBar',
            itemStyle: {
              color: '#0F375F'
            },
            symbolRepeat: 'fixed',
            symbolMargin: 2,
            symbol: 'rect',
            symbolClip: true,
            symbolSize: [2, 16],
            symbolPosition: 'start',
            symbolOffset: [2, 0],
            data: IAS,
            width: 2,
            z: 2
          },
          {
            show: true,
            type: 'bar',
            xAxisIndex: 1,
            barGap: '-100%',
            barWidth: 16,
            z: 0,
            label: {
              show: true,
              position: [0, '-150%'],
              formatter: '{b}',
              fontWeight: 400,
              fontSize: this.$listeners.fontSize(14),
              color: '#fff'
            },
            data: IAS
          }
        ]
      }
      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>