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>

第三步，效果