Echarts通过ajax获取数据push数组为全局变量不断叠加的解决方案

简介: Echarts通过ajax获取数据push数组为全局变量不断叠加的解决方案


如果PUSH的数组为全局变量,尤其是定时刷新,会不断的进行数组叠加,影响数据的使用。

    function getToolTip0() {
        $.ajax({
            type: 'get',
            async: false,
            data: {
                //气泡信息阅读后,自动销毁;
            },
            url: './json/scatter.json',
            dataType: "json",
            success: function (result) {
                tipData0 = result.data;
                //当前气泡的数据;
                for (var i = 0; i < tipData0.length; i++) {
                    communityData0.push({
                        name: tipData0[i].areaName,
                        value: [tipData0[i].areaLon, tipData0[i].areaLat, tipData0[i].areaId]
                    })
                }
            },
            error: function (err) {
                console.log(err + "图表请求数据失败!");
            }
        });
        return tipData0, communityData0;
    }
    getToolTip0();


解决方案:

1、success返回时,清空数组,然后再PUSH.

      success: function (result) {
                tipData0 = result.data;
                //清空全局数组变量,防止多次刷新叠加;
                 communityData0 = [];
                //当前气泡的数据;
                for (var i = 0; i < tipData0.length; i++) {
                    communityData0.push({
                        name: tipData0[i].areaName,
                        value: [tipData0[i].areaLon, tipData0[i].areaLat, tipData0[i].areaId]
                    })
                }
            },

2、数组去重:

//全局变量数据对象去重函数;
function getArr(arr) {
    var result = [];
    var obj = {};
    for (var i = 0; i < arr.length; i++) {
        if (!obj[arr[i].name]) {
            result.push(arr[i]);
            obj[arr[i].name] = true;
        }
    }
    return result;
}
   var arr = [
        {
            "name": "营子社区",
            "value": [
                "120.388081",
                "36.192447",
                "1"
            ]
        },
        {
            "name": "华泰社区",
            "value": [
                "120.392194",
                "36.194542",
                "2"
            ]
        },
        {
            "name": "营子社区",
            "value": [
                "120.388081",
                "36.192447",
                "1"
            ]
        },
        {
            "name": "华泰社区",
            "value": [
                "120.392194",
                "36.194542",
                "2"
            ]
        }
    ];
    console.log(getArr(arr))


Done!

相关文章
|
1月前
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
48 3
|
2月前
|
Web App开发 前端开发 JavaScript
Python编程—Ajax数据爬取(一)
Python编程—Ajax数据爬取(一)
66 0
|
2月前
|
前端开发 NoSQL MongoDB
Python编程—Ajax数据爬取(二)
Python编程—Ajax数据爬取(二)
110 0
|
7月前
|
XML 前端开发 JavaScript
使用 AJAX 提升网页数据的动态交互
使用 AJAX 提升网页数据的动态交互
|
3月前
|
JSON 前端开发 数据格式
layui 穿梭框transfer组件 数据data用ajax来获取
layui 穿梭框transfer组件 数据data用ajax来获取
238 2
|
5月前
echarts 提示框异步获取数据 —— formatter 异步回调函数的使用
echarts 提示框异步获取数据 —— formatter 异步回调函数的使用
162 0
|
6月前
|
前端开发 JavaScript Java
Spring创建Ajax和接受Ajax数据-spring20
Spring创建Ajax和接受Ajax数据-spring20
|
6月前
|
PHP
php+ajax传file文件数据
php+ajax传file文件数据
54 0
N..
|
7月前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
75 1
|
7月前
|
XML 前端开发 JavaScript
jQuery中ajax如何使用
jQuery中ajax如何使用
96 0