echarts遷移圖動態載入

清風紫雪發表於2021-06-20

遷移圖

獲取遷移城市的經緯度

可以呼叫高德的介面,實現根據地名找尋經緯度的方法

#!/usr/bin/env python3
#-*- coding:utf-8 -*-
'''
利用高德地圖api實現地址和經緯度的轉換
'''
import requests

def geocode(address):
        parameters = {'address': address, 'key': 'your key'}
        base = 'http://restapi.amap.com/v3/geocode/geo'
        response = requests.get(base, parameters)
        answer = response.json()
        print(answer)
        if answer['geocodes']==[]:
            print("null")
        else:
            print(address + "的經緯度:", answer['geocodes'][0]['location'])
        str=answer['geocodes'][0]['location']
        list=str.split(',')
        newlist=[]
        for it in list:
            newlist.append(float(it))
        print(newlist)

if __name__=='__main__':
        #address = input("請輸入地址:")
        address = '邯鄲'
        geocode(address)

輸出對應的格式化形式,如下

    var myecharts = null;
    var geoCoordMap = {
  "東臺": [
    120.67086,
    32.765772
  ],
  "東海": [
    118.77406,
    34.528021
  ],
  "豐縣": [
    116.595391,
    34.693906
  ],
  "豐涇村": [
    120.557053,
    31.500551
  ],
  "雲龍區": [
    117.25156,
    34.253167
  ],
  "儀徵市": [
    119.184766,
    32.272258
  ],
  "六合區": [
    118.821401,
    32.322247
  ],
  "吳中區": [
    120.631898,
    31.264212
  ],
  "吳江": [
    120.640272,
    30.976323
  ],
  "大豐": [
    120.686455,
    33.241831
  ],
  "太倉": [
    121.125358,
    31.441361
  ],
  "宜興": [
    119.804423,
    31.362399
  ],
  "寶應縣": [
    119.360729,
    33.240392
  ],
  "宿城區": [
    118.242534,
    33.963029
  ],
  "宿豫區": [
    118.330782,
    33.946822
  ],
  "宿遷沭陽": [
    118.275198,
    33.963232
  ],
  "宿遷泗陽": [
    118.275198,
    33.963232
  ],
  "常州市": [
    119.973987,
    31.810689
  ],
  "常熟": [
    120.757951,
    31.649566
  ],
  "建鄴區": [
    118.731694,
    32.003552
  ],
  "開發區": [
    105.204857,
    37.514206
  ],
  "徐州": [
    117.284124,
    34.205768
  ],
  "徐州雲龍區": [
    117.25156,
    34.253167
  ],
  "揚州市開發區": [
    119.427323,
    32.337737
  ],
  "新沂市": [
    118.354537,
    34.36958
  ],
  "崑山": [
    120.974177,
    31.341479
  ],
  "棲霞區": [
    118.909246,
    32.096228
  ],
  "江都區": [
    119.569989,
    32.434672
  ],
  "沛縣": [
    116.937532,
    34.721656
  ],
  "沛縣*": [
    116.937532,
    34.721656
  ],
  "泉山區": [
    117.193805,
    34.244258
  ],
  "泗陽縣": [
    118.703038,
    33.72314
  ],
  "泰興": [
    119.92869,
    32.13105
  ],
  "浦口區": [
    118.627895,
    32.059093
  ],
  "淮陰區": [
    119.034725,
    33.631893
  ],
  "玄武區": [
    118.797861,
    32.048687
  ],
  "鹽都區": [
    120.153898,
    33.338094
  ],
  "睢寧縣": [
    117.941563,
    33.912598
  ],
  "蘇州高新區": [
    120.433904,
    31.329341
  ],
  "賈汪區": [
    117.466687,
    34.435506
  ],
  "賈汪區(全市)": [
    117.466687,
    34.435506
  ],
  "賈汪區(全市)": [
    117.466687,
    34.435506
  ],
  "連雲區": [
    119.338788,
    34.760249
  ],
  "邗江區": [
    119.398015,
    32.377528
  ],
  "邳州市": [
    118.012531,
    34.338888
  ],
  "金湖縣": [
    119.020585,
    33.025433
  ],
  "銅山區": [
    117.169421,
    34.1807
  ],
  "鎮江市": [
    119.425836,
    32.187849
  ],
  "阜寧": [
    119.8295,
    33.776645
  ],
  "靖江": [
    120.265519,
    31.99775
  ],
  "高淳區": [
    118.892085,
    31.328471
  ],
  "鼓樓區": [
    114.348307,
    34.788561
  ]
};

