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

28次阅读

共计 1300 个字符,预计需要花费 4 分钟才能阅读完成。

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

正文完
 0