Visualization Skill

Technology Stack

• pyecharts: Python wrapper for Apache ECharts
• Apache ECharts: JavaScript charting library
• Output: Self-contained HTML with embedded JS

Chart Types Reference

Bar Charts

python
1from pyecharts.charts import Bar
2from pyecharts import options as opts
3
4chart = Bar()
5chart.add_xaxis(labels)
6chart.add_yaxis("Series Name", values)
7chart.set_global_opts(
8    title_opts=opts.TitleOpts(title="Chart Title"),
9    tooltip_opts=opts.TooltipOpts(trigger="axis"),
10    xaxis_opts=opts.AxisOpts(axislabel_opts=opts.LabelOpts(rotate=45)),
11)

Line Charts

python
1from pyecharts.charts import Line
2
3chart = Line()
4chart.add_xaxis(dates)
5chart.add_yaxis("Actual", values, is_smooth=True)
6chart.add_yaxis("7-Day MA", moving_avg_7, is_smooth=True, linestyle_opts=opts.LineStyleOpts(type_="dashed"))

Pie Charts

python
1from pyecharts.charts import Pie
2
3chart = Pie()
4chart.add("", list(zip(labels, values)))
5chart.set_global_opts(legend_opts=opts.LegendOpts(orient="vertical", pos_left="left"))

Heatmaps

python
1from pyecharts.charts import HeatMap
2
3chart = HeatMap()
4chart.add_xaxis(x_labels)
5chart.add_yaxis("", y_labels, value=[[x, y, val], ...])
6chart.set_global_opts(
7    visualmap_opts=opts.VisualMapOpts(min_=0, max_=max_val),
8)

Scatter Plots (for anomalies)

python
1from pyecharts.charts import Scatter
2
3chart = Scatter()
4chart.add_xaxis(dates)
5chart.add_yaxis("Cost", costs, symbol_size=10)
6# Add anomaly markers with different color/size

Critical: Browser Compatibility

Always convert to lists for JavaScript:

python
1# CORRECT
2chart.add_xaxis(df['column'].tolist())
3chart.add_yaxis("Label", df['values'].tolist())
4
5# WRONG - causes rendering issues
6chart.add_xaxis(df['column'].values)  # numpy array
7chart.add_xaxis(df['column'])  # pandas Series

Theme Options

Available themes in pyecharts:

• macarons (default) - Colorful, professional
• shine - Bright colors
• roma - Muted, elegant
• vintage - Retro feel
• dark - Dark background
• light - Light, minimal

Usage:

python
1from pyecharts.globals import ThemeType
2chart = Bar(init_opts=opts.InitOpts(theme=ThemeType.MACARONS))

HTML Report Structure

python
1def generate_html_report(self, output_path: str, top_n: int = 10) -> str:
2    # Create all charts
3    charts = [
4        self.create_cost_by_service_chart(top_n),
5        self.create_cost_by_account_chart(),
6        # ... more charts
7    ]
8
9    # Combine into page
10    page = Page(layout=Page.SimplePageLayout)
11    for chart in charts:
12        page.add(chart)
13
14    # Render to file
15    page.render(output_path)
16    return output_path

Formatting Numbers

python
1# Currency formatting in tooltips
2tooltip_opts=opts.TooltipOpts(
3    trigger="axis",
4    formatter="{b}: ${c:,.2f}"
5)
6
7# Axis label formatting
8yaxis_opts=opts.AxisOpts(
9    axislabel_opts=opts.LabelOpts(formatter="${value:,.0f}")
10)

Common Issues & Solutions

Empty Charts

1. Check browser console for JS errors
2. Verify .tolist() on all data
3. Hard refresh (Ctrl+Shift+R)
4. Check data exists in HTML source

Chart Too Small

python
1init_opts=opts.InitOpts(width="100%", height="400px")

Labels Overlapping

python
1xaxis_opts=opts.AxisOpts(
2    axislabel_opts=opts.LabelOpts(rotate=45, interval=0)
3)

Legend Too Long

python
1legend_opts=opts.LegendOpts(
2    type_="scroll",
3    orient="horizontal",
4    pos_bottom="0%"
5)

Testing Visualizations

bash
1# Test chart creation
2uv run pytest tests/test_visualizer.py -v
3
4# Regenerate example report
5uv run pytest tests/test_examples.py -v -s
6
7# View in browser
8open examples/example_report.html