柱状图

<!--柱状图-->
<template>
  <div class="chartBox">
    <!--echart图标-->
    <div id="barChart" ref="barChart"></div>
  </div>

</template>

<script>
// 引入基本模板
// const echarts = require('echarts');
import * as echarts from 'echarts' // 注意此处echarts高版本中需要使用此方式才可引入
export default {
  props: {},
  data() {
    return {
      barChart: null,
    }
  },
  mounted() {
    this.initEchart();

  },
  methods: {
    initEchart() {
      // 基于准备好的dom，初始化echarts实例
      this.barChart = echarts.init(this.$refs.barChart);

      let option = {
        grid: {
          left: '0',
          bottom: '20',
          top: '60',
          right: 0,
          containLabel: true
        },
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.2)'
            }
          },
          axisLabel: {
            interval: 0,
            // rotate:-30,
            textStyle: {
              color: '#FFF',
              fontSize: 12
            }
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.2)'//横线颜色
            }

          },
          axisLabel: {
            interval: 0,
            // rotate:-30,
            textStyle: {
              color: '#FFF',
              fontSize: 12
            }
          }
        },
        color: 'rgb(97, 165, 232)',
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130],
            type: 'bar',

          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      this.barChart.setOption(option);
    }
  }
}
</script>

<style lang="scss" scoped>
.chartBox {
  width: 100%;
  box-sizing: border-box;
  padding: 1.6rem 1.6rem 0;
  flex: 1;

  #barChart {

    height: calc(100% - 16px);

  }
}
</style>