VUE项目整合echarts图表柱状图

1、首先在vue项目上安装echarts依赖

在项目根目录的命令窗口输入

npm install echarts -S

2、全局引入（main.js）

import charts from 'echarts'

Vue.prototype.$echarts = echarts

3、然后就是在需要显示图表的vue页面的template标签内添加一个DOM对象

<div id="myEchart" style="{width:90%; height:300px}"> </div>

4、在script标签写入以下代码

export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
        // 这里是实例化一个echarts对象并且初始化上面创建好的dom
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 制作图标的具体实现
        myChart.setOption({
            title: { text: '在Vue中使用echarts' },
            tooltip: {},
            xAxis: {
                data:  ['一月','二月','三月','四月']
            },
            yAxis: {},
            series: [{
                name: '裤衩',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
                //略。。。
            }]
        });
    }
  }
}

 5、最终产生以下的效果

以上是整体引入echarts包的方式，这种方法省事但是会导致项目体积增大，对项目体积有要求的朋友可以选择按需引入的方式，网上有很多相关文章可以自行查阅，在这里就不一 一赘述了

最后

以上就是雪白自行车为你收集整理的VUE项目整合echarts图表柱状图的全部内容，希望文章能够帮你解决VUE项目整合echarts图表柱状图所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。