老师vue-echarts请问一下我的理解正确吗

Question

可能废话有点多。。
关于vue-echarts的按需引入总结了一下，请老师看看哪里不太对我及时更改下思路。谢谢！！

关于vue-echarts本身就是基于echarts封装的vue的componet，他的按需引入就是按照项目中的echarts内容进行引入的。

通俗解释（按需引入）

• 按需引入代码 main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './plugins/element.js'

import VueEcharts from "vue-echarts"
 import 'echarts/lib/chart/line'
 import 'echarts/lib/chart/bar'


Vue.component('v-chart', VueEcharts)


import "./plugins/vue-echarts"
import "./assets/index.css"


// Vue.prototype.$echarts = echarts
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

ESmodules的形式引入vue-echarts，项目中并没有import echrats，import vueecharts from “vue-echarts”在webpack环境下指向component/Echarts.vue

可以看到，上方是按需引入的形式，引入了折线图和柱状图。需要什么引入什么。

• 全部引入的例子

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './plugins/element.js'

import echarts from "echarts"

import VueEcharts from "vue-echarts"


Vue.component('v-chart', VueEcharts)


import "./plugins/vue-echarts"
import "./assets/index.css"


// Vue.prototype.$echarts = echarts
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

由于main.js中全部引入了echarts，而vueecharts本身就是基于echarts的封装。所以说这时候就相当于全部引入了，直接进行使用就OK无需在引入其他的一些类型。

Tips

注意当没有引入echarts任何（也就是项目中并没有引入echarts相关），但main.js中引入用vue-echarts同时也没有引入任何模块。那么这个时候就相当于仅仅引入了一个vue-echarts，没有引入任何具体模块。所以绘制不出什么图形（因为未加载Echarts任何图形模块）

总结

总而言之可以这样理解，vue-echarts仅仅是一个vue的componet，引入了vue-echarts仅仅引入了一个插件而已。


当我们需要按需引入的时候，还是需要在vue-echarts依赖的echarts模块中去按需引入。


vue-echrts帮我们使用了ESmodules的方式进行按需引入echarts模块，当然我们也可以用echarts的形式进行引入（同样对vue-echarts生效，因为他仅仅是一个依赖的componet而已，如果项目里echarts本身就没引入的类型，那么vue-echarts一定使用不了）。

Answer 1

扬_灵 2020-07-19 17:26:13

同学你好，上述关于vue-echarts的使用，你的理解是正确的。如果不能解决你的问题，可以继续追问。