<template>
  <div id="mainColumnEngChange" style="width: 100%; height: 100%"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  mounted() {
    this.draw()
  },
  methods: {
    draw() {
      var chartDom = document.getElementById('mainColumnEngChange')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        legend: {
          top: 'bottom',
          padding: 30,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          // 此处配置鼠标移动对应区域时的黑色弹框
          trigger: 'item',
          formatter: (a) => {
            return a.marker + a.name + '月' + ' ' + a.value + '次'
          },
        },
        xAxis: {
          name: '月份',
          nameTextStyle: {
            color: '#9FA1A7',
            fontSize: 16,
          },
          type: 'category',
          axisLabel: {
            fontSize: 14,
          },
          data: [
            '一',
            '二',
            '三',
            '四',
            '五',
            '六',
            '七',
            '八',
            '九',
            '十',
            '十一',
            '十二',
          ],
          axisTick: {
            alignWithLabel: true,
            interval: 1,
          },
        },
        yAxis: {
          name: '次',
          nameTextStyle: {
            color: '#9FA1A7',
            fontSize: 16,
          },
          type: 'value',
          max: '30',
          axisLabel: {
            fontSize: 16,
          },
        },
        series: [
          {
            data: [12, 0, 15, 8, 7, 11, 13, 4, 3, 22, 5, 23],
            type: 'bar',
            // tooltip: {
            //   valueFormatter: function (value) {
            //     return value + '次'
            //   },
            // },
            // showBackground: true,
            // backgroundStyle: {
            //   color: 'rgba(180, 180, 180, 0.2)',
            // },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(0,0,0,0.3)',
              },
            },
            itemStyle: {
              normal: {
                barBorderRadius: [20, 20, 0, 0],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {offset: 1, color: '#50c48f'},
                  {offset: 0.5, color: '#26ccd8'},
                  {offset: 0, color: '#3685fe'},
                ]),
              },
            },
          },
        ],
      }

      option && myChart.setOption(option)
    },
  },
}
</script>
