61-design/echarts-beautifier-v2

ECharts Beautifier v2

Create interactive, report-ready ECharts HTML from data. Optimize for data analysts: first understand the analysis goal, then profile the data, choose the chart, choose the visual style, and deliver a self-contained HTML artifact with narrative context.

Do not turn this into an ECharts coding tutorial. The user should not need to write options, JavaScript, or CSS.

Workflow

Step 0: Analysis Brief

Infer the user's goal before selecting a chart:

• Trend: change over time, seasonality, spikes, decline, growth.
• Comparison: ranking, group difference, target completion, before/after.
• Composition: share, contribution, structure, mix shift.
• Distribution: spread, concentration, outliers, long tail.
• Conversion: funnel, drop-off, stage efficiency.
• Flow: source-target movement, path, migration, attribution.
• Positioning: two-metric tradeoff, quadrant, bubble comparison.
• Exception: anomaly, threshold breach, unusual segment.
• Summary: executive or operational narrative across multiple views.

If intent is clear, adapt automatically. If multiple intents would lead to materially different conclusions, ask one concise clarification question.

Step 1: Data Intake and Reliability

Prefer structured data in this order: Excel/CSV/JSON, copied table text, clear table screenshot, clear chart screenshot, blurry or unlabeled image.

For images, first extract structured rows and columns. If extraction is partial or approximate, label the result as estimated/incomplete and ask for original data when precision matters. Read references/image-data-input.md when the input is an image or screenshot.

Step 2: Data Profile

Identify: time grain, measures, dimensions, numerator/denominator, units, sample size, missing values, outliers, duplicate rows, totals, whether percentages are already computed, and whether ranking or share calculations are valid.

Step 3: Chart Route

Choose charts by analysis intent first and data structure second. Read references/chart-selection-matrix.md for the routing matrix when the chart choice is not obvious.

Always document the chart choice in the output with a short reason, for example: "Selected a horizontal ranking bar chart because the task compares many categories with long labels."

Step 4: Style Route

Pick one report style based on audience and usage:

• Business report: polished executive readout.
• Ops review: dense operational monitoring.
• Exploration: analyst workspace with filters and comparison.
• Dark screen: wallboard or command-center display.
• Embedded: compact HTML for docs, wikis, or lightweight sharing.

Read references/style-recipes.md before producing a themed HTML artifact.

Step 5: HTML Deliverable

Generate a self-contained HTML page using ECharts. Include:

• Title, subtitle, and analysis brief.
• Key findings or current best interpretation.
• Data source and reliability note.
• Chart selection reason.
• Interactive tooltip, legend/filter where useful, responsive layout, and mobile behavior.
• Necessary annotations for peaks, dips, thresholds, baselines, drop-offs, or quadrant labels.

Avoid decorative complexity that weakens reading speed. Make the chart useful before making it fancy.

Validation Checklist

Before delivering:

• The selected chart matches the stated analytical goal.
• Measures, denominators, units, and time grain are visible or documented.
• The HTML renders without console errors and resizes on mobile.
• Tooltips expose enough detail for analyst review.
• The narrative does not overclaim beyond the data reliability.
• All generated files are named clearly and placed in a new output folder when creating user deliverables.

Examples

Use the files in examples/ as compact routing examples:

• 01_trend_sales.json
• 02_ranking_channels.json
• 03_composition_category.json
• 04_funnel_conversion.json
• 05_heatmap_time_segment.json
• 06_sankey_user_flow.json
• 07_quadrant_strategy.json
• 08_image_table_retention.json