echarts vue 柱状图实例_「源码学习」适用于 Vue3 的 ECharts 包装组件

距离 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

项目效果演示

如果你想了解更多有关于项目的详细信息，点击后面的链接即可前往项目主页查看：https://gitee.com/ambit/echarts-for-vue