vue 引入Echarts

（1）下载Echarts

WebStorm打开创建好的vue项目，打开cmd，进入到项目所在文件夹，输入命令下载Echarts：

npm install echarts -S

（2）全局引入Echarts

在/src/main.js中加入：

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

（3）创建一个图表

绘制柱状图：

<template>
  <div id="histogramChart">
  </div>
</template>

<script>
  export default {
    name:'Histogram',
    data(){
      return {}
    },
    mounted() {
      //在mounted生命周期函数中实例化echarts对象
      this.drawHistogarm();
    },
    methods:{
      drawHistogarm(){
        //初始化echarts实例
        let histogram = this.$echarts.init(document.getElementById('histogramChart'))
        let option = {
          title: {
            text: '柱状图示例',
            left: 'center'
          },
          tooltip: {
            trigger:'axis'
          },
          xAxis: {
            type: 'category',
            data: ["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            name: '数量',
            type: 'bar',
            barWidth: '50%',//设置柱子的宽度
            data: [204,106,190,230,100,170,201]
          }]
        };
        histogram.setOption(option);
      }
    }
  }
</script>

<style scoped>
  #histogramChart {
    width: 500px;
    height: 500px;
  }
</style>

页面效果如下：

参考链接：
https://www.jianshu.com/p/cf0a54374419
https://blog.youkuaiyun.com/guozhangqiang/article/details/82379306