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!

相关文章
|
23天前
echarts 柱状图/折线图x轴坐标间隔
echarts 柱状图/折线图x轴坐标间隔
12 0
|
5天前
|
数据采集 JSON 数据可视化
python_selenuim获取csdn新星赛道选手所在城市用echarts地图显示
python_selenuim获取csdn新星赛道选手所在城市用echarts地图显示
6 1
|
18天前
|
SQL JavaScript 分布式数据库
使用Vue+ ECharts进行动态图表展示
Vue是一个用于构建用户界面的渐进式JavaScript框架,可以轻松构建单页面应用程序(SPA)。ECharts是一个基于JavaScript的数据可视化库,可以通过简单的配置实现各种图表的展示和交互。
97 0
|
3月前
|
定位技术
使用Echarts实现地图展示
使用Echarts实现地图展示
|
3月前
|
JSON 程序员 定位技术
使用echarts+echarts-gl绘制3d地图,实现地图轮播效果
记录一下大屏开发中使用到的echarts-gl 大屏的页面根据需求前前后后改了几个版本了,地图的样式也改了又改 这里记录一下,因为echarts属性用到的比较多也比较杂,防止以后需要用到忘记了
|
4月前
|
JSON JavaScript 定位技术
Vue中使用echarts@4.x中国地图及AMap相关API的使用
Vue中使用echarts@4.x中国地图及AMap相关API的使用
168 0
Vue中使用echarts@4.x中国地图及AMap相关API的使用
|
4月前
|
定位技术
echarts显示地图
echarts显示地图
|
5月前
|
JavaScript
引入echarts时报错 “TypeError: Cannot read properties of undefined (reading ‘init‘)“的解决方案
引入echarts时报错 “TypeError: Cannot read properties of undefined (reading ‘init‘)“的解决方案
182 0
引入echarts时报错 “TypeError: Cannot read properties of undefined (reading ‘init‘)“的解决方案
|
5月前
|
定位技术
【ECharts学习】—实现中国地图
【ECharts学习】—实现中国地图
|
3月前
|
数据可视化
echarts图表坐标轴数据标签添加下划线
echarts图表坐标轴数据标签添加下划线
55 0