<template>
  <div
    :id="id"
    :style="`width:${curWidth};height:${curHeight}`"
  >
  </div>
</template>
<script>
/**
   * @author 王晓颖
   * @date 2020/08/18
   * @Description 斑马柱形图
   * @props 数据格式：{
   *    id: '',
      width: 0,
      height: 0,
      xAxisData:[],
      seriesData: []
    }
   *
   */
import { countSize } from '@/utils/utils'
export default {
  name: 'ZibraBarChart',
  props: {
    id: { // id
      type: String,
      default: 'simpleBarChart'
    },
    width: { // 宽
      type: Number | String,
      default: '100%'
    },
    height: { // 高
      type: Number | String,
      default: '100%'
    },
    unit: { // 单位
      type: String,
      default: ''
    },
    colors: { // 颜色
      type: Array,
      default: () => { return ['#01b4ff', '#0337ff'] }
    },
    axisLineColor: { // 轴线颜色
      type: String,
      default: '#101d5d'
    },
    fontColor: { // 轴线上文字颜色
      type: String,
      default: '#ffffff'
    },
    labelColor: { // 图形上文本标签颜色
      type: String,
      default: '#47c8b2'
    },
    seriesData: { // 数据
      type: Array,
      default: () => { return [] }
    },
    xAxisData: { // X轴数据
      type: Array,
      default: () => { return [] }
    }
  },
  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: this.fontColor,
            fontSize: '50%',
            verticalAlign: 'middle'
          },
          type: 'value', // 数值轴
          // color: this.fontColor, //
          splitLine: { // 在grid区域中的分隔线
            lineStyle: {
              color: ['#101641'],
              type: 'dashed'
            }
          },
          axisLine: {
            lineStyle: {
              color: this.axisLineColor // y轴线的颜色
            }
          },
          axisLabel: {
            color: this.fontColor, // Y轴单位颜色
            fontSize: '40%'
          }
        },
        xAxis: {
          type: 'category', // 类目轴
          data: [
            // '周一','周二','周三','周四','周五','周六','周日'
          ],
          axisLine: {
            lineStyle: {
              color: this.axisLineColor // 轴线的颜色
            }
          },
          axisLabel: {
            color: this.fontColor, // X轴名称颜色
            fontSize: 8
          }
        },
        series: [
          {
            name: '总数量', // 系列名称
            type: 'bar', // 类型
            stack: '总量', // 数据堆叠，同一个类目轴上系列配置相同的stack值可以堆叠放置
            barCategoryGap: '40%', // 同一系列柱间距离
            itemStyle: { // 图形演示
              normal: {
                // LinearGradient 用于配置渐变色的起始位置，分别对应右下左上，0001表示正上方
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,
                  [
                    {offset: 0, color: '#01b4ff'},
                    {offset: 1, color: '#0337ff'}
                  ]
                )}
            },
            label: {
              normal: {
                show: true,
                color: this.labelColor,
                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.xAxis.data = this.xAxisData
      this.unit && (this.option.xAxis.name = this.unit)
      let newSeries = []
      const colors = []
      for (const index in this.colors) {
        if (index === '0') {
          colors.push({offset: 0, color: this.colors[index]})
        } else {
          colors.push({offset: 1, color: this.colors[index]})
        }
      }
      // for (let index in this.seriesData) {
      const item = this.seriesData
      let series = {
        name: '总数量',
        type: 'pictorialBar',
        barWidth: countSize(0.06),
        symbol: 'rect',
        symbolRepeat: true,
        symbolSize: [12, 2],
        symbolMargin: 1,
        itemStyle: { // 图形演示
          normal: {
            // LinearGradient 用于配置渐变色的起始位置，分别对应右下左上，0001表示正上方
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, colors)}
        },
        label: {
          normal: {
            show: true,
            color: this.labelColor,
            position: 'top',
            fontSize: '50%'
          }
        },
        data: item
      }
      newSeries.push(series)
      // }
      this.$set(this.option, 'series', newSeries)
      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>