各产品使用的框架、图表引擎和数据格式不同。直接复制业务组件，往往会连同原项目里的主题、交互和数据处理逻辑一起带过来，接入后还得逐一修改。
做成了什么
Standard Chart 和 HiVis 把这些共用的部分整理成了组件库，用 Web Components 做跨框架接入，同一张卡片里的图表可以联动，AI 生成的配置也要先校验、适配再渲染。
把事件限制在卡片内
交互事件只在卡片内部传递，金融页面做得再复杂，也不会冒出看不见的全局依赖。
返回代表作品
平台工程 / 数据可视化2017—2026
Case 012017—2026
金融可视化基础设施
DataV · HiVis · Standard Chart
这是我们长期维护的一套金融图表库。不同产品可以共用图表和交互组件，也能在各自的前端框架中接入。
换一个业务、换一种前端框架，图表不应该又重写一遍。
- 9 yrs
- 维护时间
- 4 engines
- 图表引擎
- 3+ frameworks
- 支持的前端框架
A SMALL EXPLORATION
同一组数据，换一种读法。
排序让比较更直接；数值标签让结果不依赖鼠标悬停。试着改变它们。
固定示例数据，非金融数据或实时 AI 输出。此示例说明设计选择，不运行项目模型。改变表达，保持数据不变。
PROJECT EXAMPLES
项目截图与示例
动态气泡散点图
移动端的金融指标气泡图，带时间轴和标签，数据可以动态切换。
金融词云
按金融语料里的词频和权重排布，截图来自组件库的示例。
词流图
用连续的流带，画出几个产业主题随时间的强弱和构成变化。
动态财务桑基图
把收入、成本、利润这些财务指标画成流向图，可以按年份播放。
01 / Context
要解决的问题
02 / System
系统怎样工作
- 01
协议层
组件的数据、配置、事件、主题和生命周期用同一套约定，业务代码不用直接碰底层的图表引擎。
- 02
组合层
同一张卡片内的图表可以联动，卡片之间保持独立。排查交互问题时，可以先从当前卡片查起。
- 03
交付层
用 Stencil 编译成原生 Web Components，再生成 React、Vue、Angular 的包装组件，组件和 AI 图表都可以按需加载。
03 / Decisions
设计中的取舍
区分基础组件与业务组件
通用的坐标轴、图例等部分放在基础组件中，特定业务另写组件，避免一个图表堆积太多配置项。
先检查生成的配置
AI 生成的配置不直接拿去渲染，先做结构校验和适配，失败了还有兜底。
04 / Our work
我们的职责
角色：项目和技术方案由我们负责，核心开发也参与了，主要做组件接口、跨框架接入和版本演进。
- 01设计跨框架组件架构，安排后续版本改造
- 02设计组件接口、卡片内通信、主题和引擎适配
- 03开发核心模块，排查疑难问题，评审业务接入方案
Web ComponentsTypeScriptStencilEChartsD3.js
查看公开项目