Skill: linux2010/echarts-master (version 1.0.0)

--- name: echarts-master description: ECharts 图表大师。根据用户数据和业务上下文，自动设计并生成专业的 ECharts 可视化图表。使用场景：(1) 用户提供表格/JSON/CSV 数据需要可视化，(2) 用户说"帮我做个图"、"画个图表"，(3) 需要将查询结果可视化展示。 --- # ECharts Master - 图表生成专家 专业的 ECharts 可视化图表生成技能。自动分析数据结构，选择最佳图表类型，生成可交互的 HTML 图表。 ## 核心能力 - **智能图表选择** - 根据数据类型和业务场景自动推荐最佳图表 - **本地化渲染** - 解决 ECharts CDN 被墙问题，使用本地资源 - **HTTP 服务管理** - 自动启动 8082 端口服务预览图表 - **专业配色方案** - 内置多套配色模板，符合数据可视化最佳实践 ## 工作流 ### 1. 数据接收与分析 接收用户提供的数据（表格/JSON/CSV），分析： - 数据维度（1 维/2 维/多维） - 数据类型（数值/分类/时间序列） - 数据量级（少量/中等/大量） - 业务场景（对比/趋势/分布/关系） ### 2. 图表类型选择 根据数据分析结果选择图表类型： | 场景 | 推荐图表 | 数据要求 | |------|----------|----------| | 趋势分析 | 折线图、面积图 | 时间序列数据 | | 对比分析 | 柱状图、条形图 | 分类数据 + 数值 | | 占比分析 | 饼图、环形图、漏斗图 | 分类数据 + 百分比 | | 分布分析 | 直方图、箱线图、散点图 | 连续数值数据 | | 关系分析 | 散点图、气泡图、关系图 | 多维数据 | | 地理数据 | 地图、热力地图 | 地理位置 + 数值 | | 多维数据 | 雷达图、平行坐标 | 3+ 维度数据 | | 仪表展示 | 仪表盘、 gauge 图 | 单值/多值指标 | 详细图表选择指南见 [references/chart-design.md](references/chart-design.md) ### 3. 生成 HTML 文件 使用模板生成完整的 HTML 文件： ```bash # 读取模板 cp ~/.openclaw/skills/echarts-master/assets/echarts-base-template.html ./chart.html # 或使用 Codex 直接生成完整 HTML ``` ### 4. 启动 HTTP 服务预览 ```bash # 进入图表所在目录 cd /path/to/chart # 启动 Python HTTP 服务（8082 端口） python3 -m http.server 8082 # 或使用 node npx http-server -p 8082 ``` 告知用户访问：`http://localhost:8082/chart.html` ## 输出格式规范 ### 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](references/chart-design.md) 中的配色模板： - **Default** - ECharts 默认配色（安全选择） - **Professional** - 商务专业配色 - **Vibrant** - 鲜艳活泼配色 - **Monochrome** - 单色渐变配色 - **Colorblind-friendly** - 色盲友好配色 ## 常见问题处理 ### CDN 被墙问题 **不要使用** 在线 CDN 链接。必须： 1. 使用本地 `echarts.min.js` 文件 2. 或告知用户下载后本地打开 ### 大数据量渲染 - 启用 `sampling: 'lttb'` 降采样 - 使用 `large: true` 优化模式 - 考虑分页或聚合展示 ### 响应式适配 - 容器使用百分比宽度 - 监听 window.resize 事件 - 调用 `chart.resize()` 重绘 ## 相关资源 - **配色模板**: [references/chart-design.md](references/chart-design.md) - **HTML 模板**: [assets/echarts-base-template.html](assets/echarts-base-template.html) ## 使用示例 ### 示例 1：销售趋势图 用户：`这是本月销售数据，帮我做个图` ```json {"dates": ["1 日","5 日","10 日","15 日","20 日","25 日","30 日"], "sales": [12000, 15000, 18000, 22000, 19000, 25000, 28000]} ``` → 生成折线图，展示趋势变化 ### 示例 2：产品占比 用户：`画个饼图展示各产品占比` ```json {"products": ["产品 A", "产品 B", "产品 C", "产品 D"], "values": [35, 25, 25, 15]} ``` → 生成环形图，显示百分比 ### 示例 3：多系列对比 用户：`对比三个部门的季度业绩` ```json {"quarters": ["Q1", "Q2", "Q3", "Q4"], "dept1": [100, 120, 140, 160], "dept2": [80, 100, 110, 130], "dept3": [90, 110, 125, 145]} ``` → 生成分组柱状图，多系列对比

