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

<script>
import * as echarts from 'echarts'
export default {
  name: 'batteryChart', //电池图
  mounted() {
    this.$nextTick(() => {
      this.initialChart()
    })
  },
  methods: {
    initialChart() {
      let option = {
        backgroundColor: 'transparent',
        title: {
          show: true,
          text: '累计利润：1.09亿',
          textStyle: {
            fontSize: this.$listeners.fontSize(14),
            color: '#FFFFFF'
          },
          left: 'center',
          top: '65%'
        },
        grid: {
          left: '5%',
          right: '5%'
        },
        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: {
              textStyle: {
                color: '#fff'
              }
            }
          }
        ],
        series: [
          {
            silent: true,
            name: '累计支出',
            type: 'bar',
            barWidth: 15,
            stack: '累计利润',
            label: {
              show: true,
              lineHeight: 18,
              width: 80,
              height: 30,
              position: ['50%', '-70'],
              distance: 1,
              formatter: ['{a|累计支出：}{c|1.68亿}\n', '{d|●}\n', '{b|}'].join(''),
              rich: {
                a: {
                  color: '#fff',
                  align: 'center'
                },
                b: {
                  width: 1,
                  height: 30,
                  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: [50]
          },
          {
            silent: true,
            name: '累计收入',
            type: 'bar',
            barWidth: 12,
            stack: '累计利润',
            itemStyle: {
              color: 'transparent'
            },
            label: {
              show: true,
              lineHeight: 18,
              width: 80,
              height: 30,
              position: ['50%', '-70'],
              distance: 1,
              formatter: ['{a|累计收入：}{c|2.77亿}\n', '{d|●}\n', '{b|}'].join(''),
              rich: {
                d: {
                  color: 'rgba(14, 167, 255, 1)',
                  align: 'center'
                },
                a: {
                  color: '#fff',
                  align: 'center'
                },
                c: {
                  fontWeight: 'bold',
                  color: '#fff'
                },
                b: {
                  width: 1,
                  height: 30,
                  borderWidth: 1,
                  borderColor: 'rgba(14, 167, 255, 1)',
                  align: 'center'
                }
              }
            },
            data: [50]
          },
          {
            // 分隔
            type: 'pictorialBar',
            itemStyle: {
              color: '#07314a'
            },
            z: 2,
            symbolRepeat: 'fixed',
            symbolMargin: 2,
            symbol: 'rect',
            symbolClip: true,
            symbolSize: [2, 16],
            symbolPosition: 'start',
            symbolOffset: [0, -2],
            // symbolBoundingData: 100,
            data: [100],
            animationEasing: 'elasticOut'
          },
          {
            type: 'bar',
            barGap: '-130%',
            data: [100],
            barWidth: 24,
            itemStyle: {
              color: 'transparent', // 填充色
              borderColor: 'rgba(43, 167, 255, 0.26)', // 边框色
              borderWidth: 3 // 边框宽度
            },
            z: 0
          }
        ]
      }
      this.creatChart(option, this.$refs.chart)
    },
    creatChart(option, ref) {
      let chart = echarts.init(ref) //this.$refs.chart
      chart.resize()
      chart.setOption(option, {
        notMerge: true
      })
      //图表大小自适应
      window.addEventListener('resize', () => {
        chart.resize()
      })
    }
  }
}
</script>

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