vue中使用echarts自定义主题（源码学习适用于）
vue中使用echarts自定义主题（源码学习适用于）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'; i
距离 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项目效果演示
如果你想了解更多有关于项目的详细信息，点击下方了解更多即可前往项目主页查看。
