vue3 封装一个通用echarts组件

weixin_431600442024-02-15 2:32

实现这个组件需要引入echarts和vue-echarts插件，使用vue-echarts是因为它帮我们封装了一些很常用的功能，比如监听页面resize后重新渲染功能，本次组件只使用到了autoresize配置，其它可以根据官方文档按需选配

https://github.com/ecomfe/vue-echarts

首先引入echarts和vue-echarts插件

npm install echarts vue-echarts -S

组件定义参数如下

TypeScript 复制代码

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',
  },
})

组件代码如下

TypeScript 复制代码

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