共计 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…
正文完