📊 大屏可视化组件库 从设计到封装

01

大屏可视化概述

应用场景 · ECharts vs D3.js vs Three.js

01.html 02

设计原则与规范

简洁清晰高效 · 色彩/字体规范

02.html 03

组件化思维

基础/业务/容器组件 · 设计原则

03.html 04

开发环境搭建

Node.js · Vue3 · ESLint & Prettier

04.html 05

基础组件-标题组件

动态标题 · 字体自适应 · 动画

05.html 06

数字翻牌器

滚动动画 · 千分位 · 动态绑定

06.html 07

进度条

线性/环形 · 动画过渡 · 渐变

07.html 08

图表容器

自适应宽高 · resize · 实例管理

08.html 09

柱状图封装

数据映射 · 样式定制 · 事件交互

09.html 10

折线图封装

平滑曲线 · 面积图 · 数据点标记

10.html 11

饼图封装

环形图 · 南丁格尔玫瑰 · 标签优化

11.html 12

散点图封装

气泡图 · 回归线 · 大数据优化

12.html 13

地图封装

GeoJSON · 散点/热力/飞线图

13.html 14

雷达图封装

指标维度 · 面积填充 · 多系列

14.html 15

仪表盘封装

多指针 · 刻度定制 · 预警颜色

15.html 16

业务组件-表格组件

滚动表格 · 轮播 · 排序筛选

16.html 17

列表组件

滚动列表 · 跑马灯 · 更新动画

17.html 18

卡片组件

多种布局 · hover · 加载状态

18.html 19

时间轴组件

时间刻度 · 事件标记 · 播放控制

19.html 20

关系图组件

节点与边 · 力导向 · 交互操作

20.html 21

容器组件-布局容器

栅格/flex · 响应式 · 拖拽调整

21.html 22

轮播容器

自动播放 · 指示器 · 过渡动画

22.html 23

弹窗容器

模态框 · 位置控制 · 动画效果

23.html 24

数据管理

Pinia · 组件通信 · 请求/缓存

24.html 25

主题与样式管理

CSS变量 · 暗黑模式 · 样式隔离

25.html 26

响应式与自适应

rem/vw · 媒体查询 · 大屏适配

26.html 27

性能优化

懒加载 · 虚拟滚动 · 内存泄漏

27.html 28

测试与文档

Vitest · Storybook · API文档

28.html 29

打包与发布

Vite/Rollup · npm · CHANGELOG

29.html 30

项目实战

综合大屏 · 组件组合 · 部署上线

30.html