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!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章