path: assets/echarts-base-template.html
content: <!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ECharts 图表</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
      background: #f5f7fa;
      padding: 20px;
    }
    
    .container {
      max-width: 1400px;
      margin: 0 auto;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
      padding: 24px;
    }
    
    .chart-header {
      margin-bottom: 20px;
    }
    
    .chart-title {
      font-size: 20px;
      font-weight: 600;
      color: #303133;
      margin-bottom: 8px;
    }
    
    .chart-subtitle {
      font-size: 14px;
      color: #909399;
    }
    
    #main {
      width: 100%;
      height: 600px;
    }
    
    .chart-footer {
      margin-top: 20px;
      padding-top: 16px;
      border-top: 1px solid #ebeef5;
      font-size: 12px;
      color: #909399;
      text-align: center;
    }
    
    /* 响应式适配 */
    @media (max-width: 768px) {
      body {
        padding: 10px;
      }
      
      .container {
        padding: 16px;
      }
      
      .chart-title {
        font-size: 18px;
      }
      
      #main {
        height: 400px;
      }
    }
  </style>
  <!-- ECharts 本地文件 -->
  <script src="./echarts.min.js"></script>
</head>
<body>
  <div class="container">
    <div class="chart-header">
      <h1 class="chart-title" id="chartTitle">图表标题</h1>
      <p class="chart-subtitle" id="chartSubtitle">图表副标题/说明</p>
    </div>
    
    <div id="main"></div>
    
    <div class="chart-footer">
      <span id="chartFooter">生成时间：<span id="generateTime"></span></span>
    </div>
  </div>
  
  <script>
    // 初始化图表
    var chart = echarts.init(document.getElementById('main'), null, {
      renderer: 'canvas',
      devicePixelRatio: window.devicePixelRatio || 1
    });
    
    // 图表配置 - 请在此处替换为实际的 option
    var option = {
      // ==================== 标题配置 ====================
      title: {
        show: false  // 使用自定义 HTML 标题，隐藏 ECharts 内置标题
      },
      
      // ==================== Tooltip 配置 ====================
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(255, 255, 255, 0.95)',
        borderColor: '#dcdfe6',
        borderWidth: 1,
        textStyle: {
          color: '#606266',
          fontSize: 13
        },
        padding: [12, 16],
        extraCssText: 'box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);'
      },
      
      // ==================== 图例配置 ====================
      legend: {
        data: [],  // 请填入图例数据
        top: 0,
        textStyle: {
          color: '#606266',
          fontSize: 13
        },
        itemWidth: 14,
        itemHeight: 14
      },
      
      // ==================== 网格配置 ====================
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '15%',
        containLabel: true
      },
      
      // ==================== X 轴配置 ====================
      xAxis: {
        type: 'category',
        data: [],  // 请填入 X 轴数据
        axisLine: {
          lineStyle: {
            color: '#dcdfe6'
          }
        },
        axisLabel: {
          color: '#606266',
          fontSize: 12,
          rotate: 0  // 标签旋转角度，长标签可设为 45
        },
        axisTick: {
          alignWithLabel: true
        }
      },
      
      // ==================== Y 轴配置 ====================
      yAxis: {
        type: 'value',
        axisLine: {
          show: false
        },
        axisLabel: {
          color: '#606266',
          fontSize: 12,
          formatter: '{value}'  // 可添加单位，如 '{value} %'
        },
        splitLine: {
          lineStyle: {
            color: '#f2f6fc',
            type: 'dashed'
          }
        }
      },
      
      // ==================== 配色方案 ====================
      color: [
        '#5470c6', '#91cc75', '#fac858', '#ee6666',
        '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'
      ],
      
      // ==================== 数据系列 ====================
      series: [
        {
          name: '系列 1',
          type: 'line',  // 可改为：bar, pie, scatter 等
          data: [],      // 请填入数据
          smooth: true,
          lineStyle: {
            width: 3
          },
          itemStyle: {
            borderWidth: 2
          },
          areaStyle: {
            opacity: 0.1
          }
        }
      ],
      
      // ==================== 响应式配置 ====================
      responsive: true,
      media: [
        {
          query: { maxWidth: 768 },
          option: {
            grid: {
              left: '5%',
              right: '5%',
              top: '20%'
            },
            legend: {
              top: '5%',
              type: 'scroll'
            }
          }
        }
      ]
    };
    
    // 设置配置项
    chart.setOption(option);
    
    // 监听窗口大小变化，自适应调整
    window.addEventListener('resize', function() {
      chart.resize();
    });
    
    // 更新生成时间
    document.getElementById('generateTime').textContent = new Date().toLocaleString('zh-CN');
    
    // ==================== 辅助函数 ====================
    
    // 更新图表标题
    function updateTitle(title, subtitle) {
      document.getElementById('chartTitle').textContent = title;
      if (subtitle) {
        document.getElementById('chartSubtitle').textContent = subtitle;
        document.getElementById('chartSubtitle').style.display = 'block';
      } else {
        document.getElementById('chartSubtitle').style.display = 'none';
      }
    }
    
    // 更新图表数据
    function updateChart(newOption) {
      chart.setOption(newOption, true);
    }
    
    // 导出图片
    function exportImage(filename = 'chart') {
      const url = chart.getDataURL({
        type: 'png',
        pixelRatio: 2,
        backgroundColor: '#fff'
      });
      const link = document.createElement('a');
      link.download = filename + '.png';
      link.href = url;
      link.click();
    }
    
    // 导出 HTML
    function exportHTML(filename = 'chart') {
      const html = document.documentElement.outerHTML;
      const blob = new Blob([html], { type: 'text/html' });
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.download = filename + '.html';
      link.href = url;
      link.click();
    }
  </script>
