方法：1、使用“npm install echarts vue-echarts”语句安装vue-echarts；2、在“main.js”文件中引入vue-echarts模块；3、在需要的界面中，根据需要添加echarts代码即可。

本教程操作环境：windows7系统、vue2.9.6版，DELL G3电脑。

vuejs加载echarts

先npm安装vue-echarts

npm install echarts vue-echarts

开发：

main.js

ECharts Master

ECharts 图表大师。根据用户数据和业务上下文，自动设计并生成专业的 ECharts 可视化图表。使用场景：(1) 用户提供表格/JSON/CSV 数据需要可视化，(2) 用户说"帮我做个图"、"画个图表"，(3) 需要将查询结果可视化展示。

下载

import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
Vue.component('chart', ECharts)

HelloWorld.vue

<template>
  <p>
    <chart></chart>
  </p>
</template><script>
export default {
  name: &#39;HelloWorld&#39;,
  data () {
    return {
      orgOptions: {},
    }
  },
  mounted() {
    this.orgOptions = {
        xAxis: {
            type: &#39;category&#39;,
            data: [&#39;Mon&#39;, &#39;Tue&#39;, &#39;Wed&#39;, &#39;Thu&#39;, &#39;Fri&#39;, &#39;Sat&#39;, &#39;Sun&#39;]
        },
        yAxis: {
            type: &#39;value&#39;
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: &#39;line&#39;,
            smooth: true
        }]
    }
  }
}
    </script>

到这里就结束了。试过打包了，没报错~

相关推荐：《vue.js教程》

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！