<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: [320, 302, 301, 334, 390, 330, 320]
    }
   *
   */
import { countSize } from '@/utils/utils'
export default {
  name: 'ColorfulBarChart',
  props: {
    id: { // id
      type: String,
      default: 'colorFulBarChart'
    },
    width: { // 宽
      type: Number | String,
      default: '100%'
    },
    height: { // 高
      type: Number | String,
      default: '100%'
    },
    unit: { // 单位
      type: String,
      default: ''
    },
    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 [] }
    },
    colorList: {
      type: Array,
      default: () => {
        return [
          ['#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']
        ]
      }
    } // 颜色列表
  },
  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
        }, // 网格
        yAxis: {
          name: '', // 坐标轴名称
          nameTextStyle: { // 坐标轴名称的文字样式
            color: this.fontColor,
            fontSize: '70%',
            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: '70%'
          },
          max: 420
        },
        xAxis: {
          type: 'category', // 类目轴
          data: [
            // '周一','周二','周三','周四','周五','周六','周日'
          ],
          axisTick: {
            alignWithLabel: true
          },
          axisLine: {
            lineStyle: {
              color: this.axisLineColor // 轴线的颜色
            }
          },
          axisLabel: {
            lineHeight: 30,
            color: this.fontColor, // X轴名称颜色
            fontSize: 15
          }
        },
        series: [
          {
            name: '总数量', // 系列名称
            type: 'bar', // 类型
            stack: '总量', // 数据堆叠，同一个类目轴上系列配置相同的stack值可以堆叠放置
            barCategoryGap: '40%', // 同一系列柱间距离
            itemStyle: { // 图形样式
            },
            label: {
              normal: {
                show: true,
                color: this.labelColor,
                position: 'top',
                fontSize: '75%'
              }
            }, // 图形上的文本标签
            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)
      const colorList = this.colorList
      this.option.series[0].itemStyle = {
        normal: {
          color: (params) => {
            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]}
              ])
          }
        }
      }
      this.initEchart()
    }
  },
  methods: {
    refreshEchart () {
      if (this.curWidth && this.curHeight && this.seriesData.length && this.xAxisData.length) {
        this.initEchart()
      }
    },
    initEchart () {
      const max = Math.max(...this.seriesData)
      this.option.yAxis.max = Math.floor(max * 1.3)
      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>