<< All versions
Skill v1.0.1
currentLLM-judged scan95/100majiayu000/claude-skill-registry/visualization
3 files
──Details
PublishedMay 14, 2026 at 11:40 PM
Content Hashsha256:8d1946ffa8fdf535...
Git SHA63c042456db3
Bump Typepatch
──Files
Files (1 file, 3.8 KB)
SKILL.md3.8 KBactive
SKILL.md · 179 lines · 3.8 KB
version: "1.0.1" name: visualization description: Knowledge about pyecharts chart creation, HTML report generation, and visualization best practices
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
from pyecharts.charts import Barfrom pyecharts import options as optschart = 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 Linechart = 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 Piechart = 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 HeatMapchart = 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 Scatterchart = Scatter()chart.add_xaxis(dates)chart.add_yaxis("Cost", costs, symbol_size=10)# Add anomaly markers with different color/size
Critical: Browser Compatibility
Always convert to lists for JavaScript:
python
# CORRECTchart.add_xaxis(df['column'].tolist())chart.add_yaxis("Label", df['values'].tolist())# WRONG - causes rendering issueschart.add_xaxis(df['column'].values) # numpy arraychart.add_xaxis(df['column']) # pandas Series
Theme Options
Available themes in pyecharts:
macarons(default) - Colorful, professionalshine- Bright colorsroma- Muted, elegantvintage- Retro feeldark- Dark backgroundlight- Light, minimal
Usage:
python
from pyecharts.globals import ThemeTypechart = Bar(init_opts=opts.InitOpts(theme=ThemeType.MACARONS))
HTML Report Structure
python
def generate_html_report(self, output_path: str, top_n: int = 10) -> str:# Create all chartscharts = [self.create_cost_by_service_chart(top_n),self.create_cost_by_account_chart(),# ... more charts]# Combine into pagepage = Page(layout=Page.SimplePageLayout)for chart in charts:page.add(chart)# Render to filepage.render(output_path)return output_path
Formatting Numbers
python
# Currency formatting in tooltipstooltip_opts=opts.TooltipOpts(trigger="axis",formatter="{b}: ${c:,.2f}")# Axis label formattingyaxis_opts=opts.AxisOpts(axislabel_opts=opts.LabelOpts(formatter="${value:,.0f}"))
Common Issues & Solutions
Empty Charts
- Check browser console for JS errors
- Verify
.tolist()on all data - Hard refresh (Ctrl+Shift+R)
- Check data exists in HTML source
Chart Too Small
python
init_opts=opts.InitOpts(width="100%", height="400px")
Labels Overlapping
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%")
Testing Visualizations
bash
# Test chart creationuv run pytest tests/test_visualizer.py -v# Regenerate example reportuv run pytest tests/test_examples.py -v -s# View in browseropen examples/example_report.html