skills.rest
yuanhsunliu
yuanhsunliuCOMMUNITY
Explore all skills by this author →
GitHub

insightpulse-echarts-viz-system

Create ECharts themes and reusable templates for InsightPulse dashboards.

Updated Aug 23, 2026
Search Tags:#template#react#dashboard#visualization#theme#data-visualization#echarts
One-click install
npx skills add https://github.com/yuanhsunliu/dashboard-layout-editor-ui --skill insightpulse-echarts-viz-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: insightpulse-echarts-viz-system
Source: https://github.com/yuanhsunliu/dashboard-layout-editor-ui/tree/main/.copilot/skills/insightpulse-echarts-viz-system
Command: npx skills add https://github.com/yuanhsunliu/dashboard-layout-editor-ui --skill insightpulse-echarts-viz-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Standardizes and accelerates ECharts visualizations by aligning charts, themes, and templates with the InsightPulse design system so teams can ship consistent dashboards quickly.

Core Features & Use Cases

  • Chart selection & UX: Map business questions to chart types (trends, comparisons, composition) with clear defaults and minimal encodings.
  • Theme & design system: Define brand-aligned ECharts themes that support light and dark modes and accessible typography, plus theme JSON objects ready for loading.
  • Reusable chart templates: Maintain templates for KPI sparklines, exec trend panels, Top N comparisons, alert heatmaps, funnels, and Sankey views with typed data shapes.
  • Superset and plugin alignment: Ensure compatibility with Superset's ECharts presets and provide guidance for wrapping options into plugins or presets.
  • Performance & interactivity: Recommend smooth transitions, practical tooltips, zoom/brush for dense data, and avoid overcomplication.

Quick Start

Create and register an InsightPulse theme named 'insightpulse' and implement a reusable Top N bar template, then wire a dual-line executive panel into a React component using echarts-for-react.

Frequently Asked Questions about insightpulse-echarts-viz-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I standardize ECharts visualizations across multiple dashboards?▼

Define brand-aligned ECharts themes supporting light and dark modes using accessible typography and consistent color tokens. Load these theme JSON objects directly into your dashboard to maintain visual consistency across all chart components.

Can I use ECharts templates for KPI sparklines and executive trend panels in React?▼

Wrap ECharts option templates into Superset presets and plugins to ensure compatibility with existing ECharts presets. This approach provides guidance for integrating reusable chart templates directly into Superset dashboards and embedded UI panels.

What is the best way to map business questions to ECharts chart types?▼

Optimize ECharts interactivity by implementing smooth transitions, practical tooltips, and zoom or brush features for dense data. These performance recommendations help avoid overcomplication while maintaining responsive dashboard interactions.

Does this ECharts visualization system support dark mode themes?▼

Maintain reusable ECharts chart templates including KPI sparklines, executive trend panels, Top N comparisons, alert heatmaps, funnels, and Sankey views. Each template includes typed data shapes for consistent dashboard implementation.

Related Skills

Explore More Design & Creative Skills→
jgtolentinojgtolentino

insightpulse-echarts-viz-system

Standardize reusable ECharts themes and option templates for React and Superset dashboards.

Community
Advanced
nomos-guildnomos-guild
4

theming

Standardize Light, Dark, and Game themes with color tokens and conditional styling.

Official
Basic
ErixWongErixWong
17

echarts

Generate interactive ECharts visualizations with Python scripting.

Community
Intermediate
KraitsKraits

charts

Generate publication-ready charts and diagrams using matplotlib, seaborn, ECharts, D3.js, Mermaid, and Playwright+CSS.

Community
Advanced