基礎圖表的設定

echarts遷移圖動態載入
var planePath = 'path://M.6,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705';

        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var dataItem = data[i];
                var fromCoord = geoCoordMap[dataItem[0].name];
                var toCoord = geoCoordMap[dataItem[1].name];
                if (fromCoord && toCoord) {
                    res.push([{
                        coord: fromCoord
                    }, {
                        coord: toCoord
                    }]);
                }
            }
            return res;
        };

        var color = ['#3ed4ff', '#ffa022', '#a6c84c','#d71345','#8552a1','#deab8a'];
        var series=[];

        var option = {
            backgroundColor: '#080a20',
            title: {
                left: 'left',
                textStyle: {
                    color: '#fff'
                }
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                top: 'bottom',
                left: 'right',
                data: [],
                textStyle: {
                    color: '#fff'
                },
                selectedMode: 'single'
            },
            geo: {
                map: 'china',
                zoom: 1.2,
                label: {
                    emphasis: {
                        show: false
                    }
                },
                roam: true,
                itemStyle: {
                    normal: {
                        areaColor: '#142957',
                        borderColor: '#0692a4'
                    },
                    emphasis: {
                        areaColor: '#0b1c2d'
                    }
                }
            },
            series: series
        };
View Code

進行非同步互動載入資料

其中data.one|two|three等的格式為:

