<template>
  <chart v-if="barChartId" :id="barChartId" class="chart__pie" height="300px" width="100%" :options="chartOptions" />
</template>

<script>
import Chart from '@/components/Charts/Keyboard'
import * as echarts from 'echarts'
export default {
  components: { Chart },
  props: {
    chartId: {
      type: String,
      default: ''
    },
    ageInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      barChartId: null,
      chartOptions: {},
      ageInfoList: [
        {
          title: '20岁以下',
          field: 'age20'
        },
        {
          title: '20~35岁',
          field: 'age35'
        },
        {
          title: '36~50岁',
          field: 'age50'
        },
        {
          title: '51~65岁',
          field: 'age65'
        },
        {
          title: '65岁以上',
          field: 'ageOther'
        }
      ]
    }
  },
  mounted() {
    this.drawBar()
  },
  methods: {
    drawBar() {
      this.barChartId = this.chartId
      const xAxisData = []
      const seriesData = []
      this.ageInfoList.forEach(item => {
        xAxisData.push(item.title)
        seriesData.push(this.ageInfo[item.field])
      })
      this.chartOptions = {
        grid: {
          left: '20px',
          right: '40px',
          bottom: '0px',
          top: '30px',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis', // 触发类型为 'item'
          formatter: function() {
            return '' // 返回空字符串，避免显示提示框内容
          },
          borderWidth: 0,
          borderColor: 'transparent', // 去掉边框颜色
          axisPointer: {
            type: 'shadow', // 'shadow' 阴影指示器 'line' 直线指示器 'cross' 十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。 'none' 无指示器
            z: 1, // 坐标轴指示器的 z 值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
            shadowStyle: {
              color: 'rgba(0, 31, 79, 0.3)'
            }
          }
        },
        xAxis: {
          type: 'category',
          interval: 0,
          data: xAxisData,
          axisLabel: {
            color: 'rgba(240, 245, 255, 1)',
            rotate: 20
          },
          axisTick: { //  刻度线
            show: false
          },
          axisLine: { // 坐标轴线
            show: false
          },
          splitLine: { // 分割线
            show: false
          }
        },
        yAxis: {
          type: 'value',
          max: function(value) {
            return value.max + value.min
          },
          axisLabel: {
            color: 'rgba(235, 239, 255, 0.5)'
          },
          axisTick: { //  刻度线
            show: false
          },
          axisLine: { // 坐标轴线
            show: false
          },
          splitLine: { // 分割线
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(235, 239, 255, 0.15)'
            }
          }
        },
        series: [
          {
            data: seriesData,
            type: 'bar',
            barWidth: '10px',
            emphasis: {
              label: {
                show: true,
                position: 'top', // top上方;left左侧;right右方显示
                textStyle: { // 数值样式
                  color: '#fff',
                  fontSize: 14
                }
              }
            },
            itemStyle: {
              normal: {
                barBorderRadius: [8, 8, 0, 0],
                label: {
                  show: false // 关键点开启显示
                  // position: 'top', // top上方;left左侧;right右方显示
                  // textStyle: { // 数值样式
                  //   color: '#77A0DD',
                  //   fontSize: 14
                  // }
                },
                // 设置柱状渐变色
                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                  {
                    offset: 0,
                    color: 'rgba(98, 255, 231, 1)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(17, 96, 255, 0.5)'
                  }
                ])
              }
            }
          }
        ]
      }
    }
  }
}
</script>

<style></style>
