nealepetrillo/claude-skills-echart · Archived
Create and edit Apache ECharts v6 visualizations.
npx skills add nealepetrillo/claude-skills-echart --skill echart
This repository is archived — consider an actively maintained alternative.
You MUST use this when building, styling, debugging, or optimizing Apache ECharts charts in Jav…
1.4K installsBuild composable, responsive React charts with Recharts library.
1.0K installsKnowledge about pyecharts chart creation, HTML report generation, and visualization best practi…
359 installsCreate powerful interactive charts with Apache ECharts - balanced ease-of-use and customization
142 installsRelated neighbors and high-traction skills in the same topics — useful to compare before installing.
Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.
main
Files included with this skill beyond the listing page.
SKILL.md
6,785 B
SUMMARY.md
324 B
Create professional, accessible data visualizations using Apache ECharts v6.
Version: ECharts 6.x | Download: https://github.com/apache/echarts/releases
references/design-principles.mdreferences/chart-examples.mdDownload from GitHub releases: https://github.com/apache/echarts/releases
Files to download:
echarts.min.js - Full minified build (recommended)echarts.js - Full unminified build (for debugging)Place the file in your project (e.g., ./lib/echarts.min.js or ./vendor/echarts.min.js).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="./lib/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 800px; height: 500px;"></div>
<script>
const chart = echarts.init(document.getElementById('chart'));
const option = {
// Configuration goes here
};
chart.setOption(option);
window.addEventListener('resize', () => chart.resize());
</script>
</body>
</html><script src="https://cdn.jsdelivr.net/npm/echarts@6/dist/echarts.min.js"></script>The option object is the heart of ECharts configuration:
const option = {
title: { text: 'Chart Title', subtext: 'Subtitle', left: 'center' },
tooltip: { trigger: 'axis' }, // or 'item' for pie/scatter
legend: { data: ['Series 1', 'Series 2'], top: 'bottom' },
grid: { left: '10%', right: '10%', bottom: '15%', containLabel: true },
xAxis: { type: 'category', data: ['A', 'B', 'C'] },
yAxis: { type: 'value' },
series: [
{ name: 'Series 1', type: 'bar', data: [10, 20, 30] }
],
toolbox: { feature: { saveAsImage: {}, dataZoom: {} } },
dataZoom: [{ type: 'slider', start: 0, end: 100 }],
color: ['#4477AA', '#EE6677', '#228833', '#CCBB44', '#66CCEE', '#AA3377'] // Paul Tol Bright
};line - Line charts, area charts (with areaStyle: {})bar - Vertical/horizontal bar charts (swap xAxis/yAxis types)scatter - Scatter plots, bubble charts (use symbolSize)radar - Radar/spider charts (use radar instead of axis)pie - Pie, donut (with radius: ['40%', '70%'])sunburst - Hierarchical sunbursttreemap - Hierarchical treemaptree - Tree diagramsboxplot - Box and whisker plotscandlestick - Financial candlestick chartsheatmap - Heat maps (use with visualMap)gauge - Speedometer-style gaugesfunnel - Funnel chartssankey - Flow diagramsgraph - Network/relationship graphschord - Relationship networks with gradient arcs (v6)map - Geographic maps (requires geo data)parallel - Parallel coordinatesFor code examples of each type, see references/chart-examples.md.
For vanilla JavaScript projects, use the core pattern above. Wrapper libraries are available for React and Vue with build systems.
import ReactECharts from 'echarts-for-react';
function MyChart({ data }) {
const option = {
xAxis: { type: 'category', data: data.labels },
yAxis: { type: 'value' },
series: [{ type: 'bar', data: data.values }]
};
return <ReactECharts option={option} style={{ height: 400 }} />;
}<template>
<v-chart :option="option" style="height: 400px" />
</template>
<script setup>
import VChart from 'vue-echarts';
const option = {
xAxis: { type: 'category', data: ['A', 'B', 'C'] },
yAxis: { type: 'value' },
series: [{ type: 'bar', data: [10, 20, 30] }]
};
</script>window.addEventListener('resize', () => chart.resize());const chart = echarts.init(container, 'dark');tooltip: {
formatter: (params) => `${params.name}: ${params.value.toLocaleString()}`
}yAxis: {
axisLabel: {
formatter: (value) => `$${value / 1000}k`
}
}option = {
animation: true,
animationDuration: 1000,
animationEasing: 'cubicOut',
};tooltip for data explorationwindow.addEventListener('resize', () => chart.resize())chart.showLoading() / chart.hideLoading() for async dataFor design best practices (color, accessibility, chart selection): see references/design-principles.md.
jitter and jitterOverlap: false for dense scatter datachart.setTheme('dark') without reinitializing// v6 has new default theme. To use v5 color palette:
const v5Colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
const option = { color: v5Colors, /* ... */ };
// Rich text now inherits from plain label styles by default
// To restore v5 behavior:
const option = { richInheritPlainLabel: false };const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
mediaQuery.addEventListener('change', (e) => {
chart.setTheme(e.matches ? 'dark' : 'light');
});references/design-principles.md - Color palettes, chart selection, accessibility guidelinesreferences/chart-examples.md - Detailed code examples for all chart types