<template>
  <div id="barBottom" :class="className" :style="{height:height,width:width}" />
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
export default {
  mixins: [0],
  props: {
    className: {
      type: String,
      default: 'chart1'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    visitData: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      chart: null,
      nameList: [],
      numList: [],
      data: [220, 182, 191, 234, 290, 330, 310]
    }
  },
  mounted () {
    // this.initChart()
  },
  beforeDestroy () {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart () {
      // this.chart = echarts.init(this.$el, 'macarons')
      const maChart = echarts.init(document.getElementById('barBottom'))
      const { bsName, visits } = this.visitData
      const option = {
        title: {
          text: '应用系统访问量', // 主标题
          x: 'center', // x轴方向对齐方式
          textStyle: {
            color: '#333',
            fontStyle: 'normal',
            fontSize: 16
          }
        },
        grid: {
          top: '15%',
          left: '5%',
          right: '3%',
          bottom: '8%'
          // containLabel: true
        },
        backgroundColor: '#ffffff',
        tooltip: {
          trigger: 'axis',
          formatter: '{b} : {c}',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          data: bsName,
          // 坐标轴
          axisLabel: {
            margin: 5,
            color: '#041730'
          },
          axisLine: {
            lineStyle: {
              color: '#cccccc'
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          // 坐标值标注
          type: 'value',
          // max: 2468,
          axisLabel: {
            show: true,
            formatter: function (value) {
              // console.log(`value`, value)
              return value
            },
            textStyle: {
              color: '#041730'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#e5e5e5'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#cccccc'
            }
          },
          axisTick: {
            show: false
          }
        },
        series: [{
          name: 'a',
          tooltip: {
            show: false
          },
          type: 'bar',
          barWidth: 24.5,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: '#0B4EC3' // 0% 处的颜色
              }, {
                offset: 0.6,
                color: '#138CEB' // 60% 处的颜色
              }, {
                offset: 1,
                color: '#17AAFE' // 100% 处的颜色
              }], false)
            }
          },
          data: visits,
          barGap: 0
        }]
      }
      maChart.setOption(option)
    }
  },
  watch: {
    visitData: {
      handler (val) {
        this.initChart()
      },
      deep: true
    }
  }
}
</script>
