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

      option = {
        legend: {
          top: 'bottom',
          padding: 30,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          // 此处配置鼠标移动对应区域时的黑色弹框
          trigger: 'item',
        },
        xAxis: {
          type: 'category',
          data: [
            '一月',
            '二月',
            '三月',
            '四月',
            '五月',
            '六月',
            '七月',
            '八月',
            '九月',
            '十月',
            '十一月',
            '十二月',
          ],
          name: '月份',
          axisTick: {
            alignWithLabel: true,
          },
          nameTextStyle: {
            color: '#9FA1A7',
            fontSize: 16,
          },
          axisLabel: {
            fontSize: 16,
          },
        },
        yAxis: {
          type: 'value',
          max: '300',
          name: '万元',
          nameTextStyle: {
            color: '#9FA1A7',
            fontSize: 16,
          },
          axisLabel: {
            fontSize: 16,
          },
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130, 340, 239, 321, 56, 231],
            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: [50, 50, 0, 0],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {offset: 1, color: '#929fff'},
                  {offset: 0.5, color: '#9de0ff'},
                  {offset: 0, color: '#ffa897'},
                ]),
              },
            },
          },
        ],
      }

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