ECharts Liquid-fill Chart Tutorial

Liquid-fill is a type of charts that are suitable for displaying single percentage data. ECharts liquid-fill Chart provides fancy presentation of percentage data through single but power configurations.

Now, let’s learn how to use it.

Step 1: Including JavaScript Files

ECharts liquid-fill chart is a plugin for ECharts, which means it is not included in the full version downloaded from official site. This ensures those who don’t need liquid-fill charts can have a smaller package size. When use it, you need to include echarts-liquidfill.js after echarts.js, the former of which can be downloaded at GitHub.

<script src="echarts.js"></script>
<script src="echarts-liquidfill.js"></script>

<script>
// your code here
</script>

Step 2: Assign DOM Element As Chart Container

We need to assign a DOM element with width and height as chart container, just as we do with other chart types when using ECharts.

<div id="liquidfill-chart" style="width=100%; height = 400px"></div>

Use the DOM element to init chart.

var chart = echarts.init(document.getElementById('liquidfill-chart'));

Step 3: Configure The Chart

We set the chart series type to be 'liquidFill' to use it.

A simple configuration item may be:

var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3]
    }]
};
chart.setOption(option);

Thus, we can get the liquid-fill chart at the beginning of this post.

If the chart doesn’t display as expected, you may check the following things:

  • Whether JS files are loaded correctly;
  • Whether echarts variable exists;
  • Whether there are error messages in Console;
  • Whether the DOM element has width and height when init.

As you can see, we only assigned series type to be 'liquidFill', and set the data to be [0.6, 0.5, 0.4, 0.3], which generate the four waves in the chart. Other parameters are all by default.

Even without much configuration, you may get an elegant liquid-fill chart with default parameters. And if you have specific demands, you may easily acheive them with our configuration. Here is how to customerize it.

Step 4: Customerize The Chart

ECharts liquid-fill chart supports highly customizable configuration, including color, radius, amplitude, wave length, phase, period, wave direction, shape, wave animation and so on. Full configuration please refer to API. Here, we are going to introduces some important parameters.

Shape And Animation

Besides the default 'circle' shape, it also supports symbols like 'rect', 'roundRect', 'triangle', 'diamond', 'pin', and 'arrow'. Even more, you can set it to be an SVG path to get some fancy effect.

By setting direction to be 'left' or 'right', we may assign the moving direction of the wave. Or, we can set it to be 'none' for still.

Full configuration of the above is:

// run at: http://gallery.echartsjs.com/editor.html?c=xry0tUfcBe
var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3],
        radius: '40%',
        shape: 'diamond',
        center: ['25%', '25%']
    }, {
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3],
        direction: 'left',
        radius: '40%',
        shape: 'rect',
        center: ['75%', '25%']
    }, {
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3],
        radius: '40%',
        shape: 'roundRect',
        center: ['25%', '75%'],
        backgroundStyle: {
            borderColor: '#156ACF',
            borderWidth: 1,
            shadowColor: 'rgba(0, 0, 0, 0.4)',
            shadowBlur: 20
        },
        outline: {
            show: false
        },
        waveAnimation: false, // disable moving
    }, {
        type: 'liquidFill',
        data: [0.6, 0.5, 0.4, 0.3],
        radius: '50%',
        shape: 'pin',
        center: ['75%', '75%'],
        amplitude: 0,
        waveAnimation: false,
        outline: {
            show: false
        },
        backgroundStyle: {
            shadowColor: 'rgba(0, 0, 0, 0.4)',
            shadowBlur: 20
        }
    }]
};

Configuration For A Single Wave

Besides the configuration of the waves as introduced above, each single wave can have configuration to be overwritten.

In this example, we set the second wave to be red, and changed its moving direction.

var option = {
    series: [{
        type: 'liquidFill',
        data: [0.6, {
            value: 0.5,
            direction: 'left',
            itemStyle: {
                normal: {
                    color: 'red'
                }
            }
        }, 0.4, 0.3]
    }]
};

You may notice that an item of the previous data is a number, but for those to be configured, they are an object containing value.

Label

Label of liquid-fill charts have a nice effect that the text colors before wave and background are different. insideColor can be used to set the text color before wave, and color can be used to set the color before background.

var option = {
    series: [{
        type: 'liquidFill',
        radius: '80%',
        data: [0.5, 0.45, 0.4, 0.3],
        label: {
            normal: {
                textStyle: {
                    color: 'red',
                    insideColor: 'yellow',
                    fontSize: 50
                }
            }
        }
    }]
};

Label displays percentage data by default. If you want to set it otherwise, you may use formatter to do this. This is similar to other formatter of ECharts.

formatter can be a string, in which '{a}', '{b}', '{c}' will be replaced to be series name, data name, and data value.

For example:

var option = {
    series: [{
        type: 'liquidFill',
        name: 'Liquid Fill',
        data: [{
            name: 'First Data',
            value: 0.6
        }, 0.5, 0.4, 0.3],
        label: {
            normal: {
                formatter: '{a}\n{b}\nValue: {c}',
                textStyle: {
                    fontSize: 28
                }
            }
        }
    }]
};

Besides, formatter can also be a function. The following code provides the same effect as before.

formatter: function(param) {
    return param.seriesName + '\n'
        + param.name + '\n'
        + 'Value:' + param.value;
}

Conclusion

In this post, we introduced how to use ECharts liquid-fill charts. Hopefully, you can be inspired by it and create more interesting works.

Full document please refer to GitHub. And you may go to ECharts Gallery to view more liquid-fill charts.

ECharts Released v3.4, supporting three new chart types

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!