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

import { countSize } from '@/utils/utils'
export default {
  props: ['id', 'width', 'height', 'seriesData', 'yAxisData'],
  data () {
    return {
      curWidth: this.width,
      curHeight: this.height,
      option: {
        grid: {
          left: '0',
          right: '-5',
          bottom: '0',
          top: countSize(0.3),
          containLabel: true
        },
        legend: {
          align: 'left',
          left: countSize(0.07),
          top: 0,
          right: 0,
          itemWidth: 8,
          itemHeight: 8,
          icon: 'rect',
          textStyle: {
            color: '#fff',
            fontSize: 11
          }
        },
        tooltip: {
          trigger: 'axis',
          textStyle: {
            fontSize: '80%'
          },
          axisPointer: {
            type: 'cross',
            label: {
              fontSize: '80%'
            }
          }
        },
        xAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          }
        },
        yAxis: {
          type: 'category',
          color: '#fff',
          nameTextStyle: {
            color: '#fff',
            fontSize: '50%',
            verticalAlign: 'middle'
          },
          axisLabel: {
            textStyle: {
              color: '#6eaeec',
              fontSize: '50%'
            }
          },
          data: ['2019-09-24', '2019-09-25', '2019-09-26', '2019-09-27', '2019-09-28', '2019-09-29'],
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          }
        },
        series: [
        ]
      }
    }
  },
  watch: {
    width (newVal, oldVal) {
      let that = this
      this.curWidth = newVal
      if (this.curWidth && this.curHeight) {
        that.initEchart()
      }
    },
    height (newVal, oldVal) {
      let that = this
      this.curHeight = newVal
      if (this.curWidth && this.curHeight) {
        that.initEchart()
      }
    }
  },
  mounted () {
    this.option.legend.data = this.legend
    this.option.yAxis.data = this.yAxisData
    let newSeries = []
    for (let item of this.seriesData) {
      let series = {
        name: item.name,
        type: 'bar',
        stack: '总量',
        barWidth: countSize(0.06),
        itemStyle: {
          normal: {
            color: item.color,
            shadowBlur: [0, 0, 0, 10],
            shadowColor: item.color,
            barBorderRadius: [countSize(0.1), countSize(0.1), countSize(0.1), countSize(0.1)],
            shadowOffsetX: -3
          }
        },
        label: {
          normal: {
            show: true,
            position: 'insideRight',
            offset: [0, -countSize(0.09)],
            fontSize: '50%',
            color: item.color
          }
        },
        z: item.zlevel,
        data: item.data
      }
      newSeries.push(series)
    }
    this.$set(this.option, 'series', newSeries)
    this.initEchart()
  },
  methods: {
    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>