vue 框架下 echarts 包的基本使用，实现条形图

第一步，安装 echarts

npm install echarts

第二步，写代码

<template>
  <div class="app-container">
    <div id="drawChart" style="width: 600px; height: 400px; border: 5px solid red"></div>
  </div>
</template>

<script>
import * as echarts from echarts

export default {
          
   
  data() {
          
   
    return {
          
   
      titledata: 客房收入,
      seriesname: ,
      xdata: [衬衫, 羊毛衫, 雪纺衫, 裤子, 高跟鞋, 袜子],
      // ydata: []
      ydata: [5, 20, 36, 10, 10, 70]
    }
  },
  mounted() {
          
   
    this.drawChart()
  },
  methods: {
          
   
    drawChart() {
          
   
      if (this.ydata == []) {
          
   
        echarts.init(document.getElementById(drawChart)).dispose() //无数据则清空图表内容
      } else {
          
   
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById(drawChart))
        // 绘制图表
        myChart.setOption({
          
   
          title: {
          
   
            text: this.titledata
          },
          // 不清楚，但是删掉的话，hover不能显示信息
          tooltip: {
          
   },
          // x 轴信息
          xAxis: {
          
   
            data: this.xdata
          },
          // y轴信息
          yAxis: {
          
   },
          // hover 时激活的信息
          series: [
            {
          
   
              name: this.seriesname,
              // 设置柱状图的方式，是将 series 的 type 设为 bar
              type: bar,
              data: this.ydata
            }
          ]
        })
      }
    }
  }
}
</script>

第三步，效果