<template>
  <el-container v-loading="loading" class="th-charts-bar-category">
    <el-main>
      <v-chart
        class="th-echarts"
        :options="charOptions"
        autoresize
        v-on="$listeners"
      />
    </el-main>
  </el-container>
</template>
<script>
import graphic from 'echarts/lib/util/graphic'
import VChart from 'vue-echarts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'

export default {
  name: 'ThEchartsBarCategory',
  components: {
    VChart
  },
  props: {
    // 加载状态
    loading: {
      type: Boolean,
      default: false
    },
    // 数据
    value: {
      type: Array,
      default: () => []
    },
    // 颜色
    color: {
      type: Array,
      default: () => ['#4693EA', '#86C9FF']
    },
    // y轴坐标名称，双轴时使用数组
    yAxisName: {
      type: [String, Array],
      default: ''
    },
    // x轴刻度名称
    xAxisName: {
      type: String,
      default: ''
    },
    // x轴刻度值
    lineX: {
      type: Array,
      default: () => ([])
    },
    // 画布属性
    gridProp: {
      type: Object,
      default: () => ({})
    },
    // 是否显示柱上方的标识
    showLabel: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    charOptions() {
      const that = this
      const series = [
        {
          type: 'bar',
          data: this.value,
          barWidth: '16px',
          label: this.showLabel ? {
            show: true,
            position: 'top',
            distance: 6,
            color: '#fff',
            fontWeight: 'bolder',
            fontSize: 14,
            padding: [3, 4],
            backgroundColor: '#5BB9FF',
            borderRadius: 4
          } : '',
          itemStyle: {
            normal: {
              color: new graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: that.color[0] // 0% 处的颜色
              }, {
                offset: 1,
                color: that.color[1] // 100% 处的颜色
              }], false),
              barBorderRadius: [4, 4, 0, 0]
            }
          }
        }
      ]
      return {
        grid: {
          top: '30',
          left: '20',
          right: '20',
          bottom: '10',
          containLabel: true,
          ...this.gridProp
        },
        // 气泡提示框
        tooltip: {
          formatter(params) {
            return `<span style="color:#fff">${params.name}：${params.value}</span>`
          }
        },
        xAxis: {
          type: 'category',
          name: this.xAxisName || '',
          data: this.lineX || '',
          axisLabel: {
            interval: 0,
            // rotate:40
            color: 'rgba(148,152,161,1)',
            textStyle: {
              fontSize: 14
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(148,152,161,1)'
            }
          },
          axisTick: {
            show: true
          }
        },
        yAxis: {
          name: this.yAxisName || '',
          axisLabel: {
            color: 'rgba(148,152,161,1)',
            textStyle: {
              fontSize: 14
            }
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(148,152,161,1)'
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(213,221,231,1)',
              type: 'dashed'
            }
          }
        },
        series
      }
    }
  }
}
</script>
