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\],
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去掉，避免报错
一顿流程走完后，数据就可以快捷的展示。
手机扫一扫
移动阅读更方便
你可能感兴趣的文章