ECharts 6.0 Released: A Complete Visual and Functional Overhaul

Version 6.0 of the open‑source ECharts library introduces a sweeping visual redesign, dynamic theme switching, intelligent scatter jitter, new chord diagrams, axis breakpoints, matrix coordinate systems, label overflow protection, upgraded mark layers, and stronger custom series, making both new and existing projects more powerful and easier to develop.

Full-Stack Cultivation Path
Full-Stack Cultivation Path
Full-Stack Cultivation Path
ECharts 6.0 Released: A Complete Visual and Functional Overhaul

Anyone who works with data visualization is likely familiar with ECharts, the open‑source charting library that has been maintained since 2013 and has accompanied developers for over a decade, covering basic bar and line charts to complex interactive dashboards.

ECharts 6.0 has been officially released. The update is not a minor patch but a substantial upgrade that benefits both longtime users and newcomers.

Visual Style Revamp: More Eye‑Catching Charts

ECharts 6.0 makes a large‑scale adjustment to default visual styles. The change goes beyond tweaking a few color values; the overall palette is more modern and the layout feels more comfortable, resulting in a cleaner look and clearer information hierarchy, especially for charts with many elements.

Dynamic Theme Switching Support

Previously changing a theme required calling setOption and often re‑rendering the chart. ECharts 6.0 adds a chart.setTheme() method that switches themes with a single line of code without redrawing the chart. Multiple predefined themes or a custom theme object can be supplied.

Scatter Plot Jitter: Dense Data No Longer Overlaps

When many points are close together, they can overlap and become indistinguishable. In 6.0, “intelligent jitter” automatically adjusts point positions while preserving original coordinates, improving readability. Enabling the jitterOverlap mode further reduces occlusion, producing a “beehive”‑like appearance.

Chord Diagram Added: Visualizing Complex Relationships

A new chart type, the chord diagram, is introduced to display relational data such as city migration, inter‑departmental fund flows, or social network interactions. ECharts renders the relationships using a circular layout with connecting lines, providing an intuitive view of “who is connected to whom”.

Axis Breakpoints: Handling Extreme Values Elegantly

Extreme outliers can compress the rest of the chart. ECharts 6.0 allows setting a “breakpoint” on an axis, displaying outliers in a separate interval while keeping the rest of the data visible, which is especially useful for monitoring and statistical analysis.

Matrix Coordinate System: Free‑Form Canvas Composition

ECharts 6.0 introduces a matrix coordinate system that lets developers split the canvas into multiple cells, each hosting a separate chart, similar to building blocks. This simplifies creating comparative analyses or dashboards that previously required multiple instances and manual layout, and the charts can be linked for coordinated interaction.

Label Overflow Protection: No More Manual Position Tweaks

On small screens or tight spaces, axis labels often overlap or exceed bounds. ECharts 6.0 adds an overflow‑prevention mechanism that automatically evaluates available space and adjusts label positions or angles, eliminating the need for manual adjustments.

Mark System Upgrade: Preventing Occlusion

Mark elements such as markPoint, markLine, and markArea can now set layer order (z and z2) to ensure they are not covered by the main graphic. The new relativeTo property also allows marks to snap to a target shape, making positioning more intuitive.

Custom Series Enhanced: More Flexible Writing and Interaction

The custom series feature receives several upgrades in 6.0:

Custom rendering logic can now be written as reusable components, avoiding code duplication.

Support for compoundPath enables drawing more complex composite shapes.

Adding tooltipDisabled lets developers control which graphics participate in tooltip interaction, improving overall user experience.

Final Thoughts

ECharts 6.0 is not a minor patch to the 5.x line but a comprehensive upgrade from visual design to core capabilities. Existing projects should upgrade cautiously due to compatibility changes, while new projects will find the overall development experience and capabilities significantly more comfortable.

Original Source

Signed-in readers can open the original source through BestHub's protected redirect.

Sign in to view source
Republication Notice

This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactadmin@besthub.devand we will review it promptly.

JavaScriptFrontend DevelopmentVisualizationData VisualizationEChartsChart Library
Full-Stack Cultivation Path
Written by

Full-Stack Cultivation Path

Focused on sharing practical tech content about TypeScript, Vue 3, front-end architecture, and source code analysis.

0 followers
Reader feedback

How this landed with the community

Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.