<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: `{a|总投资：}{b|${total}}{c|${totalUnit ? totalUnit : ''}}`,
          textStyle: {
            rich: {
              a: {
                fontSize: this.$listeners.fontSize(16),
                fontFamily: 'Source Han Sans CN',
                fontWeight: 400,
                color: '#2BA7FF'
              },
              b: {
                fontSize: this.$listeners.fontSize(22),
                fontFamily: 'AgencyFB-Bold',
                fontWeight: 400,
                color: '#2BA7FF'
              },
              c: {
                fontSize: this.$listeners.fontSize(22),
                fontFamily: 'Source Han Sans CN-HEAVY',
                fontWeight: 400,
                color: '#2BA7FF'
              }
            }
          },
          left: 'center',
          top: '5%'
        },
        grid: {
          top: '10%',
          bottom: '10%',
          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: [
          {
            type: 'pictorialBar',
            symbol:
              'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
            symbolSize: [50, 50],
            symbolPosition: 'end',
            symbolOffset: [20, -2],
            z: 12,
            itemStyle: {
              color: '#14b1eb'
            },
            data: [num]
          },
          {
            silent: true,
            name: '完成产值',
            type: 'bar',
            barWidth: 8,
            label: {
              show: true,
              lineHeight: 7,
              width: 80,
              height: 30,
              position: ['50%', '12px'],
              distance: 1,
              formatter: [
                '{b|}\n',
                '{d|●}\n\n',
                `{a|完成产值：}{c|${num}${numUnit ? numUnit : ''}（${((num / total) * 100).toFixed(2) + '%'}）}`
              ].join(''),
              rich: {
                a: {
                  color: '#fff',
                  align: 'center',
                  fontSize: this.$listeners.fontSize(14),
                  fontFamily: 'Source Han Sans CN-MEDIUM'
                },
                b: {
                  width: 1,
                  height: 10,
                  borderWidth: 1,
                  borderColor: 'rgba(239, 213, 84, 1)',
                  align: 'center'
                },
                c: {
                  fontWeight: 'bold',
                  fontFamily: 'AgencyFB-Bold',
                  fontSize: this.$listeners.fontSize(16),
                  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>