人的博客

本文展示了一个使用Vue3和ECharts实现的航母数量统计图表组件。主要功能点包括： 创建了一个蓝色背景的卡片容器，内置柱状图展示中、美、英三国的航母数量对比 使用ECharts初始化柱状图，配置了x/y轴、提示框和不同国家的颜色区分 实现了图表实例的自动销毁管理，避免内存泄漏 采用响应式设计，通过ref获取DOM引用并绑定图表 核心代码约150行，实现了数据可视化展示的基础功能，适合作为数据看板的组成部分。

本文介绍如何使用Vue3、TypeScript和ECharts创建美观的数据统计卡片。通过Element Plus的el-card组件搭建UI框架，利用ECharts实现环形图展示数据，并在图表中心显示总数，右侧自定义图例展示分类数值和名称。文章详细讲解了环境准备、组件结构搭建、ECharts配置（包括环形图绘制、图例格式化、中心数值显示等核心功能）以及生命周期管理（图表初始化和销毁）。完整代码可直接复制使用，适用于仪表盘等数据可视化场景，实现紧凑美观的数据展示效果。