ECharts Master

v1.0.0

ECharts 图表大师。根据用户数据和业务上下文，自动设计并生成专业的 ECharts 可视化图表。使用场景：(1) 用户提供表格/JSON/CSV 数据需要可视化，(2) 用户说"帮我做个图"、"画个图表"，(3) 需要将查询结果可视化展示。

⭐ 0· 519·2 current·2 all-time

byAndy Tien@linux2010

OpenClaw Prompt Flow

Install with OpenClaw

Best for remote or guided setup. Copy the exact prompt, then paste it into OpenClaw for linux2010/echarts-master.

Previewing Install & Setup.

Prompt PreviewInstall & Setup

Install the skill "ECharts Master" (linux2010/echarts-master) from ClawHub.
Skill page: https://clawhub.ai/linux2010/echarts-master
Keep the work scoped to this skill only.
After install, inspect the skill metadata and help me finish setup.
Use only the metadata you can verify from ClawHub; do not invent missing requirements.
Ask before making any broader environment changes.

Command Line

CLI Commands

Use the direct CLI path if you want to install manually and keep every step visible.

OpenClaw CLI

Bare skill slug

openclaw skills install echarts-master

ClawHub CLI

Package manager switcher

npx clawhub@latest install echarts-master

Security Scan

VirusTotal

Suspicious

View report →

OpenClaw

Benign

high confidence

✓

Purpose & Capability

Name/description promise generating ECharts visualizations; provided files (HTML template, design guide, local echarts.min.js) and SKILL.md instructions are directly relevant and sufficient for that purpose.

ℹ

Instruction Scope

Instructions stay within scope (analyze data, produce HTML, preview via a local HTTP server). Two items worth noting: (1) SKILL.md suggests starting a local HTTP server on port 8082 to preview files — this is normal but can expose files if run on a publicly reachable host; prefer binding to localhost. (2) It suggests using `npx http-server`, which may fetch/execute code from the npm registry at runtime — a standard convenience but a network action the user should be aware of.

✓

Install Mechanism

No install spec; skill is instruction-only but includes a local echarts.min.js (embedded library). No external download URLs or extract steps in the skill itself.

✓

Credentials

The skill does not request environment variables, credentials, or config paths. SKILL.md references only the skill's own assets directory and the working directory, which is appropriate for generating HTML previews.

✓

Persistence & Privilege

Skill is not always-enabled, does not request system-wide changes, and does not modify other skills or request elevated privileges.

Assessment

This skill appears coherent and focused on producing local ECharts HTML visualizations. Before installing or running: 1) If you want to preview charts, prefer running a server bound to localhost (for example: python3 -m http.server 8082 --bind 127.0.0.1) so files aren't exposed to the network. 2) Be aware that running `npx http-server` will fetch code from the npm registry if you don't already have it installed — only run it if you trust npm packages. 3) The skill bundles echarts.min.js locally (license header present); if you need higher assurance, inspect or verify the file (compare checksum to an official ECharts release). 4) The skill does not request credentials or access to other parts of your system, but it will read/write files in your working directory when generating charts — review generated files before serving them on any network-facing host.

✗

assets/echarts.min.js:45

Dynamic code execution detected.

Patterns worth reviewing

These patterns may indicate risky behavior. Check the VirusTotal and OpenClaw results above for context-aware analysis before installing.

Like a lobster shell, security has layers — review code before you run it.

latestvk97ewk1wtw4rt3vxcj5s16kfvx82tevm

519downloads

0stars

1versions

Updated 16h ago

v1.0.0

MIT-0

ECharts Master - 图表生成专家

专业的 ECharts 可视化图表生成技能。自动分析数据结构，选择最佳图表类型，生成可交互的 HTML 图表。

核心能力

智能图表选择 - 根据数据类型和业务场景自动推荐最佳图表
本地化渲染 - 解决 ECharts CDN 被墙问题，使用本地资源
HTTP 服务管理 - 自动启动 8082 端口服务预览图表
专业配色方案 - 内置多套配色模板，符合数据可视化最佳实践

工作流

1. 数据接收与分析

接收用户提供的数据（表格/JSON/CSV），分析：

数据维度（1 维/2 维/多维）
数据类型（数值/分类/时间序列）
数据量级（少量/中等/大量）
业务场景（对比/趋势/分布/关系）

2. 图表类型选择

根据数据分析结果选择图表类型：

场景	推荐图表	数据要求
趋势分析	折线图、面积图	时间序列数据
对比分析	柱状图、条形图	分类数据 + 数值
占比分析	饼图、环形图、漏斗图	分类数据 + 百分比
分布分析	直方图、箱线图、散点图	连续数值数据
关系分析	散点图、气泡图、关系图	多维数据
地理数据	地图、热力地图	地理位置 + 数值
多维数据	雷达图、平行坐标	3+ 维度数据
仪表展示	仪表盘、 gauge 图	单值/多值指标

详细图表选择指南见 references/chart-design.md

3. 生成 HTML 文件

使用模板生成完整的 HTML 文件：

# 读取模板
cp ~/.openclaw/skills/echarts-master/assets/echarts-base-template.html ./chart.html

# 或使用 Codex 直接生成完整 HTML

4. 启动 HTTP 服务预览

# 进入图表所在目录
cd /path/to/chart

# 启动 Python HTTP 服务（8082 端口）
python3 -m http.server 8082

# 或使用 node
npx http-server -p 8082

告知用户访问：http://localhost:8082/chart.html

输出格式规范

HTML 文件结构

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>图表标题</title>
  <!-- 本地 ECharts -->
  <script src="./echarts.min.js"></script>
  <style>
    #main { width: 100%; height: 600px; }
  </style>
</head>
<body>
  <div id="main"></div>
  <script>
    var chart = echarts.init(document.getElementById('main'));
    var option = { /* 配置项 */ };
    chart.setOption(option);
  </script>
</body>
</html>

图表配置规范

标题: 清晰描述图表内容
Tooltip: 启用，显示详细数据
Legend: 多系列时启用
Grid: 合理边距，避免标签截断
X/Y 轴: 明确标签、单位、刻度
颜色: 使用配色模板，避免默认色

配色方案

使用 references/chart-design.md 中的配色模板：

Default - ECharts 默认配色（安全选择）
Professional - 商务专业配色
Vibrant - 鲜艳活泼配色
Monochrome - 单色渐变配色
Colorblind-friendly - 色盲友好配色

常见问题处理

CDN 被墙问题

不要使用 在线 CDN 链接。必须：

使用本地 echarts.min.js 文件
或告知用户下载后本地打开

大数据量渲染

启用 sampling: 'lttb' 降采样
使用 large: true 优化模式
考虑分页或聚合展示

响应式适配

容器使用百分比宽度
监听 window.resize 事件
调用 chart.resize() 重绘

使用示例

示例 1：销售趋势图

用户：这是本月销售数据，帮我做个图

{"dates": ["1 日","5 日","10 日","15 日","20 日","25 日","30 日"], "sales": [12000, 15000, 18000, 22000, 19000, 25000, 28000]}

→ 生成折线图，展示趋势变化

示例 2：产品占比

用户：画个饼图展示各产品占比

{"products": ["产品 A", "产品 B", "产品 C", "产品 D"], "values": [35, 25, 25, 15]}

→ 生成环形图，显示百分比

示例 3：多系列对比

用户：对比三个部门的季度业绩

{"quarters": ["Q1", "Q2", "Q3", "Q4"], "dept1": [100, 120, 140, 160], "dept2": [80, 100, 110, 130], "dept3": [90, 110, 125, 145]}

→ 生成分组柱状图，多系列对比

Comments

Loading comments...