ECharts 图表生成技能

概述

这是一个专业的数据可视化技能，根据用户提供的数据，生成可直接运行的 ECharts 图表代码。

核心能力

1. 基础图表类型

图表类型	用途	示例场景
柱状图 (bar)	分类数据对比	销售对比、市场份额
折线图 (line)	趋势变化	增长趋势、时间序列
饼图 (pie)	占比分布	市场份额、成本构成
散点图 (scatter)	相关性分析	用户分布、价格销量关系
面积图 (area)	累积趋势	累计销售、市场份额变化

2. 组合图表

• 柱状图 + 折线图：展示数值与增速（双Y轴）
• 多系列柱状图：多年份数据对比
• 堆叠柱状图：展示构成变化
• 多折线图：多指标趋势对比

3. 高级特性

• 双Y轴设计（金额/百分比）
• 数据标签显示
• 图例与标题配置
• 颜色主题定制
• 响应式布局

输入格式

用户提供数据时，支持以下格式：

格式一：表格形式

年份    金额(百万)    增速
2015    578.31       57.80%
2016    773.13       33.70%
...

格式二：JSON 格式

{
  "categories": ["2015", "2016", "2017"],
  "series": [
    {"name": "金额", "type": "bar", "data": [578.31, 773.13, 1118.42]},
    {"name": "增速", "type": "line", "data": [57.80, 33.70, 44.70]}
  ]
}

格式三：自然语言描述

帮我画一个柱状图，数据如下：
2015年：578.31，增速57.80%
2016年：773.13，增速33.70%
...

输出内容

生成的 ECharts 代码包含：

1. 完整 HTML 文件 - 可直接在浏览器打开
2. 配置项说明 - 关键配置解释
3. 使用说明 - 如何使用生成的图表

图表配色方案

商业报告配色

colors: ['#5470c6', '#ee6666', '#91cc75', '#fac858', '#73c0de']

行业分析配色

colors: ['#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#5470c6']

相关命令

命令	用途
/generate-chart <数据>	根据数据生成 ECharts 图表

参考文档

• 常用图表模板
• 配置项说明

使用示例

示例1：双Y轴组合图

用户: 帮我画一个图表展示近10年市场规模和增速
      数据：2015年578.31百万，增速57.80%...

AI: [生成 ECharts 双Y轴组合图代码]

示例2：多系列柱状图

用户: 画一个柱状图对比2022-2024年各季度销售额
      Q1: 100/120/150万
      Q2: 150/180/200万
      ...

AI: [生成多系列柱状图代码]

注意事项

1. 数据精度：金额类数据保留2位小数，百分比保留1位小数
2. 单位标注：在坐标轴标题中明确单位
3. 颜色选择：商业报告建议使用蓝色系，避免过于鲜艳
4. 标签密度：数据点过多时隐藏部分标签
5. 移动适配：考虑移动端显示效果