关于vue.js:源码学习适用于-Vue3-的-ECharts-包装组件

间隔 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…