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去掉，避免报错
一顿流程走完后，数据就可以快捷的展示。
echarts迁移图动态加载的更多相关文章
- Echarts使用及动态加载图表数据
Echarts使用及动态加载图表数据 官网:http://echarts.baidu.com/ 1.文档 2.实例 名词: 1.统计维度(说明数据) 维度就是统计致力于建立一个基于多方位统计(时间.地 ...
- ECharts使用—折线图动态加载
最近需求中用到折线图,单线条,多线交错,之前是散点图,用的是另一个 amcharts.js,这个文档也能找的到,回归早本次重点:ECharts 一.首先引入echarts.common.min.js文 ...
- Echarts使用及动态加载图表数据 折线图X轴数据动态加载
Echarts简介 echarts,缩写来自Enterprise Charts,商业级数据图表,一个纯JavaScript的图表库,来自百度...我想应该够简洁了 使用Echarts 目前,就官网的文 ...
- echarts一个页面动态加载两张不同图表数据
参考 http://www.stepday.com/topic/?877 http://blog.csdn.net/for_china2012/article/details/45167161 // ...
- echarts系列之动态加载数据
1.echarts学习前言 最近接触到echarts,发现数据可视化真的是魅力无穷啊,各种变幻的曲线交错,以及‘曼妙’的动画效果真是让人如痴如醉! 下面就来一起欣赏她的美... “ ECharts是中 ...
- 百度echarts地图扩展动态加载geoCoord
var data={}; for(var i=0;i<result.length;i++){ data[(""+result[i].name+"")]=e ...
- eCharts动态加载各省份的数据
假如从数据库读出以下数据,如何将数据展示在地图之上 1.部门的名称数据: List deptname=[联通事业部-上海联通项目组, 联通事业部-河南联通项目组, 联通事业部-贵州联通项目组, 联通事 ...
- echarts官网上的动态加载数据bug被我解决。咳咳/。
又是昨天,为什么昨天发生了这么多事.没办法,谁让我今天没事可做呢. 昨天需求是动态加载数据,画一个实时监控的折线图.大概长这样. 我屁颠屁颠的把代码copy过来,一运行,caocaocao~bug出现 ...
- Echarts动态加载后台数据
注意:1.用Ajax请求获取后台数据 2.Echarts只能处理Json数据 后台Controller:根据业务需求不同而返回不同数据,我前台要循环遍历Echarts的series进行数据添加,所以后 ...
随机推荐
- java随堂笔记
JAVA 1只要是字符串,必然就是对象. 2API文档的基本使用 3如何创建字符串: a直接赋值双引号,也是一个字符串对象. b可以通过new关键字来调用String的构造方法 public Stri ...
- InnoDB解决幻读的方案——LBCC&MVCC
最近要在公司内做一次技术分享,思来想去不知道该分享些什么,最后在朋友的提示下,准备分享一下MySQL的InnoDB引擎下的事务幻读问题与解决方案--LBCC&MVCC.经过好几天的熬夜通宵,终 ...
- 【近取 Key】Alpha - v1.0 测试报告
Bug 前端 主页.登录.注册.导航 bug说明 修复方法 修复结果 导航栏有时不显示用户姓名 修改用户信息的获取逻辑与存储方式 成功 展示词图界面导航栏居右失败 在组件中增加自适应相关设置 成功 用 ...
- Promise解析（待完成）
Promise是一种异步操作的解决方案,将写法复杂的传统的回调函数和监听事件的异步操作,用同步代码的形式表达出来.避免了多级异步操作的回调函数嵌套. 1.主要用于异步计算 2.可以将异步操作队列化,按 ...
- 深度理解Python迭代器
迭代器 迭代是什么 迭代指的是一个重复的过程,每次重复都必须基于上一次的结果而继续,单纯的重复并不是迭代,如Python中的for循环就是一个非常好的迭代例子. for item in range(1 ...
- 解决nohup: 忽略输入并把输出追加到"nohup.out"或者nohup: 忽略输入重定向错误到标准输出端
nohup启动脚本的时候,没有指定输出路径,默认使用当前目录的nohup.out 例如下面这句就是默认使用nohup.out作为输出文件: nohup script.sh & 改成下面的,则/ ...
- split命令_Linux split命令：切割（拆分）文件
<Linux就该这么学>是一本基于最新Linux系统编写的入门必读书籍,内容面向零基础读者,由浅入深渐进式教学,销量保持国内第一,年销售量预期超过10万本.点此免费在线阅读. 15 分钟之 ...
- ipmitool使用手册
ipmitool使用手册原创xinqidian_xiao 最后发布于2018-07-05 12:15:47 阅读数 17948 收藏展开一.查找安装包 查看ipmitool属于哪个安装包 #yum p ...
- suse11sp3、suse12 安装 zabbix-agent
1.添加repo源 suse11SP3zypper addrepo http://download.opensuse.org/repositories/server:/monitoring/SLE_1 ...
- python中的threading模块使用说明
这段时间使用python做串口的底层库,用到了多线程,对这部分做一下总结.实际用完了后再回过头去看python的官方帮助文档,感觉受益匪浅,把里面的自己觉得有用的一些关键点翻译出来,留待后续查验.th ...