mcpField
E
echarts

echarts

github.com/rebyteai-template数据与数据库17362 次安装19 周前更新
代码仓库

关于 echarts

echarts 是使用 pyecharts 和 Apache ECharts 创建数据可视化的技能，涵盖常见图表、展示选项以及独立 HTML 报告生成，适用于 Python 可视化开发。

主要功能

  1. 01创建柱状图、折线图、饼图、热力图和散点图
  2. 02配置主题、标签、图例和提示框
  3. 03导出为独立 HTML 可视化页面
  4. 04将数据转换为列表以适配浏览器渲染
  5. 05排查图表布局与渲染问题

适用场景

  1. 01制作数据分析报告图表
  2. 02可视化时间序列和移动平均值
  3. 03在散点图中标出异常值
  4. 04生成 HTML 可视化报告

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/rebyteai-template/rebyte-skills --skill echarts

安装后在 Claude Code 中输入/echarts确认已加载。

详细介绍

ECharts 技能

技术栈

  • pyecharts：Apache ECharts 的 Python 封装
  • Apache ECharts：JavaScript 图表库
  • 输出：嵌入 JS 的独立 HTML

图表类型参考

柱状图
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)),
)
折线图
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"))
饼图
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"))
热力图
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),
)
散点图（用于异常检测）
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

重要：浏览器兼容性

始终转换为列表以供 JavaScript 使用：

# CORRECT
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

主题选项

pyecharts 中可用的主题：

  • macarons（默认）——色彩丰富、专业
  • shine ——明亮的色彩
  • roma ——柔和、优雅
  • vintage ——复古风格
  • dark ——深色背景
  • light ——浅色、简约

用法：

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

HTML 报告结构

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

数字格式化

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

# Axis label formatting
yaxis_opts=opts.AxisOpts(
    axislabel_opts=opts.LabelOpts(formatter="${value:,.0f}")
)

常见问题与解决方案

图表为空
  1. 检查浏览器控制台中的 JS 错误
  2. 确认所有数据都调用了 .tolist()
  3. 强制刷新（Ctrl+Shift+R）
  4. 检查 HTML 源码中是否存在数据
图表太小
init_opts=opts.InitOpts(width="100%", height="400px")
标签重叠
xaxis_opts=opts.AxisOpts(
    axislabel_opts=opts.LabelOpts(rotate=45, interval=0)
)
图例太长
legend_opts=opts.LegendOpts(
    type_="scroll",
    orient="horizontal",
    pos_bottom="0%"
)

测试可视化效果

# Test chart creation
uv run pytest tests/test_visualizer.py -v

# Regenerate example report
uv run pytest tests/test_examples.py -v -s

# View in browser
open examples/example_report.html

评论

支持 Markdown