nealepetrillo ECharts v6 Visualization Skill
Create professional, accessible data visualizations using Apache ECharts v6.
Version: ECharts 6.x | Download: https://github.com/apache/echarts/releases
- Design guidelines (color palettes, chart selection, accessibility): see
references/design-principles.md - Detailed code examples (all chart types): see
references/chart-examples.md
Installation
Download 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).
Core Pattern
<!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>
CDN (Only if explicitly requested)
<script src="https://cdn.jsdelivr.net/npm/echarts@6/dist/echarts.min.js"></script>
Option Structure
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
};
Chart Types Reference
Cartesian Charts (use xAxis/yAxis)
line- Line charts, area charts (withareaStyle: {})bar- Vertical/horizontal bar charts (swap xAxis/yAxis types)scatter- Scatter plots, bubble charts (usesymbolSize)
Polar Charts
radar- Radar/spider charts (useradarinstead of axis)
Pie-like Charts (no axes needed)
pie- Pie, donut (withradius: ['40%', '70%'])sunburst- Hierarchical sunbursttreemap- Hierarchical treemaptree- Tree diagrams
Statistical
boxplot- Box and whisker plotscandlestick- Financial candlestick chartsheatmap- Heat maps (use withvisualMap)
Specialty
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 coordinates
For code examples of each type, see references/chart-examples.md.
Framework Integration
For vanilla JavaScript projects, use the core pattern above. Wrapper libraries are available for React and Vue with build systems.
React (with build system)
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 }} />;
}
Vue (with build system)
<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>
Styling
Responsive Charts
window.addEventListener('resize', () => chart.resize());
Dark Theme
const chart = echarts.init(container, 'dark');
Tooltip Formatting
tooltip: {
formatter: (params) => `${params.name}: ${params.value.toLocaleString()}`
}
Value Formatting
yAxis: {
axisLabel: {
formatter: (value) => `$${value / 1000}k`
}
}
Animations
option = {
animation: true,
animationDuration: 1000,
animationEasing: 'cubicOut',
};
ECharts Best Practices
- Always include
tooltipfor data exploration - Handle resize:
window.addEventListener('resize', () => chart.resize()) - Use
chart.showLoading()/chart.hideLoading()for async data - Tooltips supplement, not replace — key data should be visible without hover
For design best practices (color, accessibility, chart selection): see references/design-principles.md.
ECharts v6 Features
New in v6
- Chord Chart - Relationship networks with gradient coloring
- Beeswarm/Jitter -
jitterandjitterOverlap: falsefor dense scatter data - Dynamic Theme Switching -
chart.setTheme('dark')without reinitializing - Dark Mode Support - Auto-adapts to system preferences
- Broken Axis - For data with large magnitude differences
v6 Breaking Changes
// 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 };
Dynamic Theme Switching (v6)
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
mediaQuery.addEventListener('change', (e) => {
chart.setTheme(e.matches ? 'dark' : 'light');
});
Resources
- Documentation: https://echarts.apache.org/en/option.html
- Examples: https://echarts.apache.org/examples/en/index.html
- v6 Features: https://echarts.apache.org/handbook/en/basics/release-note/v6-feature
- v6 Upgrade Guide: https://echarts.apache.org/handbook/en/basics/release-note/v6-upgrade-guide
references/design-principles.md- Color palettes, chart selection, accessibility guidelinesreferences/chart-examples.md- Detailed code examples for all chart types- Paul Tol's Color Schemes: https://personal.sron.nl/~pault/