ECharts 图表生成
将结构化数据转换为可交互的 Apache ECharts 图表。默认交付单文件 HTML;用户在项目中开发时,按项目框架输出相应组件或 option。
工作流
- 识别数据来源、字段含义、图表目标和交付形态。
- 选择图表类型:
- 趋势:折线图、面积图、双轴组合图。
- 排名/对比:柱状图、条形图、堆叠柱图。
- 构成:饼图、环形图、旭日图、矩形树图。
- 相关性/分布:散点图、气泡图、箱线图、热力图。
- 漏斗/流程/关系:漏斗图、桑基图、关系图。
- 优先整理为
dataset.source,用encode映射字段。不要把同一份数据散落在多个series.data中,除非图表类型确实需要。 - 生成
option时包含:标题、图例、提示框、坐标轴、网格留白、数据缩放(长序列)、标签策略、颜色和导出工具箱。 - 独立 HTML 交付时运行:
node scripts/render_echarts_html.mjs config.json output.html
- 交付前用浏览器打开 HTML 验证:图表不空白、tooltip 可用、图例切换正常、中文不乱码、轴标签不严重重叠。
- 若用户需要图片或报告嵌入,先生成 HTML,再用浏览器截图导出 PNG/PDF。作为
html-report插件内置 skill 使用时,若浏览器或依赖缺失,先在插件根目录运行node scripts/bootstrap_html_report_deps.mjs。
配置格式
render_echarts_html.mjs 接受:
{
"title": "图表标题",
"subtitle": "可选副标题",
"width": 1200,
"height": 720,
"theme": "default",
"echartsUrl": "https://cdn.jsdelivr.net/npm/echarts@6/dist/echarts.min.js",
"option": {}
}
option 是标准 ECharts 配置对象。没有特殊要求时,使用 references/option-patterns.md 中的模板起步。
设计规则
- 默认使用浅色背景、清晰标题、紧凑网格和可读字号。
- 中文图表优先使用
PingFang SC, Microsoft YaHei, sans-serif。 - 类目超过 12 个时优先横向条形图或启用
dataZoom。 - 排名图默认按指标降序排序;时间序列默认按时间升序排序。
- 数值需格式化:百分比、金额、千分位和单位不要混淆。
- 不要用 3D 效果装饰普通业务数据。
- 对业务汇报类图表,颜色不超过 6 个主色;强调色只用于关键系列或异常值。
资源
scripts/render_echarts_html.mjs:将 EChartsoption包装为可打开的单文件 HTML。references/option-patterns.md:常见图表类型的 ECharts 配置模板和选择建议。references/official-links.md:官方文档入口,遇到不熟悉的图表类型时优先查阅。