In the recently released 5.1 version of Apache ECharts, new SVG base support for geographic coordinates and maps can be used to create cool visualizations flexibly. The legend component has been updated to look more like the data by default, creating a more intuitive relationship between the data and the legend.

In addition, we have also improved a lot of features in this version, let’s take a look!

SVG base for the geographic coordinate system and map series

Prior to this, Apache ECharts only supported geoJSON maps. In v5.1 of this release, the base images of the Geo Component (GEO) and Map Series (Map Series) are supported in SVG format and rendered consistently in Canvas and SVG.

In addition, SVG base maps, like geoJSON, support panning and zooming by default, providing a similar user experience.

SVG maps support the ability to highlight, focus, blur, label, and Tooltip specific areas, which can be easily enabled using ECharts configuration items. They enable users to clearly see the relationship between data, information and images.

With an SVG base, developers can create richer data visualizations on map Series.

Combined with Apache ECharts V5’s “Select” capability, you can make some functional applications like airplane and theater seat selection.

Like the geoJSON base map, other graph series can be drawn on the SVG base map, such as Scatter Series, Lines Series, Graph Series, etc. Here is an example of drawing a line series.

SVG base diagrams greatly enhance the expressivity of the diagrams ECharts can create. Download the latest version and try it out!

Legend of a comprehensive upgrade

A legend is usually located in a corner of a diagram to represent the style of the data and what it represents. Apache ECharts also supported legends in early versions.

In this release, we have completely updated the legend to make the default style of the legend more similar to the style of the data, including graphic color, shape, stroke and so on. In this way, users are more intuitively able to relate to the data.

Many of the legend styles support is set to ‘inherit’, which means that their values will inherit from the corresponding values of the series, making it easy to use the same values in the legend as in the series.

In addition, we have extended the interface of the Legend configuration TAB to allow developers to customize the style of the legend to be different from the series to meet the needs of specific scenarios.

Complete version record

v5.1.0

[Feature] [Geo] [map] Geographic coordinates and map series support using SVG data as the map source. #14571 (100PAH) [Feature] [legend] uses a more intuitive legend design by default, and the legend style is more consistent with the series style. #14497 (Ovilia) [Feature] [i18n] added Czech translation #14468 (JiriBalcar) [Feature] [animation] Add animation transition configuration for resize method. #14553 (pissang) [Feature] [effectScatter] Add clip to effectScatter. #14574 (SUSIWEN8) [Fix] [debug] Error message when tuning component missing #14568 (pissang) [Fix] [tooltip] Optimized tooltip performance #14246 (Plainheart) [Fix] [label] Fixes the error in which the label may appear below the graph. #14542 (plainheart) #14417 (susiwen8) [Fix] [pattern] Fix how the CanvasPatttern#setTransform method could be free of errors [Tooltip] Fix timeline formatting error in Tooltip #14471 (Ovilia) [Fix] [Symbol] All components that use symbol have added symbolOffset support. #14375 (plainheart) [Fix] [markArea] Fixed issue where the markArea background color might not be displayed. Close #13647 #14343 (Nick22nd) [Fix] [markLine] Fixed an issue where string format data in markLine could not be used. Close #14300 #14314 (Ovilia) [Fix] [select] Close #14293 #14413 (Leosxie) [Fix] [dataZoom] Fix dataZoom error. [Fix] [animation] #14388 (wf123537200) [Fix] [animation] #730 (Nick22nd) [Fix] [visualMap] Fix itemSymbol configuration not working Close #5719 #14243 (Ovilia) [Fix] [loading] Fix tag being overwritten by other graphics. #14191 (yufeng04) [Fix] [custom] Fixes the problem that custom series tag colors may not be correct. [Fix] [map] The map tag may not update with dragging when using labelLayout. #14578 (pissang) [Fix] [calendar] Fix for day label offset Close #11508 #13902 (Nick22nd) [Fix] [lines] Possible confusion with line animation. # 13638 (vially) [Fix] [type] exposed more convenient type of plug-in type generated file # 14289 (pissang) [Fix] [type] add LegendComponentOption. Icon type # 14263 (thesiti92) [Fix] Remove some legacy code use

v5.1.1

[Fix] [geo] Fixed tooltip display failure on geo components introduced in 5.1.0. #14767 (pissang) [Fix] [tooltip] Fixed tooltip placement error introduced in 5.1.0 when appendToBody was enabled. #14713 (plainheart) [Fix] [map] Fixed tooltip error on maps introduced in 5.1.0 #14704 (plainheart) [Fix] [pie] Fixed an issue where the label guide line labelLine on pie charts could still be highlighted after being changed from outside to inside. #14702 (villebro) [Fix] [type] Fixed TypeScript type errors in older versions introduced in 5.1.0. Close #14716 #14739 [Fix] [type] Fixed the type error in symbolOffset that was not optional. #14693 (villebro)