<template>
  <div
    :id="id"
    :style="`width:${curWidth}px;height:${curHeight}px`"
  >
  </div>
</template>
<script>
/**
 * @author chenyanqing
 * @date 2019/10/19
 * @Description bar
 * @props 数据格式：{
 *    id: '',
      width: 0,
      height: 0,
      xAxisData:[],
      seriesData: []
    }
 *
 */

import { countSize } from '@/utils/utils'
export default {
  props: ['id', 'width', 'height', 'unit', 'seriesData', 'xAxisData'],
  data () {
    return {
      curWidth: this.width,
      curHeight: this.height,
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          top: countSize(0.3),
          left: '3%',
          right: '0',
          bottom: '5',
          containLabel: true
        },
        yAxis: {
          name: '起',
          nameTextStyle: {
            color: '#fff',
            fontSize: '50%',
            verticalAlign: 'middle'
          },
          type: 'value',
          color: '#fff',
          nameTextStyle: {
            color: '#fff',
            fontSize: '50%',
            verticalAlign: 'middle'
          },
          splitLine: {
            lineStyle: {
              color: ['#101641'],
              type: 'dashed'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#101d5d' // y轴线的颜色
            }
          },
          axisLabel: {
            color: '#fff', // Y轴单位颜色
            fontSize: '40%'
          }
        },
        xAxis: {
          type: 'category',
          data: [
            // '周一','周二','周三','周四','周五','周六','周日'
          ],
          axisLine: {
            lineStyle: {
              color: '#101d5d' // 轴线的颜色
            }
          },
          axisLabel: {
            color: '#fff', // X轴名称颜色
            fontSize: 8
            // interval: 0,
        		// formatter: function(val) {
            //   var strs = val.split(''); //字符串数组
            //   var str = ''
            //   for(var i = 0, s; s = strs[i++];) { //遍历字符串数组
            //       str += s;
            //       if(!(i % 4)) str += '\n'; //按需要求余
            //   }
            //   return str
            // }
          }
        },
        series: [
          {
            name: '总数量',
            type: 'bar',
            stack: '总量',
            barCategoryGap: '40%',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,
                  [
                    {offset: 0, color: '#01b4ff'},
                    {offset: 1, color: '#0337ff'}
                  ]
                )}
            },
            label: {
              normal: {
                show: true,
                color: '#47c8b2',
                position: 'top',
                fontSize: '50%'
              }
            },
            data: [
              // 320, 302, 301, 334, 390, 330, 320
            ]
          }
        ]
      }
    }
  },
  watch: {
    width (newVal, oldVal) {
      this.curWidth = newVal
      this.refreshEchart()
    },
    height (newVal, oldVal) {
      this.curHeight = newVal
      this.refreshEchart()
    },
    seriesData (newVal, oldVal) {
      this.option.series[0].data = newVal
      this.refreshEchart()
    },
    xAxisData (newVal, oldVal) {
      this.option.xAxis.data = newVal
      this.refreshEchart()
    }
  },
  mounted () {
    if (this.seriesData.length) {
      this.option.series[0].data = this.seriesData
      this.option.xAxis.data = this.xAxisData
      this.unit && (this.option.yAxis.name = this.unit)
      this.initEchart()
    }
  },
  methods: {
    refreshEchart () {
      if (this.curWidth && this.curHeight && this.seriesData.length && this.xAxisData.length) {
        this.initEchart()
      }
    },
    initEchart () {
      const _div = document.getElementById(this.id)
      setTimeout(() => {
        let myChart = this.$echarts.init(_div)
        myChart.setOption(this.option, true)
        window.onresize = myChart.resize
      }, 500)
    }
  }
}
</script>

<style scoped>
</style>