echarts遷移圖動態載入
{
  "five": [
    [
      {
        "name": "連雲區"
      },
      {
        "name": "連雲區",
        "value": 200
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "高淳區",
        "value": 55
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "建鄴區",
        "value": 55
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "鼓樓區",
        "value": 55
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "浦口區",
        "value": 55
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "六合區",
        "value": 55
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "泰興",
        "value": 55
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "泗陽縣",
        "value": 55
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "阜寧",
        "value": 55
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "東臺",
        "value": 55
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "江都區",
        "value": 55
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "寶應縣",
        "value": 55
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "邗江區",
        "value": 55
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "儀徵市",
        "value": 55
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "徐州雲龍區",
        "value": 55
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "開發區",
        "value": 55
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "豐縣",
        "value": 55
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "沛縣*",
        "value": 55
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "銅山區",
        "value": 55
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "睢寧縣",
        "value": 55
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "新沂市",
        "value": 55
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "賈汪區",
        "value": 55
      }
    ]
  ],
  "four": [
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "金湖縣",
        "value": 200
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "連雲區",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "浦口區",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "泰興",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "鹽都區",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "寶應縣",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "鎮江市",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "常熟",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "開發區",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "豐縣",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "沛縣*",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "銅山區",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "睢寧縣",
        "value": 55
      }
    ]
  ],
  "name": [
    "草履蚧",
    "麻皮蝽",
    "扁刺蛾",
    "人紋汙燈蛾",
    "霜天蛾",
    "楊扇舟蛾"
  ],
  "one": [
    [
      {
        "name": "徐州"
      },
      {
        "name": "徐州",
        "value": 200
      }
    ],
    [
      {
        "name": "徐州"
      },
      {
        "name": "雲龍區",
        "value": 55
      }
    ],
    [
      {
        "name": "徐州"
      },
      {
        "name": "鼓樓區",
        "value": 55
      }
    ],
    [
      {
        "name": "徐州"
      },
      {
        "name": "泉山區",
        "value": 55
      }
    ],
    [
      {
        "name": "徐州"
      },
      {
        "name": "開發區",
        "value": 55
      }
    ],
    [
      {
        "name": "徐州"
      },
      {
        "name": "豐縣",
        "value": 55
      }
    ],
    [
      {
        "name": "徐州"
      },
      {
        "name": "沛縣",
        "value": 55
      }
    ],
    [
      {
        "name": "徐州"
      },
      {
        "name": "銅山區",
        "value": 55
      }
    ],
    [
      {
        "name": "徐州"
      },
      {
        "name": "睢寧縣",
        "value": 55
      }
    ],
    [
      {
        "name": "徐州"
      },
      {
        "name": "邳州市",
        "value": 55
      }
    ],
    [
      {
        "name": "徐州"
      },
      {
        "name": "新沂市",
        "value": 55
      }
    ],
    [
      {
        "name": "徐州"
      },
      {
        "name": "賈汪區(全市)",
        "value": 55
      }
    ]
  ],
  "six": [
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "金湖縣",
        "value": 200
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "泰興",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "靖江",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "江都區",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "徐州雲龍區",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "鼓樓區",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "泉山區",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "開發區",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "豐縣",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "沛縣",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "銅山區",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "睢寧縣",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "邳州市",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "新沂市",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "賈汪區(全市)",
        "value": 55
      }
    ]
  ],
  "three": [
    [
      {
        "name": "東海"
      },
      {
        "name": "東海",
        "value": 200
      }
    ],
    [
      {
        "name": "東海"
      },
      {
        "name": "泰興",
        "value": 55
      }
    ],
    [
      {
        "name": "東海"
      },
      {
        "name": "宿遷泗陽",
        "value": 55
      }
    ],
    [
      {
        "name": "東海"
      },
      {
        "name": "宿城區",
        "value": 55
      }
    ],
    [
      {
        "name": "東海"
      },
      {
        "name": "江都區",
        "value": 55
      }
    ],
    [
      {
        "name": "東海"
      },
      {
        "name": "雲龍區",
        "value": 55
      }
    ],
    [
      {
        "name": "東海"
      },
      {
        "name": "鼓樓區",
        "value": 55
      }
    ],
    [
      {
        "name": "東海"
      },
      {
        "name": "開發區",
        "value": 55
      }
    ],
    [
      {
        "name": "東海"
      },
      {
        "name": "豐縣",
        "value": 55
      }
    ],
    [
      {
        "name": "東海"
      },
      {
        "name": "沛縣",
        "value": 55
      }
    ],
    [
      {
        "name": "東海"
      },
      {
        "name": "銅山區",
        "value": 55
      }
    ],
    [
      {
        "name": "東海"
      },
      {
        "name": "睢寧縣",
        "value": 55
      }
    ],
    [
      {
        "name": "東海"
      },
      {
        "name": "新沂市",
        "value": 55
      }
    ]
  ],
  "two": [
    [
      {
        "name": "宜興"
      },
      {
        "name": "宜興",
        "value": 200
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "常州市",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "淮陰區",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "金湖縣",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "浦口區",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "六合區",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "玄武區",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "棲霞區",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "靖江",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "宿遷沭陽",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "宿城區",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "宿豫區",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "阜寧",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "大豐",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "東臺",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "江都區",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "寶應縣",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "揚州市開發區",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "鎮江市",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "常熟",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "吳中區",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "崑山",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "吳江",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "蘇州高新區",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "太倉",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "豐涇村",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "徐州",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "雲龍區",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "鼓樓區",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "泉山區",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "開發區",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "豐縣",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "沛縣",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "銅山區",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "睢寧縣",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "邳州市",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "新沂市",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "賈汪區(全市)",
        "value": 55
      }
    ]
  ]
}
View Code

獲取對應的格式的程式碼如下:

