ECharts Master_办公效率 skill-PHP中文网

首页专区文章专题 AI工具学习编程手册

剧云中文短剧剧本制作平台 Seko AI短剧一键生成成片 updream 一键生成高质量推广成片 AniShort AI短剧协同制作平台

PHP MySQL jquery HTML CSS

ECharts Master

Polar Sponsor

爱发电赞助

.NET 9.0

立即下载

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

ECharts Master - 图表生成专家

功能概述

ECharts Master - 图表生成专家是一项面向实际任务的技能，主要用于专业的 ECharts 可视化图表生成技能；自动分析数据结构，选择最佳图表类型，生成可交互的 HTML 图表；

核心要点

智能图表选择 - 根据数据类型和业务场景自动推荐最佳图表；
本地化渲染 - 解决 ECharts CDN 被墙问题，使用本地资源；
HTTP 服务管理 - 自动启动 8082 端口服务预览图表；

使用与执行

专业配色方案 - 内置多套配色模。它将相关步骤、工具调用和结果整理方式集中到统一流程中，帮助使用者更快完成目标并减少重复操作。从功能定位来看，该技能强调把分散的操作要求整理成清晰、可复用的处理流程，使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。

结果检查与注意事项

实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数，再依据技能说明逐步执行；若输入条件不完整，应先补齐信息或采用保守配置，避免因错误假设导致结果偏离需求。执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期，并对异常提示、缺失字段和边界情况进行处理；涉及批量任务时，还应保存进度，避免中断后重复操作。

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]}

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

作者最新文章

如何找回云文档网盘入口？

如何对表格文件进行密码加密？

如何开启PPT“备注页”视图模式？详细方法

如何在表格中不显示水平滚动条？

如何在 DynamoDB 中安全实现并发更新与乐观锁机制

热门AI工具

豆包大模型

UP简历

Hot

二狗PPT

Hot

AionClaw

Hot

Seko

Hot

讯飞绘文

Hot

Loomy

Hot

DeepSeek

相关专题

echarts自适应大小设置

使用ECharts的自适应大小设置可以使图表能够根据不同屏幕尺寸和设备进行自适应。一种是使用resize事件，在图表容器大小改变时重新渲染图表;另一种是使用CSS样式，通过设置图表容器的宽度和高度为百分比值，使图表容器根据父元素的大小进行自适应。根据实际需求选择合适的方法，可以使图表在不同设备上都能够良好地显示和交互。

2023.09.13

3045