图表设计技能

概述

我通过推荐合适的图表类型、为流行的图表库生成配置以及应用数据可视化最佳实践，帮助您设计有效的数据可视化方案。

我能做什么：

• 为您的数据推荐合适的图表类型
• 生成 ECharts/Chart.js 配置
• 设计仪表板布局
• 应用可视化最佳实践
• 创建 Excel 图表规范
• 建议配色方案和样式

我不能做什么：

• 直接渲染图表（请在工具中使用生成的配置）
• 从头创建自定义图表类型
• 直接访问您的数据

如何使用我

步骤 1：描述您的数据

请告诉我：

• 您拥有什么类型的数据
• 您想讲述什么故事
• 您的受众是谁（技术人员、高管、公众）
• 图表将展示在哪里（演示文稿、仪表板、报告）

步骤 2：获取建议

我会建议：

• 最适合您数据的图表类型
• 配置选项
• 配色方案
• 布局考虑因素

步骤 3：接收图表配置

我会提供：

• ECharts JSON 配置
• Chart.js 配置
• Excel 图表设置说明
• CSS/样式建议

图表选择指南

比较类图表

趋势类图表

分布类图表

部分与整体类图表

专业图表

决策树

您想展示什么？
│
├─ 比较
│   ├─ 项目之间 → 柱状图
│   ├─ 随时间 → 折线图
│   └─ 多系列 → 分组/堆叠柱状图
│
├─ 构成
│   ├─ 静态 → 饼图/环形图 (≤5项) 或矩形树图
│   ├─ 随时间 → 堆叠面积图
│   └─ 层级结构 → 矩形树图/旭日图
│
├─ 分布
│   ├─ 单个变量 → 直方图
│   ├─ 多个数据集 → 箱线图
│   └─ 两个变量 → 散点图
│
├─ 关系
│   ├─ 两个变量 → 散点图
│   ├─ 三个变量 → 气泡图
│   └─ 相关性矩阵 → 热力图
│
└─ 流量/流程
    ├─ 顺序阶段 → 漏斗图
    ├─ 转换关系 → 桑基图
    └─ 单一指标 → 仪表盘

输出格式

# 图表设计：[标题]

**数据类型**：[描述]
**目的**：[想讲述什么故事]
**推荐图表**：[图表类型]

---

## 图表配置

### ECharts

```javascript
const option = {
  title: {
    text: '图表标题',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['系列 1', '系列 2'],
    bottom: 10
  },
  xAxis: {
    type: 'category',
    data: ['一月', '二月', '三月', '四月', '五月', '六月']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '系列 1',
      type: 'bar',
      data: [120, 200, 150, 80, 70, 110]
    },
    {
      name: '系列 2',
      type: 'line',
      data: [100, 180, 160, 90, 80, 100]
    }
  ]
};

Chart.js

const config = {
  type: 'bar',
  data: {
    labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
    datasets: [{
      label: '系列 1',
      data: [120, 200, 150, 80, 70, 110],
      backgroundColor: 'rgba(54, 162, 235, 0.8)'
    }]
  },
  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: '图表标题'
      }
    }
  }
};

样式建议

调色板

• 主色：#5470c6
• 辅助色：#91cc75
• 强调色：#fac858
• 中性色：#73c0de

排版

• 标题：16px，粗体
• 标签：12px，常规
• 轴标签：11px，细体

已应用的最佳实践

1. [实践 1]
2. [实践 2]
3. [实践 3]

备选图表

如果此图表效果不佳，可以考虑：

1. [备选 1] – 适用于 [条件]
2. [备选 2] – 适用于 [条件]

---

## ECharts 常用配置

### 柱状图
```javascript
{
  xAxis: { type: 'category', data: categories },
  yAxis: { type: 'value' },
  series: [{
    type: 'bar',
    data: values,
    itemStyle: { color: '#5470c6' }
  }]
}

折线图

{
  xAxis: { type: 'category', data: categories },
  yAxis: { type: 'value' },
  series: [{
    type: 'line',
    data: values,
    smooth: true,
    areaStyle: {} // 用于面积图
  }]
}

饼图

{
  series: [{
    type: 'pie',
    radius: ['40%', '70%'], // 环形图
    data: [
      { value: 100, name: 'A' },
      { value: 200, name: 'B' }
    ]
  }]
}

散点图

{
  xAxis: { type: 'value' },
  yAxis: { type: 'value' },
  series: [{
    type: 'scatter',
    data: [[x1, y1], [x2, y2]],
    symbolSize: 10
  }]
}

调色板

专业风

#5470c6, #91cc75, #fac858, #ee6666, #73c0de, #3ba272, #fc8452, #9a60b4

冷色调

#1f77b4, #aec7e8, #17becf, #9edae5, #6baed6, #c6dbef, #08519c, #3182bd

暖色调

#ff7f0e, #ffbb78, #d62728, #ff9896, #e377c2, #f7b6d2, #bcbd22, #dbdb8d

无障碍色（色盲友好）

#0077BB, #33BBEE, #009988, #EE7733, #CC3311, #EE3377, #BBBBBB

最佳实践

数据墨水比例

• 移除不必要的网格线
• 最小化图表垃圾
• 让数据成为焦点

清晰度

• 清晰、描述性的标题
• 带单位的轴标签
• 适当的精度（不要太多小数）

比较

• 柱状图的 y 轴从零开始
• 为比较使用一致的尺度
• 对数据进行逻辑排序

颜色

• 有目的地使用颜色
• 考虑色盲用户
• 不要使用太多颜色（≤7 种）

交互

• 详情使用提示框
• 密集数据使用缩放
• 层级数据使用下钻

制作更好图表的技巧

1. 了解您的受众 – 技术人员 vs. 高管
2. 从问题开始 – 您想回答什么问题？
3. 选择合适的图表 – 不要强行将数据放入错误格式
4. 简化 – 少即是多
5. 清晰标注 – 假设观众没有上下文背景
6. 用真实用户测试 – 信息传达清晰吗？
7. 考虑可访问性 – 颜色、对比度、替代文本

局限性

• 无法直接渲染图表
• 配置可能需要根据特定工具进行调整
• 复杂的自定义可视化可能需要编写代码
• 实时数据需要额外设置

由 Claude Office Skills 社区构建。欢迎贡献！