echarts遷移圖動態載入
import requests
def geocode(address):
    parameters = {'address': address, 'key': '3409090984aea93d6ee622ffa4097165'}
    base = 'http://restapi.amap.com/v3/geocode/geo'
    response = requests.get(base, parameters)
    answer = response.json()
    print(answer)
    #print(address + "的經緯度:", answer['geocodes'][0]['location'])
    if answer['geocodes']==[]:
        return "null"
    str = answer['geocodes'][0]['location']
    list = str.split(',')
    newlist = []
    for it in list:
        newlist.append(float(it))
    return newlist

#獲取14中昆蟲的分佈資訊場所的遷移圖
@app.route('/getinsectlocation',methods=['GET','POST'])
def getinsectlocation():
    db = MySqLHelper()
    insects=['草履蚧','麻皮蝽','扁刺蛾','人紋汙燈蛾','霜天蛾','楊扇舟蛾']
    names=['one','two','three','four','five','six']
    result={}
    ans={}
    data=[]
    i=0
    for it in insects:
        l=[]
        start=""
        f=0
        sql="select * from insect where name='"+it+"'"
        ret, count = db.selectall(sql=sql)
        area=""
        if count != 0:
            for row in ret:
                area = row[6]
        list=area.split('')
        for tt in list:
            if tt!="":
                if f == 0:
                    f = 1
                    start = tt
                l2=[]
                vas={"name":start}
                if start==tt:
                    vas2={"name":tt,"value":200}
                else:
                    vas2={"name":tt,"value":55}
                l2.append(vas)
                l2.append(vas2)
                l.append(l2)
        ans[names[i]]=l
        i=i+1
    ans["name"]=insects
    print(ans)
    return jsonify(ans)
View Code

前臺進行相應的資料展示

function fetchData() {

            $.post(
            "/getinsectlocation",
            function(data){

                [[data.name[0], data.one], [data.name[1], data.two], [data.name[2], data.three],[data.name[3], data.four],[data.name[4], data.five],[data.name[5], data.six]].forEach(function (item, i) {
                    //myecharts.hideLoading();
            series.push({
                name: item[0],
                type: 'lines',
                zlevel: 1,
                effect: {
                    show: true,
                    period: 6,
                    trailLength: 0.7,
                    color: '#fff',
                    symbolSize: 3
                },
                lineStyle: {
                    normal: {
                        color: color[i],
                        width: 0,
                        curveness: 0.2
                    }
                },
                data: convertData(item[1])
            }, {
                name: item[0],
                type: 'lines',
                zlevel: 2,
                effect: {
                    show: true,
                    period: 6,
                    trailLength: 0,
                    symbol: planePath,
                    symbolSize: 15
                },
                lineStyle: {
                    normal: {
                        color: color[i],
                        width: 1,
                        opacity: 0.4,
                        curveness: 0.2
                    }
                },
                data: convertData(item[1])
            }, {
                name: item[0],
                type: 'effectScatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                rippleEffect: {
                    brushType: 'stroke'
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        formatter: '{b}'
                    }
                },
                symbolSize: function (val) {
                    return val[2] / 8;
                },
                itemStyle: {
                    normal: {
                        color: color[i]
                    }
                },
                data: item[1].map(function (dataItem) {
                    return {
                        name: dataItem[1].name,
                        value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                    };
                })
            });
        });
            option.series = series;

            // 使用指定的配置項和資料顯示圖表
            myecharts.setOption(option);

            },
            "json"
        );

    }

主函式執行順序:

(function () {

        myecharts = echarts.init($('.map .geo')[0]);
        myecharts.setOption(option);
        //myecharts.showLoading();
        fetchData();

    })();

成果展示

 

 遇到的問題

一開始並沒有直接找出對應的city的經緯度值,而是呼叫高德的介面來獲取對應的值,再返回前端進行展示,發現請求量大之後,導致些許資料找不到,進而程式卡死

這樣前臺獲取不到資料,就無法展示;即使請求到前臺,經歷的時間也是使用者無法等待的。

解決方法:

因此,我就寫了一個測試介面,獲取到所有的昆蟲分佈城市的經緯度值,將其放到前端,並將一些找不到經緯度的city去掉,避免報錯

一頓流程走完後,資料就可以快捷的展示。

相關文章