Echarts笔记——加载动画

最新推荐文章于 2024-04-24 22:50:52 发布

寧三一

最新推荐文章于 2024-04-24 22:50:52 发布

阅读量601

点赞数 1

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

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

版权

echarts 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

Echarts笔记——加载动画

在数据加载前，设置加载动画

myChart.showLoading()

服务器数据取得成功之后，隐藏加载动画

myChart.hideLoading()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>加载动画</title>
    <script src="../../js/echarts.min.js"></script>
    <script src="../../js/jquery.min.js"></script>
<!--    <script src="../../Data/scatterData.json"></script>-->
</head>
<body>
<div id="main" style="height: 800px;width: 1200px;"></div>


<script type="text/javascript">
    var Data = []

    // console.log(Data)
    var myChart = echarts.init(document.getElementById('main'))
    // 在数据加载前，设置加载动画
    myChart.showLoading()
    // 获取文件中的数据，遍历操作，二维数组（散点坐标）
    $.get("../../Data/scatterData.json",function (ec) {
        // console.log(ec)
        // 服务器数据取得成功之后，隐藏加载动画
        myChart.hideLoading()

        for (var i = 0; i < ec.length; i++) {
        var height = ec[i].height
        var weight = ec[i].weight
        var newArr = [height, weight]
        Data.push(newArr)  // push写入数据
            // console.log(Data)
    }
        var option = {
            title: {
                text: 'BMI散点图',
                left: '45%'
            },
            xAxis: {
                name: '身高（cm）',
                type: 'value',
                scale: true
            },
            yAxis: {
                name: '体重（kg）',
                type: 'value',
                scale: true
            },
            series: [
                {
                    type: 'effectScatter',      // 带涟漪动画的散点图
                    data: Data,
                    showEffectOn:'emphasis',    // 配置何时显示特效  'emphasis' 高亮（hover）的时候显示特效。
                    rippleEffect:{          // 涟漪特效相关配置
                        color:'#8e2c49',
                        period:2,       // 动画的周期，秒数
                        scale:10,      // 波纹的最大缩放比例
                        brushType:'stroke'      // 波纹样式
                    },
                    symbolSize: function (arg) {        //按条件设置散点大小函数
                        var height = arg[0] / 100
                        var weight = arg[1]
                        // console.log(weight)
                        //计算BMI
                        var BMI = weight / (height * height)
                        // console.log(BMI)
                        if (BMI >= 20) {
                            return 40
                        }
                        return 12
                    },

                    itemStyle: {
                        color: function (arg) {             // 按条件设置散点颜色函数
                            // console.log(arg)
                            //  console.log(arg)
                            var height = arg.data[0]/100            // 取arg对象里的data值
                            var weight = arg.data[1]
                            // console.log(height)
                            var BMI = weight / (height * height)
                            // console.log(BMI)
                            if (BMI >= 20) {
                                return 'red'
                            }
                            return 'green'
                        }
                    },
                }
            ]
        };
        myChart.setOption(option)
    })


</script>
</body>
</html>