使用Vue3封装图表组件前言封装组件是前端开发中常见的实践，无论是在React、Vue还是其他框架中，封装组件的思路都

前言

封装组件是前端开发中常见的实践，无论是在React、Vue还是其他框架中，封装组件的思路都是相似的。封装后的组件可以在多个文件中重复使用，减少了开发相同功能的工作量，提高了开发效率。

下面我以基于Vue3 + Echarts + 高德地图开发的大屏可视化项目为例，讲讲如何封装公共图表组件。

封装思路

确定组件的功能

选择一个适合项目需求的图表库，例如 ECharts 适合复杂的数据可视化，而 D3.js 则提供了极大的灵活性和自定义能力。这里我用 ECharts 来生成折线图、饼图等图表

实现组件的逻辑

组件使用Vue3新出的组合式API来实现：

npm 安装Echarts

npm install echarts --save

按需引入 ECharts 图表和组件

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts';
// 引入标题，提示框，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);

封装Chart组件

在onMounted（此时Vues实例挂载完成）中进行图表的初始化

数据更新：使用watch函数监听图表数据和配置项的变化，触发ECharts的setOption方法来绘制图表

// 使用 watch 函数在每次响应式状态发生变化时触发回调函数
watch(
	() => props.option,
	() => {
		setOption(props.option);
	}
);

在<script setup>中，通过defineExpose函数来显式地暴露响应式属性和方法，使得这些属性和方法可以在模板中被访问。

defineExpose({
	chart,
	setOption,
	resize,
});

定义组件的属性（Props）

const props = defineProps({
	option: {
		//PropType 用于在用运行时 props 声明时给一个 prop 标注更复杂的类型定义
		type: Object as PropType<EChartsCoreOption>,
		required: true,
		default: () => ({}),
	}
});

注册并使用组件

在每个图表页面引入，通过prop传递数据

在组件中定义option（即echarts配置的option），通过prop传递给Chart组件

option部分配置

参考

Apache ECharts