Austin micromobility and traffic clusterecharts 地图配置项内容和展示
Muyang Lu
配置项如下
var uploadedDataURL = "/asset/get/s/data-1586223266202-KCeNgTQmI.json";
var centerdata = [{name:"48453001818",value:20000},
{name:"48453000204",value:20000},
{name:"48453000500",value:20000},
{name:"48453000604",value:20000},
{name:"48453002315",value:20000},
{name:"48453001603",value:20000},
{name:"48453002004",value:20000},
{name:"48453002316",value:20000},
{name:"48453002003",value:20000},
{name:"48453001712",value:20000},
{name:"48453000803",value:20000},
{name:"48453002403",value:20000},
{name:"48453002308",value:20000},
{name:"48453002313",value:20000},
{name:"48453000203",value:20000},
{name:"48453000302",value:20000},
{name:"48453001901",value:20000},
{name:"48453001200",value:20000},
{name:"48453000603",value:20000},
{name:"48453000700",value:20000},
{name:"48453000401",value:20000},
{name:"48453001503",value:20000},
{name:"48453001303",value:20000},
{name:"48453002111",value:20000},
{name:"48453001604",value:20000},
{name:"48453001100",value:20000},
{name:"48453001000",value:20000},
{name:"48453002411",value:20000},
{name:"48453001401",value:20000},
{name:"48453000402",value:20000},
{name:"48453000601",value:20000},
{name:"48453002109",value:20000},
{name:"48453000101",value:20000},
{name:"48453001602",value:20000},
{name:"48453001304",value:20000},
{name:"48453001307",value:20000},
{name:"48453000804",value:20000},
{name:"48453001605",value:20000},
{name:"48453000901",value:20000},
{name:"48453001817",value:20000},
{name:"48453002105",value:20000},
{name:"48453002402",value:20000},
{name:"48453002005",value:20000},
{name:"48453001821",value:20000},
{name:"48453002304",value:20000},
{name:"48453001305",value:20000},
{name:"48453002307",value:20000},
{name:"48453000802",value:20000},
{name:"48453001504",value:20000},
{name:"48453001505",value:20000},
{name:"48453001910",value:20000},
{name:"48453001911",value:20000},
{name:"48453000801",value:20000},
{name:"48453002314",value:20000},
{name:"48453001501",value:20000},
{name:"48453000902",value:20000},
{name:"48453001403",value:20000},
{name:"48453002312",value:20000},
{name:"48453001402",value:20000},
{name:"48453001308",value:20000},
{name:"48453001850",value:20000},
{name:"48453001849",value:20000}
]
var geoCoordMap = {
"48453001818":[-97.72195949028057,30.36074797479801],
"48453000204":[-97.74387652762414,30.307095971930984],
"48453000500":[-97.73469255331993,30.29543501464837],
"48453000604":[-97.74808347094788,30.283370001606624],
"48453002315":[-97.73213952261851,30.233934468920943],
"48453001603":[-97.7576125013492,30.298842036208637],
"48453002004":[-97.78867950044395,30.23727797809715],
"48453002316":[-97.72828549087095,30.235353469291162],
"48453002003":[-97.77661549022932,30.21914343750014],
"48453001712":[-97.79761544217462,30.224080021120244],
"48453000803":[-97.7205185112827,30.276832989477093],
"48453002403":[-97.76158453242084,30.2125475092775],
"48453002308":[-97.75242153391714,30.22940653735092],
"48453002313":[-97.72331949098876,30.222296994506642],
"48453000203":[-97.73712048133854,30.31300153725266],
"48453000302":[-97.7267109687287,30.302533526394356],
"48453001901":[-97.7836000139597,30.2497305002506],
"48453001200":[-97.76092249938591,30.274991966028573],
"48453000603":[-97.7472230452817,30.293257960546807],
"48453000700":[-97.74102649295833,30.27788754575929],
"48453000401":[-97.72465943515459,30.288005486384918],
"48453001503":[-97.71626151017206,30.327189451731662],
"48453001303":[-97.76369205717563,30.258438549518985],
"48453002111":[-97.68225948681334,30.259508566052567],
"48453001604":[-97.77428049085688,30.30257054742875],
"48453001100":[-97.74257853505935,30.263533078409985],
"48453001000":[-97.7206029994673,30.253862983660916],
"48453002411":[-97.74828303354413,30.205155002048446],
"48453001401":[-97.74644092369957,30.250776532502304],
"48453000402":[-97.7170160540085,30.285107984568896],
"48453000601":[-97.73805102133396,30.28823596948392],
"48453002109":[-97.68785501141807,30.281303007781126],
"48453000101":[-97.75505704714891,30.321115996436856],
"48453001602":[-97.77497695428946,30.28580845930995],
"48453001304":[-97.7730215249807,30.247738551321007],
"48453001307":[-97.7679700340868,30.236475967110522],
"48453000804":[-97.72340757263717,30.269794981633815],
"48453001605":[-97.76110551533472,30.286592001563847],
"48453000901":[-97.7237125156496,30.265964014909937],
"48453001817":[-97.73527995930357,30.367412011695663],
"48453002105":[-97.70521545304987,30.313094549467742],
"48453002402":[-97.77468847435554,30.203003937882993],
"48453002005":[-97.78058994479983,30.237459489805286],
"48453001821":[-97.70851299931655,30.381258964954963],
"48453002304":[-97.72470949294151,30.242153556400986],
"48453001305":[-97.75709353831627,30.251857997978803],
"48453002307":[-97.74282355915156,30.22466742710389],
"48453000802":[-97.70705196377637,30.272797529590324],
"48453001504":[-97.72505095557476,30.346416488903458],
"48453001505":[-97.72968000554573,30.335685486633786],
"48453001910":[-97.79567346746302,30.272734435050893],
"48453001911":[-97.78271844535516,30.257715511167802],
"48453000801":[-97.70240252298737,30.267113505492524],
"48453002314":[-97.71558944886598,30.224636005187563],
"48453001501":[-97.74293946925246,30.347157494573818],
"48453000902":[-97.71761950522601,30.259209055020364],
"48453001403":[-97.73531555966622,30.240164448814895],
"48453002312":[-97.69763107156581,30.228371954042125],
"48453001402":[-97.74134948685884,30.243904993960406],
"48453001308":[-97.76143954033353,30.2327844769248],
"48453001850":[-97.70122553822799,30.41276102388054],
"48453001849":[-97.71692345963805,30.39197250131902]
}
var dataGeo = [{name:"48453000101", value:15000},
{name:"48453000203", value:0},
{name:"48453000204", value:0},
{name:"48453000205", value:15000},
{name:"48453000206", value:20000},
{name:"48453000302", value:0},
{name:"48453000304", value:20000},
{name:"48453000305", value:20000},
{name:"48453000306", value:20000},
{name:"48453000307", value:0},
{name:"48453000401", value:0},
{name:"48453000402", value:10000},
{name:"48453000500", value:0},
{name:"48453000601", value:0},
{name:"48453000603", value:0},
{name:"48453000604", value:0},
{name:"48453000700", value:0},
{name:"48453000801", value:20000},
{name:"48453000802", value:20000},
{name:"48453000803", value:10000},
{name:"48453000804", value:10000},
{name:"48453000901", value:10000},
{name:"48453000902", value:10000},
{name:"48453001000", value:10000},
{name:"48453001100", value:10000},
{name:"48453001200", value:10000},
{name:"48453001303", value:10000},
{name:"48453001304", value:10000},
{name:"48453001305", value:10000},
{name:"48453001307", value:20000},
{name:"48453001308", value:20000},
{name:"48453001401", value:10000},
{name:"48453001402", value:10000},
{name:"48453001403", value:10000},
{name:"48453001501", value:5000},
{name:"48453001503", value:15000},
{name:"48453001504", value:5000},
{name:"48453001505", value:5000},
{name:"48453001602", value:20000},
{name:"48453001603", value:15000},
{name:"48453001604", value:5000},
{name:"48453001605", value:10000},
{name:"48453001712", value:15000},
{name:"48453001817", value:5000},
{name:"48453001818", value:5000},
{name:"48453001821", value:5000},
{name:"48453001849", value:5000},
{name:"48453001850", value:5000},
{name:"48453001901", value:10000},
{name:"48453001910", value:10000},
{name:"48453001911", value:10000},
{name:"48453002003", value:15000},
{name:"48453002004", value:20000},
{name:"48453002005", value:20000},
{name:"48453002105", value:20000},
{name:"48453002109", value:20000},
{name:"48453002111", value:20000},
{name:"48453002304", value:10000},
{name:"48453002307", value:20000},
{name:"48453002308", value:20000},
{name:"48453002312", value:15000},
{name:"48453002313", value:20000},
{name:"48453002314", value:20000},
{name:"48453002315", value:20000},
{name:"48453002316", value:20000},
{name:"48453002317", value:20000},
{name:"48453002318", value:20000},
{name:"48453002402", value:15000},
{name:"48453002403", value:20000},
{name:"48453002411", value:20000}]
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),
visualMap: false
});
}
}
return res;
};
var convertlineData = function(data) {
var res = [];
for(var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = chinaGeoCoordMap[dataItem[0].name];
var toCoord = [116.4551,40.2539];
if(fromCoord && toCoord) {
res.push([{
coord: fromCoord,
value: dataItem[0].value
}, {
coord: toCoord,
}]);
}
}
return res;
};
$.get(uploadedDataURL, function(geoJson) {
echarts.registerMap('Austin', geoJson);
myChart.setOption(option = {
backgroundColor: '#404a59',
title: {
text: 'Austin micromobility and traffic',
subtext: 'Muyang Lu',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item'
},
geo: {
map: 'Austin',
data: [{
name: '48453001766',
value: 4822023
}],
label: {
normal: {
show: false,
textStyle: {
color: '#aaa'
}
},
emphasis: {
show: true,
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a939d'
}
}
},
visualMap: {
left: 'right',
min: 0,
max: 20000,
inRange: {
color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
},
text: ['High', 'Low'], // 文本，默认为数值文本
calculable: true
},
series: [{
name: 'Scooter Start',
type: 'map',
map: 'Austin',
geoIndex: 0,
aspectScale: 0.75, //长宽比
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: true,
textStyle: {
color: '#fff'
}
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077',
},
emphasis: {
areaColor: '#2B91B7'
}
},
animation: true,
data: dataGeo
}, {
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(centerdata),
visualMap: false,
symbolSize: 10,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
itemStyle: {
normal: {
color: '#cccccc',
shadowBlur: 10,
shadowColor: '#cccccc'
}
},
zlevel: 5
}
]
});
});
截图如下
