sgds-data-visualisation

SGDS 数据可视化模式

SGDS 不捆绑图表库。进行数据可视化时，请使用 Apache ECharts，并应用 SGDS 配色方案，使图表与设计系统保持视觉一致。

---

前提条件

• 按照 sgds-getting-started 完成基础项目设置。
• 独立安装并配置 ECharts，参见 https://echarts.apache.org/。

---

安装 ECharts

@govtechsg/sgds-web-component 不包含 ECharts。请单独安装：

npm install echarts

然后按照 ECharts 入门指南导入并初始化：

import * as echarts from "echarts";

const chart = echarts.init(document.getElementById("chart"));
chart.setOption(option);

---

ECharts 的 SGDS 配色方案

在图表配置中设置 color 数组，即可应用 SGDS 配色方案。以下值是 SGDS 数据可视化原始令牌对应的十六进制值：

令牌	十六进制值
--sgds-purple-600	#ac1cdb
--sgds-cyan-600	#00758d
--sgds-green-600	#0e7c3d
--sgds-blue-600	#0269d0
--sgds-yellow-600	#7e6917

单个图表（推荐）

直接在图表配置中设置 color。ECharts 会按顺序循环使用这些颜色为各个系列着色：

const option = {
  color: ["#ac1cdb", "#00758d", "#0e7c3d", "#0269d0", "#7e6917"],
  // ... rest of chart option
};

全局主题（页面上的所有图表）

在应用启动时注册一次命名主题，然后在初始化每个图表时传入主题名称：

import * as echarts from "echarts";

echarts.registerTheme("sgds", {
  color: ["#ac1cdb", "#00758d", "#0e7c3d", "#0269d0", "#7e6917"],
});

const chart = echarts.init(document.getElementById("chart"), "sgds");

---

面向 AI Agent

1. SGDS 不提供 ECharts——务必告知用户从 https://echarts.apache.org/ 单独安装。
2. 五种 SGDS 配色是取自原始令牌的固定十六进制值。不要在 ECharts 的 color 数组中引用 CSS 变量；ECharts 不会解析 CSS 自定义属性。
3. 对于单个图表，请在配置对象中设置 color。对于多个共用同一配色方案的图表，请在应用启动时使用一次 echarts.registerTheme()。
4. 配色顺序：紫色 → 青色 → 绿色 → 蓝色 → 黄色。ECharts 会自动为各个系列循环使用这些颜色。