layout: post category: en cnUrl: ‘2017/01/13/new-release.html’ title: ‘ECharts Released v3.4, supporting three new chart types’ description: “We are releasing ECharts v3.4, supporting three new types of charts, namely, pictorial-bar charts, theme-river charts, and liquid-fill charts.” tags: [new release, extension, tutorial] image: feature: post/2017-01-13-new-release-theme-river.png

We are releasing ECharts v3.4, supporting three new types of charts, namely, pictorial-bar charts, theme-river charts, and liquid-fill charts. Pictorial-bar charts use images and shapes to represent data; theme-river charts are used to show the evolution of events or themes during a period; and liquid-fill charts are usually used to represent data in percentage.

Pictorial-bar Charts

Pictorial-bar chart is a type of bar chart that customized glyph (like images, SVG PathData) can be used instead of rectangular bar. This kind of chart is usually used in infographic.

Pictorial bar chart can only be used in rectangular coordinate with at least 1 category axis.

It can use the width or height of the graphic elements, or its number, color, opacity, and etc. to represent data.

In the example below, the mountains at the right side are two images, while the pile of paper are composed with multiple images. Pictorial bar chart will compute their height with their values, and make a nice visual effect with animation like this example do.

In ECharts Christmas Event Pages, we used pictorial-bar chart to make a chart comparing the speed of Santa's reindeer and other transportation methods. The following chart contains two series, the first of which contains vector images of transportation methods, and the other the mountains below. Pictorial-bar charts compute the position of each graphic element based on its value and put it below that position. symbolSize can be used to specify image size, and will automatically fill the bar when it is not given.

Besides, pictorial-bar charts can use the amount of the same graph element to represent data. The spirits chart of ECharts Christmas Event Pages is made with this type of pictorial-bar chart. In this way, pictorial-bar chart can be largely used in infographic.

From ECharts v3.4, pictorial-bar chart is included in full version in ECharts download page, so that you can use it by assigning series name to be pictorialBar without using an extra file.

You may refer to official examples for more information.

Theme-river Charts

Theme-river chart is a special flow graph which is mainly used to present the changes of an event or theme during a period.

The ribbon-shape river branches in different colors in theme river encode variable events or themes. The width of river branches encode the value of the original dataset.

What's more, the time attribute of the orinigal dataset would map to a single time axis.

Each series can be changing of market share of a product overtime, or the changing of population of a country, and etc.

You may refer to official examples for more information.

Liquid-fill Charts

Liquid-fill charts are very easy to use. To make the following chart, you only need to set series type to be liquidFill and assign values.

Corresponding code is:

option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3]

Liquid-fill charts have a great ability to be customized. You can assign each wave's attributes like wave length, period, phase, color, shadow, opacity, and etc. The shape of the ball can be circle, rectangular, triangle, or even a random shape with SVG PathData, giving it a great ability to make amazing charts.

The snowing chart in ECharts Christmas Event Pages is made with liquid-fill chart.

Unlike pictorial-bar chart or theme-river chart, liquid-fill chart is released as an ECharts plugin. This means, it is not included in the full version in ECharts download page, and you need to include echarts-liquidfill.js after echarts.js. You may find the latest liquid-fill chart at GitHub.

You may find more information at Liquid-fill GitHub repo, or visit Gallery for more application.

Other Updates

Please visit ECharts Gallery to create charts with ECharts, for sharing when asking others for help, or make your own portfolio. Let's make better visualization products in 2017!