Echarts动画的使用

加载动画的显示与隐藏：

　　Echarts已经内置好了加载数据的动画，我们只需要在合适的时机显示或者隐藏即可。

　　显示加载动画：myCharts.showLoading()

　　隐藏加载动画：myCharts.hideLoading()

增量动画的使用：

　　不管是更改数据还是增加数据都要通过 myCharts.setOption 实现。

　　不用考虑数据到底产生了哪些变化。

　　Echarts会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。

动画的常用配置：（在option中进行配置）

（1）开启动画：animation:true;

（2）动画的时长：animationDuration:5000（以毫秒为单位）

// 可以对不同元素产生不同的动画时长的效果

// arg打印的是数字，平均值、最大值、最小值、横坐标

animationDuration:function(arg){

return 2000*arg

（3）缓动动画： animationEasing:'bounceOut',

（4）动画元素的阈值：animationThreshold:5,

　　单独形式的元素数量大于这个阈值时会关闭动画。

加载动画：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/echarts.min.js"></script>
    <script src="lib/jquery.min.js"></script>
</head>

<body>
    <div id="main" style="height:400px;"></div>
    <script type="text/javascript">
        var myCharts = echarts.init(document.getElementById('main'));
        myCharts.showLoading() // 获取数据之前显示加载动画
        $.get('./data/test_data.json', function (ret) {
            myCharts.hideLoading() // 获取数据之后隐藏加载动画
            var axisData = []
            for (var i = 0; i < ret.length; i++) {
                var height = ret[i].height
                var width = ret[i].weight
                var itemArr = [height, width]
                axisData.push(itemArr)
            }
            var option = {
                xAxis: {
                    type: 'value',
                    scale: true
                },
                yAxis: {
                    type: 'value',
                    scale: true
                },
                series: [{
                    type: 'effectScatter',
                    data: axisData,
                    symbolSize: function (arg) {
                        // console.log(arg)
                        var weight = arg[1]
                        var height = arg[0] / 100
                        // BMI > 28 肥胖
                        // BMI: 体重/ 身高*身高     kg  m
                        var bmi = weight / (height * height)
                        if (bmi > 28) {
                            return 20
                        }
                        return 5
                    },
                    itemStyle: {
                        color: function (arg) {
                            console.log(arg)
                            var weight = arg.data[1]
                            var height = arg.data[0] / 100
                            var bmi = weight / (height * height)
                            if (bmi > 28) {
                                return 'red'
                            }
                            return 'green'
                        }
                    },
                    showEffectOn: 'emphasis',
                    rippleEffect: {
                        scale: 10
                    }
                }]
            };
            myCharts.setOption(option)
        })
    </script>
</body>

</html>

更改数据、增加数据

    <script src="lib/echarts.min.js"></script>

    <div id="main" style="height:400px;border:1px solid black"></div>
    <button id="modify">修改数据</button>
    <button id="add">增加数据</button>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
        var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
        var option = {
            xAxis: {
                type: 'category',
                data: xDataArr
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                type: 'bar',
                data: yDataArr

            }]
        }
        // setOption可以设置多次
        // 新旧option的关系不是互相覆盖的关系
        // 我们在设置新的option的时候，只需要考虑到变化的部分就可以
        myChart.setOption(option);
        var btnModify = document.getElementById('modify')
        btnModify.onclick = function () {
            var newData = [68, 34, 76, 46, 86, 90, 89, 92]
            var option = {
                series: [{
                    type: 'bar',
                    data: newData

                }]
            }
            myChart.setOption(option);
        }
        var addBtn = document.getElementById('add')
        addBtn.onclick = function () {
            xDataArr.push('小米')
            yDataArr.push(99)
            var option = {
                xAxis: {
                    data: xDataArr
                },
                series: [{
                    data: yDataArr
                }]
            }
            myChart.setOption(option);
        }
    </script>

posted on 2020-12-29 17:26 稳住别慌阅读(8669) 评论(0) 编辑收藏举报