echarts之加载动画

加载动画

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

  • 显示加载动画
    mCharts.showLoading()

  • 隐藏加载动画
    mCharts.hideLoading()

demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>散列图</title>
</head>
<script src="lib/echarts.min.js"></script>
<script src="lib/jquery.min.js"></script>
<body>
<div style="height: 600px;width: 600px">

</div>


<script>
    //3。初始化echarts实力对象
    var mCharts = echarts.init(document.querySelector('div'));
    mCharts.showLoading();
    $.get('data/test_data.json', function (ret) {
        mCharts.hideLoading();
        var axisData = [];
        for (var i = 0; i < ret.length; i++) {
            var height = ret[i].height;
            var weight = ret[i].weight;

            var newArr = [height, weight];
            axisData.push(newArr);
        }

        console.log(axisData);

        var option = {
            xAxis: {
                type: 'value',
                scale: true
            },
            yAxis: {
                type: 'value',
                scale: true
            },
            series: [{
                // type:'scatter',
                type: 'effectScatter',
                showEffectOn: 'emphasis',// render emphasis
                rippleEffect: {
                    scale: 10
                },
                data: axisData,
                // symbolSize:30   //调整散列图中点的大小
                symbolSize: function (arg) {
                    console.log(arg)
                    var height = arg[0] / 100;
                    var weight = arg[1];

                    var bmi = weight / (height * height);
                    if (bmi > 28) {
                        return 20;
                    }
                    return 5;
                },
                itemStyle: {
                    color: function (arg) {
                        var height = arg.data[0] / 100;
                        var weight = arg.data[1];

                        var bmi = weight / (height * height);
                        if (bmi > 28) {
                            return 'red';
                        }
                        return 'blue';
                    }
                }
            }]
        }

        //5。将配置项设置给echarts实例对象
        mCharts.setOption(option);
    })

</script>
</body>
</html>
posted @ 2022-08-10 00:45  King-DA  阅读(1389)  评论(0)    收藏  举报