用途：当用户在 SGDS 应用中询问数据可视化、图表、图形或仪表盘时使用本技能。SGDS 不捆绑图表库，官方做法是使用 Apache ECharts，并套用 SGDS 调色板以保持视觉一致。
前置条件：先按 sgds-getting-started 完成基础项目设置；ECharts 需独立安装与配置，参见 https://echarts.apache.org/。
安装：ECharts 不包含在 @govtechsg/sgds-web-component 中，需单独安装：npm install echarts。随后按 ECharts 入门指南导入并初始化：import * as echarts from "echarts"; const chart = echarts.init(document.getElementById("chart")); chart.setOption(option);
SGDS 调色板：在图表 option 中设置 color 数组即可套用。以下为 SGDS 数据可视化基础令牌的原始十六进制值：--sgds-purple-600 #ac1cdb；--sgds-cyan-600 #00758d；--sgds-green-600 #0e7c3d；--sgds-blue-600 #0269d0；--sgds-yellow-600 #7e6917。
单图表（推荐）：直接在图表 option 中设置 color，ECharts 会按系列依次循环取色：const option = { color: ["#ac1cdb", "#00758d", "#0e7c3d", "#0269d0", "#7e6917"], // ... 其余图表配置 }。
全局主题（页面所有图表）：在应用启动时注册一次命名主题，之后初始化每个图表时传入主题名：echarts.registerTheme("sgds", { color: ["#ac1cdb", "#00758d", "#0e7c3d", "#0269d0", "#7e6917"] }); const chart = echarts.init(document.getElementById("chart"), "sgds");
限制与注意：ECharts 不由 SGDS 提供，须提示用户从 https://echarts.apache.org/ 单独安装；五个调色板颜色为取自基础令牌的固定十六进制值，不要在 ECharts 的 color 数组中引用 CSS 变量，因为 ECharts 无法解析 CSS 自定义属性；单图表在 option 中设置 color，多图表共用同一调色板则在应用启动时用 echarts.registerTheme() 注册一次；调色板顺序为紫 → 青 → 绿 → 蓝 → 黄，ECharts 会跨系列自动循环。其他收费、平台或效果信息暂未提供。