</body>
</html>


path: references/chart-design.md
content: # ECharts 图表设计指南

专业的图表设计参考，包含配色方案、字体配置、最佳实践。

---

## 目录

1. [配色方案](#配色方案)
2. [字体配置](#字体配置)
3. [图表类型详解](#图表类型详解)
4. [配置模板](#配置模板)
5. [最佳实践](#最佳实践)

---

## 配色方案

### 1. Default（ECharts 默认）

```javascript
const defaultColors = [
  '#5470c6', '#91cc75', '#fac858', '#ee6666', 
  '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'
];
```

**适用场景**: 通用场景，安全选择

---

### 2. Professional（商务专业）

```javascript
const professionalColors = [
  '#2c3e50', '#3498db', '#1abc9c', '#e74c3c', 
  '#f39c12', '#9b59b6', '#16a085', '#c0392b', '#2980b9'
];
```

**适用场景**: 商务报告、正式演示、企业数据

---

### 3. Vibrant（鲜艳活泼）

```javascript
const vibrantColors = [
  '#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', 
  '#ffeaa7', '#dfe6e9', '#fd79a8', '#a29bfe', '#00b894'
];
```

**适用场景**: 互联网产品、年轻用户、创意展示

---

### 4. Monochrome（单色渐变）

```javascript
const monochromeColors = [
  '#08306b', '#08519c', '#2171b5', '#4292c6', 
  '#6baed6', '#9ecae1', '#c6dbef', '#deebf7', '#f7fbff'
];
```

**适用场景**: 单一数据系列、热力图、渐变效果

---

### 5. Colorblind-Friendly（色盲友好）

```javascript
const colorblindColors = [
  '#0173b2', '#de8f05', '#029e73', '#d55e00', 
  '#cc78bc', '#009e60', '#ba3ac5', '#fd3c06', '#8c8c8c'
];
```

**适用场景**: 公共报告、无障碍设计、国际化产品

---

### 6. Dark Theme（深色主题）

```javascript
const darkColors = [
  '#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', 
  '#ffdb5c', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378ea'
];
```

**适用场景**: 深色模式、夜间展示、科技感界面

---

## 字体配置

### 中文字体栈

```javascript
const fontFamily = '-apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif';
```

### 字号规范

| 元素 | 字号 | 字重 |
|------|------|------|
| 主标题 | 18-22px | bold |
| 副标题 | 14-16px | normal |
| 轴标签 | 12-14px | normal |
| 图例 | 12-14px | normal |
| Tooltip | 12-14px | normal |

---

## 图表类型详解

### 折线图 (Line)

**适用**: 时间序列、趋势分析

```javascript
{
  xAxis: { type: 'category', data: dates },
  yAxis: { type: 'value' },
  series: [{
    type: 'line',
    data: values,
    smooth: true,        // 平滑曲线
    areaStyle: {},       // 填充区域（可选）
    lineStyle: { width: 3 }
  }]
}
```

---

### 柱状图 (Bar)

**适用**: 分类对比、排名展示

```javascript
{
  xAxis: { type: 'category', data: categories },
  yAxis: { type: 'value' },
  series: [{
    type: 'bar',
    data: values,
    barWidth: '60%',
    itemStyle: {
      borderRadius: [4, 4, 0, 0]
    }
  }]
}
```

---

### 饼图/环形图 (Pie)

**适用**: 占比分析、构成展示

```javascript
{
  series: [{
    type: 'pie',
    radius: ['40%', '70%'],  // 环形图
    // radius: '70%',         // 饼图
    data: pieData,
    label: {
      formatter: '{b}: {d}%'
    }
  }]
}
```

---

### 散点图 (Scatter)

**适用**: 关系分析、分布展示

```javascript
{
  xAxis: { type: 'value', name: 'X 轴' },
  yAxis: { type: 'value', name: 'Y 轴' },
  series: [{
    type: 'scatter',
    data: scatterData,
    symbolSize: 10
  }]
}
```

---

### 雷达图 (Radar)

**适用**: 多维对比、能力评估

```javascript
{
  radar: {
    indicator: radarIndicators,
    radius: '65%'
  },
  series: [{
    type: 'radar',
    data: radarData,
    areaStyle: {}
  }]
}
```

---

### 仪表盘 (Gauge)

**适用**: 指标展示、进度显示

```javascript
{
  series: [{
    type: 'gauge',
    progress: { show: true },
    detail: { valueAnimation: true },
    data: gaugeData
  }]
}
```

---

## 配置模板

### 基础配置模板

```javascript
const baseOption = {
  title: {
    text: '图表标题',
    left: 'center',
    textStyle: { fontSize: 18, fontWeight: 'bold' }
  },
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(255, 255, 255, 0.95)',
    borderColor: '#ddd',
    borderWidth: 1,
    textStyle: { color: '#333' }
  },
  legend: {
    data: ['系列 1', '系列 2'],
    top: '10%',
    textStyle: { fontSize: 12 }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    top: '20%',
    containLabel: true
  },
  color: ['#5470c6', '#91cc75', '#fac858', '#ee6666']
};
```

---

### 响应式配置

```javascript
const responsiveOption = {
  ...baseOption,
  responsive: true,
  media: [
    {
      query: { maxWidth: 768 },
      option: {
        title: { textStyle: { fontSize: 16 } },
        legend: { top: '8%' },
        grid: { top: '18%' }
      }
    }
  ]
};
```

---

## 最佳实践

### ✅ DO

1. **清晰的标题**: 标题应说明图表展示的核心信息
2. **合理的轴范围**: 避免数据压缩或过度留白
3. **一致的配色**: 同一报告中相同含义使用相同颜色
4. **必要的标签**: 轴标签、单位、图例缺一不可
5. **适当的留白**: grid 配置确保标签不被截断
6. **交互友好**: 启用 tooltip、legend 点击筛选

### ❌ DON'T

1. **避免 3D 效果**: 3D 图表难以准确读取数据
2. **避免过多颜色**: 单图表颜色不超过 8 种
3. **避免饼图切片过多**: 超过 7 项考虑其他图表
4. **避免双 Y 轴混淆**: 双 Y 轴需清晰标注
5. **避免默认配色滥用**: 根据场景选择配色方案
6. **避免信息过载**: 一个图表传达一个核心信息

---

### 数据可视化原则

1. **准确性优先**: 图表应准确反映数据，不误导
2. **简洁明了**: 去除不必要的装饰元素
3. **层次分明**: 重要信息突出，次要信息弱化
4. **一致性**: 同类图表保持相同风格
5. **可访问性**: 考虑色盲用户，提供文字说明

---

## 快速参考

### 图表选择决策树

```
数据类型？
├─ 时间序列 → 折线图/面积图
├─ 分类对比 → 柱状图/条形图
├─ 占比构成 → 饼图/环形图/堆叠图
├─ 分布情况 → 直方图/箱线图
├─ 关系分析 → 散点图/气泡图
├─ 地理数据 → 地图
├─ 多维数据 → 雷达图/平行坐标
└─ 单一指标 → 仪表盘/数字卡片
```

### 常用配置速查

| 配置项 | 常用值 | 说明 |
|--------|--------|------|
| smooth | true/false | 折线平滑 |
| stack | '总量' | 堆叠显示 |
| radius | '70%' / ['40%', '70%'] | 饼图半径 |
| barWidth | '60%' | 柱状图宽度 |
| symbolSize | 10 | 散点大小 |


Security scan verdicts — ClawScan: clean | static analysis: suspicious | VirusTotal: clean | SkillSpector: suspicious (MEDIUM)