<template >
  <div ref="chart" style="height: 200px;"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'ChartComponent',
  mounted() {
    const chart = echarts.init(this.$refs.chart)
    chart.setOption({
        tooltip: {
          trigger: "axis",
          formatter: "{b} : {c}",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          backgroundColor: "rgba(0,224,255,0.46)",
          borderColor: "rgba(0,213,255, .6)",
          textStyle: {
            color: '#fff',
          }
        },
      xAxis: {
        type: 'category',
        axisLine: {
          show: false,
        },
        axisTick: {
          //y轴刻度线
          show: false,
        },
        axisLabel: {
          color: '#fff'
        },
        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
      },
      yAxis: {
        type: 'value',
        //坐标轴
        axisLine: {
          show: false,
        },
        axisLabel: {
          color: '#fff'
        },
        axisTick: {
          //y轴刻度线
          show: false,
        },
        //分格线
        splitLine: {
          lineStyle: {
            color: "#4784e8",
            type: 'dashed'
          },
        },
    },
      grid: {
        right: '8px',
        top: '20px'
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130, 30, 210, 220, 123, 234],
          type: 'bar',
          barWidth: 10,
          barGap: 20,
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          },
          itemStyle: {
            normal: {
              color: '#0085FF'
            },
            emphasis: {
              color: '#00E0FF'
            }
          }
        }
      ]
    })
  }
}
</script>

<style scoped lang='less'>
</style>
