Echarts笔记——动画配置项

最新推荐文章于 2023-06-30 21:56:12 发布

寧三一

最新推荐文章于 2023-06-30 21:56:12 发布

阅读量3.6k

点赞数 1

分类专栏： echarts 文章标签：数据可视化 echarts js

本文链接：https://blog.csdn.net/weixin_51967583/article/details/115372279

版权

echarts 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

Echarts笔记——动画配置项

开启动画

animation : true # 是否开启动画，默认true

动画时长

animationDuration : 5000 # 单位毫秒，5秒，初始动画的时长，支持回调函数，可以通过每个数据返回不同的时长实现更戏剧的初始动画效果

缓动动画

animationEasing : " bounceOut " # 初始动画的缓动效果。不同的缓动效果可以参考

动画阙值

animationThreshold : 8 # 是否开启动画的阈值，当单个系列显示的图形数量大于这个阈值时会关闭动画。

<!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="../../js/echarts.js"></script>
    <script src="../../js/jquery.min.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>

寧三一

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
Echarts笔记——动画配置项

Echarts笔记——动画配置项开启动画animation : true # 是否开启动画，默认true动画时长animationDuration : 5000 # 单位毫秒，5秒，初始动画的时长，支持回调函数，可以通过每个数据返回不同的时长实现更戏剧的初始动画效果缓动动画animationEasing : " bounceOut " #初始动画的缓动效果。不同的缓动效果可以参考动画阙值...
复制链接

扫一扫