使用Vue3封装一个通用echarts组件详解
作者：weixin_43160044
这篇文章主要为大家详细介绍了使用Vue3封装一个通用echarts组件详解的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
实现这个组件需要引入echarts和vue-echarts插件，使用vue-echarts是因为它帮我们封装了一些很常用的功能，比如监听页面resize后重新渲染功能，本次组件只使用到了autoresize配置，其它可以根据官方文档按需选配
https://github.com/ecomfe/vue-echarts
首先引入echarts和vue-echarts插件
npm install echarts vue-echarts -S
组件定义参数如下
import type { ECBasicOption } from 'echarts/types/dist/shared'
const props = defineProps({
// echarts options 传参
option: {
type: Object as PropType<ECBasicOption>,
required: true,
},
// 容器宽度
width: {
type: String,
default: '100%',
},
// 容器高度
height: {
type: String,
default: '400px',
},
})组件代码如下
<script setup lang="ts">
import { PropType, provide } from 'vue'
import type { ECBasicOption } from 'echarts/types/dist/shared'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
// 按需引入
import { PieChart, LineChart, FunnelChart, CustomChart } from 'echarts/charts'
import {
TitleComponent,
TooltipComponent,
LegendComponent,
GridComponent,
ToolboxComponent,
} from 'echarts/components'
import VChart, { THEME_KEY } from 'vue-echarts'
use([
CanvasRenderer,
PieChart,
TitleComponent,
TooltipComponent,
LegendComponent,
GridComponent,
LineChart,
ToolboxComponent,
FunnelChart,
CustomChart,
])
// 传入主题
provide(THEME_KEY, 'light')
const props = defineProps({
option: {
type: Object as PropType<ECBasicOption>,
required: true,
},
width: {
type: String,
default: '100%',
},
height: {
type: String,
default: '400px',
},
})
</script>
<template>
<div class="chart-container" :style="{ width, height }">
<VChart class="w-full h-full" :option="props.option" autoresize />
</div>
</template>到此这篇关于使用Vue3封装一个通用echarts组件详解的文章就介绍到这了,更多相关Vue3封装通用echarts组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！