echarts迁移图动态加载

迁移图

获取迁移城市的经纬度

可以调用高德的接口，实现根据地名找寻经纬度的方法

#!/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
  ]
};

基础图表的设置

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
        };

进行异步交互加载数据

其中data.one|two|three等的格式为：

{
  "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
      }
    ]
  ]
}

获取对应的格式的代码如下：

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)

前台进行相应的数据展示

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],
                         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],
                         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去掉，避免报错

一顿流程走完后，数据就可以快捷的展示。