echarts 缓动动画

最新推荐文章于 2024-06-28 08:46:07 发布

张张养帅柴

最新推荐文章于 2024-06-28 08:46:07 发布

阅读量665

点赞数

文章标签： echarts javascript ecmascript

本文链接：https://blog.youkuaiyun.com/qq_44922719/article/details/127691704

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画配置项t</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.common.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>

<body>
    <div id="main" style="height: 800px;width: 1200px;"></div>

    <script>
        barData = [3324, 2352, 4522, 1469, 6379, 5315, 2793, 4324]
        barData1 = [2312, 3145, 6754, 8712, 3157, 1023, 5623, 8324]
        x_Data = ['a部门', 'b部门', 'c部门', 'd部门', 'e部门', 'f部门', 'g部门', 'h部门']


        var myChart1 = echarts.init(document.getElementById('main'))
        var option = {
            animation: true, // 1.默认开启动画
            animationDuration: function(ec) { // 2.动画时长
                // 越往后的数据时长越大
                return ec * 1000 // 毫秒，1秒，支持回调函数
            },
            animationEasing: "bounceOut", // 3.缓动动画
            animationThreshold: 15, // 4.动画周期（是否开启动画的阈值，当单个系列显示的图形数量大于这个阈值时会关闭动画。）

            title: [{
                text: '缓动动画',
                left: '40%',
                textStyle: {
                    color: 'red',
                    fontSize: 30,
                    fontFamily: "serif"
                }
            }],
            xAxis: {
                name: '部门',
                type: 'category',
                data: x_Data
            },
            yAxis: {
                name: '销量(件)',
                type: 'value',
                min: 0,
                max: 10000,
                interval: 2000
            },
            series: [{
                name: '销量柱状图',
                type: 'bar',
                data: barData,
                stack: '总量',
                barWidth: 25,
                markPoint: {
                    data: [{
                        type: 'max',
                        name: '最大值'
                    }, {
                        type: 'min',
                        name: '最小值'
                    }]
                },
                markLine: {
                    data: [{
                        type: 'average',
                        name: '平均值'
                    }],
                },

            }]
        };
        myChart1.setOption(option)
    </script>
</body>

</html>