<template>
  <div
    :id="id"
    :style="`width:${curWidth}px;height:${curHeight}px`"
  >
  </div>
</template>
<script>
/**
 * @author chenyanqing
 * @date 2019/10/19
 * @Description 多色柱状图bar（产业经济-营商环境）
 * @props 数据格式：{
 *    id: 'traffic_govern_id',
      width: 0,
      height: 0,
      xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
      seriesData: [320, 302, 301, 334, 390, 330, 320]
    }
 *
 */

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: '10',
          left: '20',
          right: '5',
          bottom: '5',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [], // x轴坐标数据
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              lineStyle: {
                color: '#0b146f' // 轴线的颜色
              }
            },
            axisLabel: {
              textStyle: {
                color: '#fff',
                fontSize: 8
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            nameTextStyle: {
              color: '#fff',
              fontSize: 8,
              verticalAlign: 'middle'
            },
            axisLine: {
              lineStyle: {
                color: '#0b146f' // 轴线的颜色
              }
            },
            splitLine: {
              lineStyle: {
                color: ['#101641'],
                type: 'solid'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#fff',
                fontSize: 8
              }
            }
          }
        ],
        series: [
          {
            name: '',
            type: 'bar',
            barWidth: '60%',
            itemStyle: {
              normal: {
                color: (params) => {
                  var colorList = [
                    ['#0281de', '#2352d6', '#3e29ce'],
                    ['#fed700', '#fdb302', '#fb9600'],
                    ['#68dfe3', '#2fade0', '#0182de'],
                    ['#fd9a19', '#fd6f1b', '#fe421c'],
                    ['#fed700', '#feb501', '#fd9502'],
                    ['#0281de', '#2352d6', '#3e29ce'],
                    ['#68dfe3', '#2fade0', '#0182de'],
                    ['#fd9a19', '#fd6f1b', '#fe421c'],
                    ['#fed700', '#feb501', '#fd9502'],
                    ['#0281de', '#2352d6', '#3e29ce']
                  ]
                  var index = params.dataIndex
                  if (params.dataIndex >= colorList.length) {
                    index = params.dataIndex - colorList.length
                  }
                  return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,
                    [
                      {offset: 0, color: colorList[index][0]},
                      {offset: 0.5, color: colorList[index][1]},
                      {offset: 1, color: colorList[index][2]}
                    ])
                }
              }
            },
            data: [] // y轴坐标数据[10, 52, 200, 334, 390, 330, 220, 10, 52, 200]
          }
        ]
      }
    }
  },
  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[0].data = newVal
      this.refreshEchart()
    }
  },
  mounted () {
    if (this.seriesData.length) {
      this.option.series[0].data = this.seriesData
      this.option.xAxis[0].data = this.xAxisData
      this.unit && (this.option.yAxis[0].name = this.unit)
      this.unit && (this.option.grid.top = '30')
      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>