Back to Details

echarts

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

ECharts Skill

ECharts 技能指南

Technology Stack

技术栈

  • pyecharts: Python wrapper for Apache ECharts
  • Apache ECharts: JavaScript charting library
  • Output: Self-contained HTML with embedded JS
  • pyecharts: Apache ECharts的Python封装库
  • Apache ECharts: JavaScript图表库
  • 输出结果: 内嵌JS的独立HTML文件

Chart Types Reference

图表类型参考

Bar Charts

柱状图

python
from pyecharts.charts import Bar
from pyecharts import options as opts

chart = Bar()
chart.add_xaxis(labels)
chart.add_yaxis("Series Name", values)
chart.set_global_opts(
    title_opts=opts.TitleOpts(title="Chart Title"),
    tooltip_opts=opts.TooltipOpts(trigger="axis"),
    xaxis_opts=opts.AxisOpts(axislabel_opts=opts.LabelOpts(rotate=45)),
)
python
from pyecharts.charts import Bar
from pyecharts import options as opts

chart = Bar()
chart.add_xaxis(labels)
chart.add_yaxis("Series Name", values)
chart.set_global_opts(
    title_opts=opts.TitleOpts(title="Chart Title"),
    tooltip_opts=opts.TooltipOpts(trigger="axis"),
    xaxis_opts=opts.AxisOpts(axislabel_opts=opts.LabelOpts(rotate=45)),
)

Line Charts

折线图

python
from pyecharts.charts import Line

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

chart = Line()
chart.add_xaxis(dates)
chart.add_yaxis("Actual", values, is_smooth=True)
chart.add_yaxis("7-Day MA", moving_avg_7, is_smooth=True, linestyle_opts=opts.LineStyleOpts(type_="dashed"))

Pie Charts

饼图

python
from pyecharts.charts import Pie

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

chart = Pie()
chart.add("", list(zip(labels, values)))
chart.set_global_opts(legend_opts=opts.LegendOpts(orient="vertical", pos_left="left"))

Heatmaps

热力图

python
from pyecharts.charts import HeatMap

chart = HeatMap()
chart.add_xaxis(x_labels)
chart.add_yaxis("", y_labels, value=[[x, y, val], ...])
chart.set_global_opts(
    visualmap_opts=opts.VisualMapOpts(min_=0, max_=max_val),
)
python
from pyecharts.charts import HeatMap

chart = HeatMap()
chart.add_xaxis(x_labels)
chart.add_yaxis("", y_labels, value=[[x, y, val], ...])
chart.set_global_opts(
    visualmap_opts=opts.VisualMapOpts(min_=0, max_=max_val),
)

Scatter Plots (for anomalies)

散点图（用于异常检测）

python
from pyecharts.charts import Scatter

chart = Scatter()
chart.add_xaxis(dates)
chart.add_yaxis("Cost", costs, symbol_size=10)
python
from pyecharts.charts import Scatter

chart = Scatter()
chart.add_xaxis(dates)
chart.add_yaxis("Cost", costs, symbol_size=10)

Add anomaly markers with different color/size

添加不同颜色/尺寸的异常标记

undefined
undefined

Critical: Browser Compatibility

重点注意：浏览器兼容性

Always convert to lists for JavaScript:
python
undefined
务必将数据转换为列表格式以适配JavaScript：
python
undefined

CORRECT

正确写法

chart.add_xaxis(df['column'].tolist()) chart.add_yaxis("Label", df['values'].tolist())
chart.add_xaxis(df['column'].tolist()) chart.add_yaxis("Label", df['values'].tolist())

WRONG - causes rendering issues

错误写法 - 会导致渲染问题

chart.add_xaxis(df['column'].values) # numpy array chart.add_xaxis(df['column']) # pandas Series
undefined
chart.add_xaxis(df['column'].values) # numpy数组 chart.add_xaxis(df['column']) # pandas Series
undefined

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
from pyecharts.globals import ThemeType
chart = Bar(init_opts=opts.InitOpts(theme=ThemeType.MACARONS))
pyecharts中可用的主题：
  • macarons
    （默认）- 色彩丰富、专业风格
  • shine
    - 明亮鲜艳风格
  • roma
    - 柔和雅致风格
  • vintage
    - 复古风格
  • dark
    - 深色背景风格
  • light
    - 简约浅色风格
使用方式：
python
from pyecharts.globals import ThemeType
chart = Bar(init_opts=opts.InitOpts(theme=ThemeType.MACARONS))

HTML Report Structure

HTML报告结构

python
def generate_html_report(self, output_path: str, top_n: int = 10) -> str:
    # Create all charts
    charts = [
        self.create_cost_by_service_chart(top_n),
        self.create_cost_by_account_chart(),
        # ... more charts
    ]

    # Combine into page
    page = Page(layout=Page.SimplePageLayout)
    for chart in charts:
        page.add(chart)

    # Render to file
    page.render(output_path)
    return output_path
python
def generate_html_report(self, output_path: str, top_n: int = 10) -> str:
    # 创建所有图表
    charts = [
        self.create_cost_by_service_chart(top_n),
        self.create_cost_by_account_chart(),
        # ... 更多图表
    ]

    # 组合成页面
    page = Page(layout=Page.SimplePageLayout)
    for chart in charts:
        page.add(chart)

    # 渲染到文件
    page.render(output_path)
    return output_path

Formatting Numbers

数字格式化

python
undefined
python
undefined

Currency formatting in tooltips

提示框中的货币格式化

tooltip_opts=opts.TooltipOpts( trigger="axis", formatter="{b}: ${c:,.2f}" )
tooltip_opts=opts.TooltipOpts( trigger="axis", formatter="{b}: ${c:,.2f}" )

Axis label formatting

坐标轴标签格式化

yaxis_opts=opts.AxisOpts( axislabel_opts=opts.LabelOpts(formatter="${value:,.0f}") )
undefined
yaxis_opts=opts.AxisOpts( axislabel_opts=opts.LabelOpts(formatter="${value:,.0f}") )
undefined

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
  1. 检查浏览器控制台的JS错误
  2. 确认所有数据都使用了
    .tolist()
    转换
  3. 强制刷新页面（Ctrl+Shift+R）
  4. 检查HTML源码中是否包含数据

Chart Too Small

图表尺寸过小

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

Labels Overlapping

标签重叠

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

Legend Too Long

图例过长

python
legend_opts=opts.LegendOpts(
    type_="scroll",
    orient="horizontal",
    pos_bottom="0%"
)
python
legend_opts=opts.LegendOpts(
    type_="scroll",
    orient="horizontal",
    pos_bottom="0%"
)

Testing Visualizations

可视化测试

bash
undefined
bash
undefined

Test chart creation

测试图表创建

uv run pytest tests/test_visualizer.py -v
uv run pytest tests/test_visualizer.py -v

Regenerate example report

重新生成示例报告

uv run pytest tests/test_examples.py -v -s
uv run pytest tests/test_examples.py -v -s

View in browser

在浏览器中查看

open examples/example_report.html
undefined
open examples/example_report.html
undefined