vue中引用echarts组件的两种方式

1 下载echarts组件库

命令为：

npm install echarts --save

2 两种使用方式

下载好后就可以在vue项目中使用了，使用时有全局使用和按需引入两种方式。

2.1 全局引入

在main.js中直接引入
缺点：完整引入Echarts，会额外的引入其他无用的配置文件，造成项目文件体积过大，首屏加载也会慢，资源加载耗时过长，影响用户体验

/**
 * @file 项目主入口
 * @author yizuodao
 */
 
import Vue from 'vue'
import App from './App'
import router from './router'

// 全局引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

/* eslint-disable */
new Vue({
    el: '#app',
    router,
    store,
    components: { App },
    template: ''
})

2.2 按需引入

优点：该方式能解决上面全局引入带来的问题，没有使用到的组件不要引入项目中，只引入需要的echarts组件。

若在多个页面中都要使用到，则直接在main.js中按需引入即可

//引入基本模板
let echarts = require('echarts/lib/echarts')
 
// 引入折线图等组件
require('echarts/lib/chart/line')
require('echarts/lib/chart/bar')
require('echarts/lib/chart/radar')

// // 引入title组件、图例、提示框
require('echarts/lib/component/title')
require('echarts/lib/component/legend');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/toolbox');
require('echarts/lib/component/legendScroll')//图例翻译滚动

Vue.prototype.$echarts = echarts

若只有一个页面中用到echarts，则直接在该.vue文件中直接引入即可，下面为只在页面中引入折线图