![3702cb78c88e6d8062909eef60fc81fd.png](https://i-blog.csdnimg.cn/blog_migrate/b36dcc6627cdc0e0e351117ecc30d469.jpeg)
距离 Vue3 发布已经有近一周的时间,不知道大家源码都学习的怎么样了呢?今天 Gitee 为大家推荐一个新的学习资源,就是下面要介绍的这个同时适用于 Vue2 和 Vue3 的 EChatrts 包装组件,希望能对大家学习 Vue3 有所帮助。
项目名称:echarts-for-vue
项目作者:范围兄
开源许可协议:Apache-2.0
项目地址:https://gitee.com/ambit/echarts-for-vue
项目简介
适用于 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 实例的方法
}
}
}
</scrip
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 实例的方法
}
}
}
</scrip
项目效果演示
![6eedf1957a06b093e0fa27678436ab08.png](https://i-blog.csdnimg.cn/blog_migrate/7ebb73d9bde4d3d5c3997577bfb35116.jpeg)
如果你想了解更多有关于项目的详细信息,点击后面的链接即可前往项目主页查看:https://gitee.com/ambit/echarts-for-vue