Overview
This is a professional data visualization skill that generates directly runnable ECharts chart code based on data provided by the user.
Core Capabilities
1. Basic Chart Types
| Chart Type | Purpose | Example Scenario |
|---|---|---|
| Bar chart (bar) | Categorical data comparison | Sales comparison, market share |
| Line chart (line) | Trend changes | Growth trends, time series |
| Pie chart (pie) | Proportion distribution | Market share, cost composition |
| Scatter plot (scatter) | Correlation analysis | User distribution, price-sales relationship |
| Area chart (area) | Cumulative trends | Cumulative sales, market share changes |
2. Combination Charts
- Bar chart + line chart: Display values and growth rates (dual Y-axis)
- Multi-series bar chart: Comparison of data across multiple years
- Stacked bar chart: Display composition changes
- Multi-line chart: Trend comparison of multiple indicators
3. Advanced Features
- Dual Y-axis design (amount/percentage)
- Data label display
- Legend and title configuration
- Color theme customization
- Responsive layout
Input Format
When users provide data, the following formats are supported:
Format 1: Table form
年份 金额(百万) 增速
2015 578.31 57.80%
2016 773.13 33.70%
...
Format 2: JSON format
{
"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]}
]
}
Format 3: Natural language description
帮我画一个柱状图，数据如下：
2015年：578.31，增速57.80%
2016年：773.13，增速33.70%
...
Output Content
The generated ECharts code includes:
- Complete HTML file - Can be opened directly in a browser
- Configuration item explanation - Explanation of key configurations
- Usage instructions - How to use the generated chart
Chart Color Schemes
Business report color scheme
colors: ['#5470c6', '#ee6666', '#91cc75', '#fac858', '#73c0de']
Industry analysis color scheme
colors: ['#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#5470c6']
Related Commands
| Command | Purpose |
|---|---|
/generate-chart <数据> |
Generate ECharts charts based on data |
Reference Documentation
Usage examples
Example 1: Dual Y-axis combination chart
用户: 帮我画一个图表展示近10年市场规模和增速
数据：2015年578.31百万，增速57.80%...
AI: [生成 ECharts 双Y轴组合图代码]
Example 2: Multi-series bar chart
用户: 画一个柱状图对比2022-2024年各季度销售额
Q1: 100/120/150万
Q2: 150/180/200万
...
AI: [生成多系列柱状图代码]
Notes
- Data precision: Amount-type data retains 2 decimal places, percentages retain 1 decimal place
- Unit labeling: Clearly specify units in axis titles
- Color selection: Business reports are recommended to use blue tones and avoid overly bright colors
- Label density: Hide some labels when there are too many data points
- Mobile adaptation: Consider the display effect on mobile devices