一招教你生成柱状图

当我们后台查询的业务需要做出统计时，我们可以运用此技术，直接将数据生成柱状图！

<template>
  <div>
    <!-- 定义卡片视图 -->
    <el-card>

      <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
      <div id="main" style="width: 100%;height:600px;"></div>

    </el-card>

  </div>
</template>

<script>
  /* 导入echarts组件 */
  import * as echarts from 'echarts';


  export default {
    data() {
      return {
      }
    },
    created() {},
    //当页面dom对象初始化之后执行
    async mounted() {
      let dataName = []
      let dataNum = []
      let {
        data: result
      } = await this.$http.get("/report/getData")
      if (result.status !== 200) return this.$message.error("报表查询失败")
      result.data.forEach(item => {
        //console.log(item)
        dataName.push(item.name)
        dataNum.push(item.count)
      })
      //初始化图表！！！！！！
      var myChart = echarts.init(document.getElementById('main'));
      // 指定图表的配置项和数据！！！！！！
      var option = {
      //图表标题
        title: {
          text: '京淘后台销售榜单'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: dataName
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: dataNum
        }]
      };
      myChart.setOption(option);
    },
    methods: {}
  }
</script>

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

实现如图！