How to add animation effects in ECharts

ECharts is an open source visualization chart library based on JavaScript. It provides a rich range of chart types and interactive functions and is widely used in the field of data visualization. Compared with static charts, dynamic charts are more vivid and intuitive and can better show changes and trends in data. Therefore, adding animation effects in ECharts can enhance the attractiveness and readability of charts, while also being more in line with the aesthetic needs of modern users.

This article will introduce how to add animation effects in ECharts and provide specific code examples for reference.

1. First of all, to enable animation effects in ECharts, you need to set animation to true or specific animation configuration items in the echarts.init() method, for example:

var myChart = echarts.init(document.getElementById('main'), null, {animation: true});
//或者
var option = {
    animation: {
        duration: 2000, //动画持续时间，单位为毫秒
        easing: 'elasticOut' //缓动函数类型
    },
    //其他配置项...
};
var myChart = echarts.init(document.getElementById('main'), null, option);

2. Next, you need to set animation-related parameters in the data and chart configuration items, for example:

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        animation: true, //启用x轴的动画效果
        axisLabel: {
            interval: 0
        }
    },
    yAxis: {
        type: 'value',
        animation: {
            duration: 2000, //y轴的动画持续时间，单位为毫秒
            easing: 'bounceOut' //缓动函数类型
        }
    },
    series: [{
        name: 'sales',
        type: 'bar',
        data: [120, 200, 150, 80, 70, 110, 130],
        animationDelay: function (idx) { //启用条形图的动画效果
            return idx * 500;
        }
    }]
};

3. Finally, you need to call the myChart.setOption(option) method in the JavaScript code , apply the chart configuration items to the chart and enable animation effects.

myChart.setOption(option);

4. In addition to the above basic animation configuration items, ECharts also provides a rich animation effect extension library, such as echarts-effect, echarts-gl and echarts-animation, etc. Use these extension libraries More complex and fantastic animation effects can be achieved.

The following is a complete ECharts animation sample code:

var myChart = echarts.init(document.getElementById('main'), null, {animation: true});

var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        animation: true,
        axisLabel: {
            interval: 0
        }
    },
    yAxis: {
        type: 'value',
        animation: {
            duration: 2000,
            easing: 'bounceOut'
        }
    },
    series: [{
        name: 'sales',
        type: 'bar',
        data: [120, 200, 150, 80, 70, 110, 130],
        animationDelay: function (idx) {
            return idx * 500;
        }
    }]
};

myChart.setOption(option);

Through the above example, we can easily add various animation effects in ECharts and turn the data visualization chart into More vivid and easier to understand. At the same time, we also need to pay attention to the rationality and practicality of animation effects to avoid being overly cool and affecting the user experience.

The above is the detailed content of How to add animation effects in ECharts. For more information, please follow other related articles on the PHP Chinese website!