间隔 Vue3 公布曾经有近一周的工夫，不晓得大家源码都学习的怎么样了呢？明天 Gitee 为大家举荐一个新的学习资源，就是上面要介绍的这个同时实用于 Vue2 和 Vue3 的 EChatrts 包装组件，心愿能对大家学习 Vue3 有所帮忙。
项目名称： echarts-for-vue
我的项目作者： 范畴兄
开源许可协定： Apache-2.0
我的项目地址：https://gitee.com/ambit/echar...
我的项目简介
实用于 Vue 3 和 2 的 ECharts 包装组件
援用办法
上面别离介绍了应用 Vue2 和 Vue3 的用法，大家能够看看有哪些不同呢？
Vue3
import { createApp, h } from 'vue';import echarts from 'echarts';import { plugin } from 'echarts-for-vue';const app = createApp({ /*...*/ });app.use(plugin, { echarts, h }); // 作用插件应用<template> <ECharts ref="chart" :option="option" /></template><script> import echarts from 'echarts'; import { h } from 'vue'; import { createComponent } from 'echarts-for-vue'; export default { components: { ECharts: createComponent(echarts, h), // 作为组件应用 }, data() { return { option: { /*...*/ }, }; }, methods: { doSomething() { this.$refs.chart.inst.getWidth(); // 调用 ECharts 实例的办法 } } }</script>`Vue2
import Vue from 'vue';import echarts from 'echarts';import { plugin } from 'echarts-for-vue';Vue.use(plugin, { echarts }); // 作用插件应用<template> <ECharts ref="chart" :option="option" /></template><script> import echarts from 'echarts'; import { createComponent } from 'echarts-for-vue'; export default { components: { ECharts: createComponent(echarts), // 作为组件应用 }, data() { return { option: { /*...*/ }, }; }, methods: { doSomething() { this.$refs.chart.inst.getWidth(); // 调用 ECharts 实例的办法 } } }</script>我的项目成果演示
如果你想理解更多有对于我的项目的详细信息，点击前面的链接即可返回我的项目主页查看：https://gitee.com/ambit/echar...