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 (with areaStyle: {} )
-
bar
-
Vertical/horizontal bar charts (swap xAxis/yAxis types)
-
scatter
-
Scatter plots, bubble charts (use symbolSize )
Polar Charts
- radar
- Radar/spider charts (use radar instead of axis)
Pie-like Charts (no axes needed)
-
pie
-
Pie, donut (with radius: ['40%', '70%'] )
-
sunburst
-
Hierarchical sunburst
-
treemap
-
Hierarchical treemap
-
tree
-
Tree diagrams
Statistical
-
boxplot
-
Box and whisker plots
-
candlestick
-
Financial candlestick charts
-
heatmap
-
Heat maps (use with visualMap )
Specialty
-
gauge
-
Speedometer-style gauges
-
funnel
-
Funnel charts
-
sankey
-
Flow diagrams
-
graph
-
Network/relationship graphs
-
chord
-
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 tooltip for 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 - jitter and jitterOverlap: false for 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
-
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 guidelines
-
references/chart-examples.md
-
Detailed code examples for all chart types
-
Paul Tol's Color Schemes: https://personal.sron.nl/~pault/