Apache ECharts is a javascript-based front-end visualization library. Since the project was opened in 2012, it has been polished for eight years. On NPM, Apache ECharts is seeing about 250,000 downloads per week, up 40% from the same time last year and 15 times more than three years ago.

On GitHub, more than 110,000 projects rely on Apache ECharts, and 143 developers contribute source code.

On the unofficial ECharts work platform, 60,000 users created 460,000 charts, and their creativity and imagination became ECharts’ best buyer’s show. Such a large user group, not only the recognition of ECharts reputation, but also makes ECharts become more powerful. Apache ECharts has a very flexible customization capability to meet the needs of various scenarios, and a variety of peripheral projects allow developers to use ECharts on different platforms. It is no exaggeration to say that you, who have used and even maintained ECharts on screen, made the release of Apache ECharts 5 possible.

In 2018, ECharts joined the Apache Software Foundation to start the incubation, and in December 2020, the project officially graduated from the incubation, becoming the Apache Software Foundation’s top project. Also in December, we released a big release. In this release, we’ve optimized the visual design, state management, performance, data processing, and other details around the narrative power of charts to help developers communicate their ideas. Furthermore, we have further optimized the internationalization and accessibility features, so that more people can equally understand the information conveyed by the chart. It’s worth noting that Apache ECharts 5 has been refactored in TypeScript, and TS type checking ensures robust code, making changes to many of these new features safer and more reliable.

The new Apache ECharts 5 features are divided into five modules: dynamic storytelling, visual design, interactive capabilities, development experience, and accessibility. Around these five modules, we made a comprehensive upgrade to Apache ECharts with fifteen features.

We’ll be publishing articles detailing these new features over the next week, so please follow this account to learn more about ECharts’s new features.

We’ll see how handy it can be to create charts with narrative power to convey a developer’s argument with the help of Apache ECharts 5.

Apache ECharts 5 uses its powerful animation capabilities to enable dynamic storytelling to help chart the evolution of data in a temporal dimension and immerse the user in the story conveyed by the chart.

(Storytelling)

In recent years, the expression forms of data-related information on the Internet, from text, graphic, interactive, long and short video, have been constantly explored in order to attract the audience’s attention and make people understand the information more quickly.

So recently, the word storytelling has become more and more popular.

Storytelling focuses on the ability to tell a story with data. By means of animation transformation and lens focus, the audience’s attention is guided and the information brought by data is conveyed.

Dynamic sorting bar chart

This example, for example, comes from the work shared by community developers, which shows the data of epidemic changes over time in each state of the United States.

This type of graph is called bar-racing, or we can translate it as ** “dynamic sorting histogram” **. It belongs to the more popular narrative method recently. It represents data with columns that change in length over time and also adjust the order in real time.

The dynamic sort bar chart can be implemented by referring to the tutorial on the official website.

Dynamic sort line chart

Echarts 5 has had a number of specific upgrades in order to bring more narrative power. In addition to supporting dynamic sorting of bar graphs, it also supports dynamic sorting of folded graphs.

More basic, however, is the extensive support for transition animations, such as tags and graphics, with smooth animations associated with various view changes so that the audience does not get lost in the changes.

Dynamic sort line chart implementation can see the official website example.

Label the animation

This is the transition animation of the tag text.

The green column has no label animation, and the corresponding label value changes as the column gradually changes. The blue column has a label animation, and as the column gradually changes, the label value increases to the target value.

To configure the label animation, simply turn on valueAnimation in the Label.

Tag animation can be used in a variety of tag supporting series, it is matched with graphic transition animation, bringing the continuity of the scene change. In addition to label animation, we support dynamically sorted transition animation on the bar chart.

You can notice some details:

• [Fixed] The green column will now have a longer animation when given a larger number.
• During the growth of the column, when just past the blue column, the two switch positions.

These animation details are carefully implemented.

To enable dynamic sorting on the bar chart, simply configure realtimeSort: true on the bar chart.

Line charts can also be animated to show dynamic temporal data. ECharts 5 has new support for the endLabel of line charts, also known as endLabel. When animation is turned on in endLabel, the data changes over time.

Custom series animation

If developers need more complex, personalized transitions, they can use custom series.

ECharts 5 adds extensive transition animation support to the custom family. It’s also easy to start by adding the Transition property and specifying which properties you want to animate. The custom set will automatically interpolate the values before and after these attributes change to create an animation effect.

For example, here are two graphics elements drawn with custom series, the one on the right has transition animation turned on, and the one on the left.

We can see, one is a gradient, one is a mutation. Notice also that you can render transitions not only on positions and shapes, but also on style properties such as colors.

With the custom series of transition animations, we can achieve smooth scene transitions. The figure below, called circle-packing, shows a tree of hierarchical data.

In the figure, the ability to drill down is implemented for this hierarchical data. When the driller click occurs, setOption is called to reset the data and start rendering. Because we use transition: ‘Shape’, we have a transition animation instead of a mutation.

The previous transition animation method is relatively simple, just specify which attributes need to transition. ECharts will automatically interpolate the value of the property for each frame of the animation based on its current value and target value. But what if there are more special scenarios where ECharts automatically interpolates and doesn’t meet the requirements?

For example, each spiral in the figure above is actually a polygon drawn with a series of points. If ECharts’ default interpolation is used to animate the data as it changes, each point of the helical polygon may “straight” towards the target point, not satisfying the requirements of spiral motion.

So, the custom series opens up frame-by-frame callbacks for this scenario, allowing developers to calculate the shape that should be displayed in each frame of the animation.

In this example, we first customize a few attributes, widthRadius startRadius endRadius, etc., and let ECharts animate the transitions for them, i.e., interpolate automatically for them. Then, in the During callback, which is the frame-by-frame callback of the animation, we get the interpolation results for the current frame of the above properties, and use them to calculate the shape of the current frame’s spiral. With the tag animation, this creates a spiral racing chart.

ECharts 5 also supports a more special class of animations on the custom set, deformation animations. As the name suggests, it is a transition animation that automatically changes from one shape to another.

The data items of the current post-scene are related, but the graphics are completely different. At the same time, deformation animation can produce more wonderful expression power.

The simplest configuration for deformation animation is to set the morph property on the corresponding graphic element in the return value of the renderItem of the custom series. In the example above, each data item may be represented as a country profile, or as a bar chart, scatter chart, or pie chart. The morphing animation brings them together.

Currently, deformation animations can only be used in custom series. With the subsequent accumulation of experience in his application, we may also achieve in the folding column cake and other conventional charts.

Deformation in the animation will also involves the kind of scene: when the old and new data, is not a one-to-one correspondence, but more than a pair, or to a more, for example, the old data is raw data, and the new data is raw data aggregation, or the result of clustering statistics such as operation, then the conversion animation is appropriate to use “split”, “merge” to express.

ECharts 5 supports “split” and “merge”, not only by setting morPH: true, but also by specifying which dimension of old data maps to which dimension of new data when setOption is performed. Echarts then uses the values in these two dimensions to work out whether the data items should be split and merged.

So far, we’ve covered quite a few feature upgrades. We believe that these characteristics can bring us more wonderful narrative production.

other

In addition to the animation capabilities used in dynamic storytelling described above, Apache ECharts 5 has been fully optimized in terms of detail design based on visualization theory. We will introduce the optimized design of Apache ECharts in the next article, please pay attention!

See the full new features

Viewing the Upgrade Guide