vue中echarts调用接口_在Vue中使用echarts的两种方式

准备：使用vue-cli脚手架

如果你已经有自己的项目，可以跳过这一步。

npm下载vue-cli脚手架

(写这篇文章时用的还是vue-cli2)

npm install -g @vue/cli

初始化一个项目

vue init webpack hello

然后等待它安装完所有的依赖包就可以了。

下面我们开始引入echarts。

方式一、直接引入echarts

先npm安装echarts

npm install echarts --save

开发：

main.js

import myCharts from './comm/js/myCharts.js'

Vue.use(myCharts)

myCharts.js

/**

* 各种画echarts图表的方法都封装在这里

* 注意：这里echarts没有采用按需引入的方式，只是为了方便学习

*/

import echarts from 'echarts'

const install = function(Vue) {

Object.defineProperties(Vue.prototype, {

$chart: {

get() {

return {

//画一条简单的线

line1: function (id) {

this.chart &