Echarts地图坐标geoCoordMap后台生成动态获取的解决方案2

简介: Echarts地图坐标geoCoordMap后台生成动态获取的解决方案2

见解决方案《Echarts地图坐标geoCoordMap后台生成动态获取的解决方案》

这样的做法,肯定不是一个追求完美程序猿的做法,为此纠结半月以后推出了比较满意的解决方案。

实现原理:

    var data = [
        {name: '漏刻有时数据可视化', value: 200}
    ];
    var geoCoordMap = {
        '漏刻有时数据可视化': [121.554586, 29.813444]
    };
    var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value)
                });
            }
        }
        return res;
    };


这是目前官方标准的写法,是为了获取经纬度和地方的方便。但是在echarts中用的数据格式为:



一个合并的数组格式,为此解决方案应运而出,直接按照使用格式进行PUSH数组即可。

{name:"漏刻有时数据可视化",value:["121.55823312036928", "29.81378084601389", "200"]}


解决方案:

一、准备JSON接口API数据:

{
  "err": "",
  "res": "",
  "data": [
    {
      "areaId": "1",
      "areaName": "宁波商会·国贸中心",
      "areaLon": "121.554586",
      "areaLat": "29.813444",
      "areaValue": "200"
    },
    {
      "areaId": "2",
      "areaName": "中基大厦",
      "areaLon": "121.55823312036928",
      "areaLat": "29.81378084601389",
      "areaValue": "200"
    }
  ]
}

二、ajax获取数据并转为需要的格式?:

    var b = [];
    $.ajax({
        type: 'get',
        async: false,
        url: 'js/data.json',
        dataType: "json",
        success: function (res) {
            var a = res.data;
            for (var i = 0; i < a.length; i++) {
                b.push({
                    name: a[i].areaName,
                    value: [a[i].areaLon, a[i].areaLat, a[i].areaValue]
                })
            }
        },
        error: function (err) {
            console.log(err + "图表请求数据失败!");
        }
    });
    console.log(b);


Done!

相关文章
|
22天前
|
JSON JavaScript 定位技术
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
vue中使用echarts实现省市地图绘制,根据数据显示省市天气图标及温度信息
101 1
|
2月前
|
JavaScript 定位技术
echarts地图数据信息流向图效果
本文介绍了如何使用 ECharts 创建一个地图数据信息流向图效果,包括设置地理坐标、线条动画和流向图的实现方法,并通过 Vue.js 封装了一个可重用的 ECharts 地图组件。
124 23
echarts地图数据信息流向图效果
|
3月前
|
搜索推荐 前端开发 数据可视化
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
本文介绍了一个基于Django框架、协同过滤算法、ECharts数据可视化以及Bootstrap前端技术的酒店推荐系统,该系统通过用户行为分析和推荐算法优化,提供个性化的酒店推荐和直观的数据展示,以提升用户体验。
142 1
|
22天前
|
JSON JavaScript 前端开发
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
vue中使用echarts实现省市地图绘制,根据数据在地图上显示柱状图信息,增加涟漪特效动画效果
314 0
Echarts大屏开发|前后台通用场景
Echarts大屏开发|前后台通用场景
|
4月前
|
缓存 数据可视化 前端开发
使用ECharts实现动态数据可视化的最佳实践
使用ECharts实现动态数据可视化的最佳实践
|
5月前
|
JSON 数据可视化 JavaScript
Echarts地图实现:山东省会员活跃度
使用ECharts展示山东会员活跃度,通过散点图和地图结合,颜色对比强烈,背景深蓝(#020933)、点色明亮黄(#F4E925)。核心代码示例展示了散点、地图及特效散点系列配置。[点击下载](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89493130)代码和数据。
76 0
Echarts地图实现:山东省会员活跃度
|
4月前
echarts 热力图(中国地图版)
echarts 热力图(中国地图版)
142 0
|
4月前
echarts 高亮轮廓的中国地图
echarts 高亮轮廓的中国地图
185 0
|
26天前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
48 1