<template>
  <div :class="className" :style="{height:height,width:width}"></div>
</template>

<script>
import echarts from 'echarts'

require('echarts/theme/macarons') // echarts theme
import {debounce} from '../../utils/debounce'

export default {
  name: 'barChart',
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: function () {
      this.$nextTick(()=>{
        this.initChart()
      })
    }
  },
  mounted() {
    this.initChart()
    if (this.autoResize) {
      this.__resizeHandler = debounce(() => {
        if (this.chart) {
          this.chart.resize()
        }
      }, 100)
      window.addEventListener('resize', this.__resizeHandler)
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    if (this.autoResize) {
      window.removeEventListener('resize', this.__resizeHandler)
    }

    this.chart.dispose()
    this.chart = null
  },
  methods: {
    setOptions({yData} = {}) {
      this.chart.setOption(
        {

          grid: {
            top: 0,
            left: 0,
            right: '20',
            bottom: -10,
            containLabel: true
          },
          title:{show:false},
          xAxis: {
            show: false,//尽管显示false，但仍然占用空间containLabel为true的话[echarts bug]
            nameGap:0
          },
          yAxis: [{
            show: true,
            nameLocation:'start',
            //data: ['支付宝', '微信', '其它'],
            data: [
              {
                value:'支付宝',
                textStyle:{
                  color:'#01AEFE'
                }
              },
              {
                value:'微信',
                textStyle:{
                  color:'#06C406'
                }
              },
              {
                value:'其它',
                textStyle:{
                  color:'#FFAB00'
                }
              }
            ],//右侧Y轴值
            inverse: true,
            axisLine: {show: false},
            splitLine: {show: false},
            axisTick: {show: false },
            axisLabel: {
              //margin:-20,
              // nameTextStyle:{
              //   align:'left'
              // }
            }
          }, {
            show: true,
            inverse: true,
            data: [
                    {
                      value:1000,
                      textStyle:{
                        color:'#01AEFE'
                      }
                    },
                    {
                      value:200,
                      textStyle:{
                        color:'#06C406'
                      }
                    },
                    {
                      value:300,
                      textStyle:{
                        color:'#FFAB00'
                      }
                    }
                    ],//右侧Y轴值
            axisLabel: {
              textStyle: {fontSize: 12,},
            },
            axisLine: { show: false },
            splitLine: { show: false},
            axisTick: {show: false},
          }],
          series: [{
            name: '条',
            type: 'bar',
            yAxisIndex: 0,
            data: [1000,200,300],//百分比
            barWidth: '40%',
            itemStyle: {
              normal: {
                barBorderRadius: 16,
                color: {
                  type: 'linear',
                  x: 0,
                  x1: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#02ddff'
                  }, {
                    offset: 1,
                    color: '#00feff'
                  }]
                }
              },
            },
            label: {
              normal: {show: false}
            },
          }, {
            name: '框',
            type: 'bar',
            yAxisIndex: 1,
            barGap: '-100%',
            data: [1500,1500,1500],//百分比
            barWidth: '40%',
            itemStyle: {
              normal: {
                color: 'none',
                borderColor: '#157ADB',
                borderWidth: 0.5,
                //barBorderRadius: 15,
              }
            }
          }, ]
        }
      )
    },
    initChart() {
      this.chart = echarts.init(this.$el)
      this.setOptions(this.chartData)
    },

  }
}
</script>
