在数据可视化大屏中，地图可视化是常用的高级图表之一。
很多小伙伴们以为地图太高大上了，那么实现起来估计也不容易，说实话，确实不那么容易，直接用charts是要花些时间研究的，但是我们可以将其二次封装，以后在项目中就可以实现拿来主义，这样就简单快捷多了。
一、大屏整体架构Echarts+Flask+Bootstrap
1.效果展示
动态效果
鼠标右键切换主题
2.前端布局Bootstrap
bodystyl="background-color:rgb(11,18,39)"divclass="containr_fluid"id="vu_app"!--标题栏--divclass="row_fluid"divid="containr_1"class="col-12"styl="color:#f5b66;txt-align:cntr;align-contnt:cntr;padding-top:1%;padding-bottom:1%;"strongh3地图可视化：基于Echarts+Flask的动态实时地图组件-点气泡流向组合区域三级下钻地图/h3/strongdv-dcoration-5styl="width:%;hight:4%;color:#f5b66;"/dv-dcoration-5/div/div!--上栏--divclass="row"styl="hight:44%;"!--上左栏--divclass="col-xs-12col-sm-4col-md-4"dv-bordr-box-7divid="containr_2"styl="hight:%;"/div/dv-bordr-box-7/div!--上中栏--divclass="col-xs-12col-sm-4col-md-4"dv-bordr-box-7divid="containr_3"styl="hight:%;"/div/dv-bordr-box-7/div!--上右栏--divclass="col-xs-12col-sm-4col-md-4"dv-bordr-box-7divid="containr_4"styl="hight:%;"/div/dv-bordr-box-7/div/div!--下栏--divclass="row"styl="hight:44%;padding-top:0.5%;"!--下左栏--divclass="col-xs-12col-sm-4col-md-4"dv-bordr-box-7divid="containr_5"styl="hight:%;"/div/dv-bordr-box-7/div!--下中栏--divclass="col-xs-12col-sm-4col-md-4"dv-bordr-box-7divid="containr_6"styl="hight:%;"/div/dv-bordr-box-7/div!--下右栏--divclass="col-xs-12col-sm-4col-md-4"divclass="col-xs-12col-md-12col-sm-12"dv-bordr-box-7divclass="col-xs-12col-md-12col-sm-12"buttonid="china"typ="button"class="btnbtn-info"styl="width:fit-contnt;"onclick="mak_china(china)"中国/buttonbuttonid="provinc"typ="button"class="btnbtn-info"onclick=""styl="display:non;width:fit-contnt;"/buttonbuttonid="city"typ="button"class="btnbtn-info"onclick=""styl="display:non;width:fit-contnt"/button/divdivid="containr_7"styl="hight:%;"/div/dv-bordr-box-7/div/div/div/div!--鼠标右键切换主题thm[1/2]--!--styl="width:px;"必须写在html，不能写在css文件中--ulid="right_mnu"styl="width:px;"liimgsrc="img/drop-down.png"主题列表/liliinfographic/lilimacarons/liliroma/lilishin/liliwaldn/liliwstros/liliwondrland/lilivintag/lilipurpl-passion/lilichalk/lilidark/lilissos/li/ul/body
3.HTTP服务端使用Flask架构
app=Flask(__nam__,static_foldr="static",tmplat_foldr="tmplat")
app.rout(/)dfhllo_world():turnHlloWorld!#主程序在这里if__nam__=="__main__":#开启线程，触发动态数据a=thading.Thad(targt=asyncJson.loop)a.start()#开启flask服务app.run(host=0.0.0.0,port=88,dbug=Tru)二、封装的Echarts地图可视化组件
我将项目中常用的地图组件整理了一下，主要6组，分为：
点式地图scattr点式+气泡组合地图scattr+ffctScattr流向地图lins流向+气泡组合地图lins+ffctScattr区域地图map国家省市三级下钻地图map
1.点式地图scattr
charts代码
functioninit_chart_map_china_scattr(containr){//基于准备好的dom，初始化charts实例varmyChart=charts.init(documnt.gtElmntById(containr),window.gThm);vardata=[];vargoCoordMap={};option={titl:{txt:"点图scattr",top:"top",lft:"cntr",txtStyl:{color:"hsl(,86%,48%)",fontSiz:"14",},},tooltip:{triggr:"itm",formattr:function(params){if(typofparams.valu[2]=="undfind"){turnparams.nam+":"+params.valu;}ls{turnparams.nam+":"+params.valu[2];}},},go:{map:"china",zoom:1,roam:tru,layoutCntr:["50%","50%"],//地图放大或缩小的尺寸layoutSiz:"%",slctdMod:"singl",labl:{mphasis:{show:fals,},},//地图背景色:蓝色//itmStyl:{//normal:{//aaColor:"#4c60ff",//bordrColor:"#",//},//mphasis:{//aaColor:"#fff",//},//},//地图背景色:itmStyl:{normal:{bordrColor:"rgba(,,,1)",bordrWidth:1,aaColor:{typ:"radial",x:0.5,y:0.5,r:0.8,colorStops:[{offst:0,color:"rgba(,,,0)",//0%处的颜色},{offst:1,color:"rgba( 47,79,79,.2)",//%处的颜色},],globalCoord:fals,//缺省为fals},shadowColor:"rgba(,,,1)",shadowOffstX:-2,shadowOffstY:2,shadowBlur:10,},mphasis:{aaColor:"#BB7",bordrWidth:0,},},},sris:[{nam:"点图",typ:"scattr",coordinatSystm:"go",//"diamond","pin","circl",symbol:"pin",//自定义图形car//symbol://"path://M49.,40.c-0.,0.-0.,0.-0.,0.c-0.,0.-0.,0.-1.,0.c-1.-0.-2.,0-4.,0.c0,0.,0.,0.,0.,0.c0.,1.,0.,1.,0.,1.h3.7c0.,0,0.,0,0.-0.c0.-0.,0.43-0.,0.-1.78c0.-0.,0.-0.,0.-0.56v-0.01c0-0.,0.-0.,0.-0.25V41.58l0,0C49.6,41.,49.6,41.09,49.,40.L49.,40.zM6.,40.c0.,0.,0.,0.,0.,0.c0.23,0.,0.,0.,1.,0.c1.-0.,2.,0,4.,0.c0,0.-0.,0.-0.,0.c-0.,1.-0.,1.-0.93,1.h-3.7c-0.,0-0.,0-0.-0.c-0.-0.18-0.43-0.-0.-1.78c-0.-0.-0.-0.-0.-0.56v-0.01c0-0.-0.-0.-0.-0.25V41.58l0,0C6.,41.,6.,41.09,6.,40.L6.,40.zM49.,32.c0-2.-0.-5.-0.-5.c-0.-0.-0.-0.-2.-1.c-1.-1.-1.-0.-1.-1.c0.25-0.,0.-0.,0.-0.c0.-0.,0.,0.,1.,0.c0.68,0,2.-0.18,2.-0.48c0.-0.,0.-0.,0.-0.c0-0.-0.-0.-0.-1.c-0.-0.-1.-0.49-2.-0.c-0.-0.-0.,0-1.,0.c-0.,0.-0.32,1.-0.32,1.l-0.,0.c-0.-1.-1.11-3.-2.-5.c-1.-1.-2.-2.-2.-2.c-0.-0.-0.-0.-4.-0.c-3.-0.-5.-0.-8.-0.c-2.,0-4.,0.-8.,0.c-3.,0.-3.66,0.43-4.,0.s-1.,0.-2.,2.c-1.,1.-1.,4.-2.,5.L9.87,23.c0,0-0.-1.-0.-1.c-0.-0.-0.-0.-1.-0.c-0.,0.-1.98,0.-2.,0.c-0.,0.-0.,0.-0.,1.c0,0.,0.,0.,0.,0.c0.,0.,1.,0.48,2.,0.48c0.68,0,0.-0.,1.-0.c0.,0.,0.,0.,0.,0.c-0.,0.68-0.24,0.-1.,1.c-1.,1.-2.,1.-2.,1.c-0.,0.-0.,2.-0.,5.s0.,5.02,0.,5.86c0,0.,0,0.,0.,1.c0.,0.,0.,0.,0.,0.c0.,0.,0.,0.,1.,0.c1.-0.,2.,0,4.,0.07c1.,0.,2.,0.,3.33,0.11c2.,0.,1.-0.,2.-0.36c1.,0.,5.,0.,9.,0.c3.,0,8.-0.,9.-0.c1.-0.,0.,0.,2.,0.36c1.-0.,2.-0.,3.-0.11c1.-0.,3.-0.,4.-0.07c0.,0.,1.,0,1.-0.c0.-0.,0.-0.,0.-0.c0.-0.,0.-1.,0.-1.C49.,37.,49.,35.,49.,32.L49.,32.zM13.,19.c0.-0.,1.-2.9,2.-3.c0.-0.,1.-0.,4.-0.c2.-0.,6.-0.,7.73-0.c1.,0,4.,0.,7.,0.c3.,0.,4.,0.,4.,0.c0.,0.,1.,2.28,2.,3.c0.,0.,0.,2.,0.,3.c-0.,0.,0.,0.-1.,0.c-1.-0.-10.-0.-14.-0.c-4.,0-12.,0.-14.,0.c-1.,0.-1.-0.-1.-0.C12.,22.,12.,20.,13.,19.L13.,19.zM16.,30.c-0.,0.-0.,0.-1.,0.c-0.,0-2.-0.-3.-0.c-0.-0.-0.,0.-1.,0.c-0.23,0.06-0.-0.-1.-0.c-0.-0.-1.-0.-1.-1.c-0.-0.93,0-2.,0-2.c1.-0.,2.,0.,5.,0.c2.,0.,4.,2.,4.,2.S17.,30.,16.,30.L16.,30.zM36.,37.c-1.23,0.-6.,0.-8.,0.c-2.,0-7.-0.-8.-0.c-1.-0.-2.-1.67-1.-2.c1.-1.,1.24-1.,4.-2.C24.,32.,27.,32,27.,32c0.,0,2.,0.,5.,0.c3.,0.,3.,0.,4.,2.C39.,35.,37.,37.,36.,37.L36.,37.zM48.,29.c-0.,0.93-0.,0.-1.,1.c-0.,0.-1.,0.-1.,0.c-0.-0.-0.-0.-1.-0.c-0.,0.-2.,0.37-3.,0.37c-0.,0-1.-0.-1.-0.c-0.-0.-0.-0.-0.-0.s1.49-1.,4.-2.c2.-0.,4.-0.,5.-0.C48.,27.,48.,28.,48.,29.L48.,29.z",data:[],symbolSiz:function(val){turnval[2]/20;},labl:{normal:{formattr:"{b}",position:"right",show:fals,},mphasis:{show:tru,},},},],};myChart.stOption(option);window.addEvntListnr("siz",function(){myChart.siz();});}
JSON数据格式
[{"nam":"长沙","valu":[.,28.,]},{"nam":"海门","valu":[.15,31.89,]},{"nam":"赤峰","valu":[.87,42.28,]},{"nam":"鄂尔多斯","valu":[.781,39.606,]},{"nam":"招远","valu":[.38,37.35,]},{"nam":"舟山","valu":[.,29.,]},{"nam":"齐齐哈尔","valu":[.97,47.33,]},{"nam":"盐城","valu":[.13,33.38,]},{"nam":"青岛","valu":[.33,36.07,]},{"nam":"乳山","valu":[.52,36.89,]},{"nam":"金昌","valu":[.,38.589,]},{"nam":"泉州","valu":[.58,24.93,]}]
2.点式+气泡组合地图scattr+ffctScattr
charts代码
functioninit_chart_map_china_ffctScattr(containr){//基于准备好的dom，初始化charts实例varmyChart=charts.init(documnt.gtElmntById(containr),window.gThm);vardata=[];vargoCoordMap={};option={titl:{txt:"点图+气泡图scattr-ffctScattr",top:"top",lft:"cntr",txtStyl:{color:"hsl(,86%,48%)",fontSiz:"14",},},tooltip:{triggr:"itm",formattr:function(params){if(typofparams.valu[2]=="undfind"){turnparams.nam+":"+params.valu;}ls{turnparams.nam+":"+params.valu[2];}},},go:{map:"china",layoutCntr:["50%","50%"],zoom:1,roam:tru,//地图放大或缩小的尺寸layoutSiz:"%",slctdMod:"singl",labl:{mphasis:{show:fals,},},//地图背景色:蓝色itmStyl:{normal:{aaColor:"#4c60ff",bordrColor:"#",},mphasis:{aaColor:"#fff",},},},sris:[{nam:"点图",typ:"scattr",coordinatSystm:"go",data:[],symbolSiz:function(val){turnval[2]/50;},labl:{normal:{formattr:"{b}",position:"right",show:fals,},mphasis:{show:tru,},},},{nam:"Top5",typ:"ffctScattr",coordinatSystm:"go",data:[],symbolSiz:function(val){turnval[2]/40;},showEffctOn:"ndr",ripplEffct:{brushTyp:"strok",},hovrAnimation:tru,labl:{normal:{formattr:"{b}",position:"right",show:tru,},},zlvl:1,},],};myChart.stOption(option);window.addEvntListnr("siz",function(){myChart.siz();});}functionasync_chart_map_china_ffctScattr(containr,filnam){$.gtJSON(filnam).don(function(data){varmyChart=charts.init(documnt.gtElmntById(containr));myChart.stOption({sris:[{data:data},{data:data.sort(function(a,b){turnb.valu[2]-a.valu[2];}).slic(0,5),},],});});}
JSON数据格式
[{"nam":"长沙","valu":[.,28.,]},{"nam":"海门","valu":[.15,31.89,]},{"nam":"赤峰","valu":[.87,42.28,]},{"nam":"鄂尔多斯","valu":[.781,39.606,]},{"nam":"招远","valu":[.38,37.35,]},{"nam":"舟山","valu":[.,29.,]},{"nam":"齐齐哈尔","valu":[.97,47.33,]},{"nam":"盐城","valu":[.13,33.38,]},{"nam":"青岛","valu":[.33,36.07,]},{"nam":"乳山","valu":[.52,36.89,]},{"nam":"金昌","valu":[.,38.589,]},{"nam":"泉州","valu":[.58,24.93,]}]
3.流向地图lins
charts代码
functioninit_chart_map_china_lins(containr){//基于准备好的dom，初始化charts实例varmyChart=charts.init(documnt.gtElmntById(containr),window.gThm);vardata=[];vargoCoordMap={};option={titl:{txt:"流向图lins",top:"top",lft:"cntr",txtStyl:{color:"hsl(,86%,48%)",fontSiz:"14",},},tooltip:{triggr:"itm",formattr:function(params){turn(params.srisNam+"br"+params.data.fromNam+"-"+params.data.toNam);},},go:{map:"china",layoutCntr:["50%","50%"],zoom:1,roam:tru,//地图放大或缩小的尺寸layoutSiz:"%",slctdMod:"singl",labl:{mphasis:{show:fals,},},//地图背景色:蓝色itmStyl:{normal:{aaColor:"#4c60ff",bordrColor:"#",},mphasis:{aaColor:"#fff",},},},sris:{nam:"流向图",typ:"lins",symbol:["circl","arrow"],//symbol大小symbolSiz:10,//设置线条的效果ffct:{show:tru,priod:10,trailLngth:0,//circl,ct,roundRct,triangl,diamond,pin,arrow,non//svg图形pathsymbol:"path://M1.,32.l2.,1.l-2.,2.l-2.-0.L1.,32.zM37.,23.96c0.-0.,0.5-1.,0.-1.c-0.-0.-0.-0.-0.-0.c-0.-0.-2.-0.-3.-0.c-0.,0-1.,0.-1.,0.18l2.,1.H37.zM39.,23.c-0.,0-0.,0.-0.,0.h1.C40.,23.,39.,23.,39.,23.zM39.,39.c-0.,0-0.,0.-0.,1.s0.,1.,0.,1.s0.-0.,0.-1.S40.,39.,39.,39.zM38.,38.c-0.-0.-0.-0.07-0.-0.c-0.,0-0.,0-0.-0.l-7.,4.c0.,0.,2.42,1.,4.,1.c0.,0,2.27-0.,3.-0.01c0.,0,0.25-0.,0.-0.c-0.-0.-1.07-1.-1.07-2.C37.,40.,38.,39.,38.,38.zM32.,23.96l-12.37-10.l-4.-0.c0,0,4,8.,4.,10.H32.zM59.,32.c-0.,2.-5.,3.-8.,3.H39.l-25.,16.61L9.,52.16c0,0,6.-8.,7.95-10.c1.17-1.6,3.-3.,3.-6.h-2.c-5.,0-13.-3.-18.-5.c-2.-1.-2.-4.04-0.-4.04h0.l-3.-11.h3.c0,0,4.,5.,5.,7.5c2,2.,4.,3.,8.,3.87h30.c2.17,0,4.,0.,6.,1.c3.49,1.,5.,2.7,7.,4.C59.,31.,59.,32.,59.,32.zM22.,30.c0-0.-0.-1.-1.-1.c-0.,0-1.,0.66-1.,1.s0.,1.,1.,1.C21.,31.,22.,31.,22.,30.zM27.06,30.c0-0.-0.-1.-1.-1.c-0.,0-1.,0.-1.,1.s0.,1.,1.,1.C26.,31.,27.06,31.,27.06,30.zM32.,30.c0-0.-0.66-1.-1.-1.c-0.,0-1.,0.66-1.,1.s0.,1.,1.,1.C31.,31.,32.,31.,32.,30.zM37.,30.c0-0.-0.-1.-1.-1.c-0.,0-1.,0.-1.,1.s0.,1.,1.,1.C36.,31.,37.,31.,37.,30.zM42.,30.c0-0.-0.-1.-1.-1.c-0.,0-1.,0.-1.,1.s0.,1.,1.,1.C41.,31.,42.,31.,42.,30.zM55.,30.c-0.-0.-1.-0.-2.-1.c-0.,0.-1.,0.-2.73,0.c-1.,0-1.,2.,0.,2.C52.,32.,54.,31.,55.,30.z",//图元的大小symbolSiz:15,},//设置线条的样式linStyl:{normal:{//color:"yllow",//线条的宽度width:2,//线条的透明度//opacity:0.6,//线条的曲度curvnss:0.2,},},},};myChart.stOption(option);window.addEvntListnr("siz",function(){myChart.siz();});}
JSON数据格式
[{"fromNam":"长沙","toNam":"海门","coords":[[.,28.],[.15,31.89]]},{"fromNam":"长沙","toNam":"鄂尔多斯","coords":[[.,28.],[.781,39.606]]},{"fromNam":"长沙","toNam":"招远","coords":[[.,28.],[.38,37.35]]},{"fromNam":"长沙","toNam":"舟山","coords":[[.,28.],[.,29.]]},{"fromNam":"长沙","toNam":"齐齐哈尔","coords":[[.,28.],[.97,47.33]]},{"fromNam":"长沙","toNam":"盐城","coords":[[.,28.],[.13,33.38]]},{"fromNam":"长沙","toNam":"赤峰","coords":[[.,28.],[.87,42.28]]},{"fromNam":"长沙","toNam":"青岛","coords":[[.,28.],[.33,36.07]]},{"fromNam":"长沙","toNam":"乳山","coords":[[.,28.],[.52,36.89]]},{"fromNam":"长沙","toNam":"金昌","coords":[[.,28.],[.,38.589]]},{"fromNam":"长沙","toNam":"泉州","coords":[[.,28.],[.58,24.93]]}]
4.流向+气泡组合地图lins+ffctScattr
charts代码
functioninit_chart_map_china_lin_scattr(containr){//基于准备好的dom，初始化charts实例varmyChart=charts.init(documnt.gtElmntById(containr),window.gThm);vardata=[];vargoCoordMap={};option={titl:{txt:"流向图+气泡图lins-ffctScattr",top:"top",lft:"cntr",txtStyl:{color:"hsl(,86%,48%)",fontSiz:"14",},},tooltip:{triggr:"itm",formattr:function(params){turn(params.srisNam+"br"+params.data.fromNam+"-"+params.data.toNam);},},go:{map:"china",layoutCntr:["50%","50%"],zoom:1,roam:tru,//地图放大或缩小的尺寸layoutSiz:"%",slctdMod:"singl",labl:{mphasis:{show:fals,},},//地图背景色:蓝色itmStyl:{normal:{aaColor:"#4c60ff",bordrColor:"#",},mphasis:{aaColor:"#fff",},},},sris:[{nam:"流向图",typ:"lins",symbol:["circl","arrow"],//symbol大小symbolSiz:10,//设置线条的效果ffct:{show:tru,priod:10,trailLngth:0,//circl,ct,roundRct,triangl,diamond,pin,arrow,non//svg图形pathsymbol:"path://M1.,32.l2.,1.l-2.,2.l-2.-0.L1.,32.zM37.,23.96c0.-0.,0.5-1.,0.-1.c-0.-0.-0.-0.-0.-0.c-0.-0.-2.-0.-3.-0.c-0.,0-1.,0.-1.,0.18l2.,1.H37.zM39.,23.c-0.,0-0.,0.-0.,0.h1.C40.,23.,39.,23.,39.,23.zM39.,39.c-0.,0-0.,0.-0.,1.s0.,1.,0.,1.s0.-0.,0.-1.S40.,39.,39.,39.zM38.,38.c-0.-0.-0.-0.07-0.-0.c-0.,0-0.,0-0.-0.l-7.,4.c0.,0.,2.42,1.,4.,1.c0.,0,2.27-0.,3.-0.01c0.,0,0.25-0.,0.-0.c-0.-0.-1.07-1.-1.07-2.C37.,40.,38.,39.,38.,38.zM32.,23.96l-12.37-10.l-4.-0.c0,0,4,8.,4.,10.H32.zM59.,32.c-0.,2.-5.,3.-8.,3.H39.l-25.,16.61L9.,52.16c0,0,6.-8.,7.95-10.c1.17-1.6,3.-3.,3.-6.h-2.c-5.,0-13.-3.-18.-5.c-2.-1.-2.-4.04-0.-4.04h0.l-3.-11.h3.c0,0,4.,5.,5.,7.5c2,2.,4.,3.,8.,3.87h30.c2.17,0,4.,0.,6.,1.c3.49,1.,5.,2.7,7.,4.C59.,31.,59.,32.,59.,32.zM22.,30.c0-0.-0.-1.-1.-1.c-0.,0-1.,0.66-1.,1.s0.,1.,1.,1.C21.,31.,22.,31.,22.,30.zM27.06,30.c0-0.-0.-1.-1.-1.c-0.,0-1.,0.-1.,1.s0.,1.,1.,1.C26.,31.,27.06,31.,27.06,30.zM32.,30.c0-0.-0.66-1.-1.-1.c-0.,0-1.,0.66-1.,1.s0.,1.,1.,1.C31.,31.,32.,31.,32.,30.zM37.,30.c0-0.-0.-1.-1.-1.c-0.,0-1.,0.-1.,1.s0.,1.,1.,1.C36.,31.,37.,31.,37.,30.zM42.,30.c0-0.-0.-1.-1.-1.c-0.,0-1.,0.-1.,1.s0.,1.,1.,1.C41.,31.,42.,31.,42.,30.zM55.,30.c-0.-0.-1.-0.-2.-1.c-0.,0.-1.,0.-2.73,0.c-1.,0-1.,2.,0.,2.C52.,32.,54.,31.,55.,30.z",//图元的大小symbolSiz:15,},//设置线条的样式linStyl:{normal:{//color:"yllow",//线条的宽度width:2,//线条的透明度//opacity:0.6,//线条的曲度curvnss:0.2,},},},{nam:"气泡图",typ:"ffctScattr",coordinatSystm:"go",data:[],symbolSiz:function(val){turnval[2]/40;},showEffctOn:"ndr",ripplEffct:{brushTyp:"strok",},hovrAnimation:tru,//labl:{//normal:{//formattr:"{b}",//position:"right",//show:tru,//},//},zlvl:1,},],};myChart.stOption(option);window.addEvntListnr("siz",function(){myChart.siz();});}functionasync_chart_map_china_lin_scattr(containr,filnam_lin,filnam_scattr){$.gtJSON(filnam_lin).don(function(data){$.gtJSON(filnam_scattr).don(function(data_scattr){varmyChart=charts.init(documnt.gtElmntById(containr));myChart.stOption({sris:[{data:data,},{data:data_scattr,},],});});});}
JSON数据格式-流向图lins
[{"fromNam":"赤峰","toNam":"海门","coords":[[.87,42.28],[.15,31.89]]},{"fromNam":"赤峰","toNam":"鄂尔多斯","coords":[[.87,42.28],[.781,39.606]]},{"fromNam":"赤峰","toNam":"招远","coords":[[.87,42.28],[.38,37.35]]},{"fromNam":"长沙","toNam":"舟山","coords":[[.,28.],[.,29.]]},{"fromNam":"赤峰","toNam":"齐齐哈尔","coords":[[.87,42.28],[.97,47.33]]},{"fromNam":"长沙","toNam":"盐城","coords":[[.,28.],[.13,33.38]]},{"fromNam":"盐城","toNam":"赤峰","coords":[[.13,33.38],[.87,42.28]]},{"fromNam":"盐城","toNam":"青岛","coords":[[.13,33.38],[.33,36.07]]},{"fromNam":"盐城","toNam":"乳山","coords":[[.,28.],[.52,36.89]]},{"fromNam":"盐城","toNam":"金昌","coords":[[.,28.],[.,38.589]]},{"fromNam":"长沙","toNam":"泉州","coords":[[.,28.],[.58,24.93]]}]
json数据-气泡图scattr
[{"nam":"长沙","valu":[.,28.,]},{"nam":"海门","valu":[.15,31.89,]},{"nam":"赤峰","valu":[.87,42.28,]},{"nam":"鄂尔多斯","valu":[.781,39.606,]},{"nam":"招远","valu":[.38,37.35,]},{"nam":"舟山","valu":[.,29.,]},{"nam":"齐齐哈尔","valu":[.97,47.33,]},{"nam":"盐城","valu":[.13,33.38,]},{"nam":"青岛","valu":[.33,36.07,]},{"nam":"乳山","valu":[.52,36.89,]},{"nam":"金昌","valu":[.,38.589,]},{"nam":"泉州","valu":[.58,24.93,]}]
5.区域地图map
charts代码
functioninit_chart_map_china_map(containr){//基于准备好的dom，初始化charts实例varmyChart=charts.init(documnt.gtElmntById(containr),window.gThm);vardata=[];vargoCoordMap={};option={titl:{txt:"区域图map",top:"top",lft:"cntr",txtStyl:{color:"hsl(,86%,48%)",fontSiz:"14",},},tooltip:{triggr:"itm",formattr:function(params){if(typofparams.valu[2]=="undfind"){turnparams.nam+":"+params.valu;}ls{turnparams.nam+":"+params.valu[2];}},},visualMap:{min:0,max:0,//lft:"right",//top:"bottom",txt:["高","低"],//文本，默认为数值文本calculabl:tru,// color:[#26cf4,#f2b,#c5],txtStyl:{color:"#fff",},},sris:[{typ:"map",mapTyp:"china",aspctScal:0.75,zoom:1,roam:tru,labl:{normal:{show:tru,//显示省份标签txtStyl:{color:"#c71"},//省份标签字体颜色},mphasis:{//对应的鼠标悬浮效果show:tru,txtStyl:{color:"#800"},},},itmStyl:{normal:{bordrWidth:0.5,//区域边框宽度bordrColor:"#f8",//区域边框颜色aaColor:"#ffffff",//区域颜色},mphasis:{bordrWidth:0.5,bordrColor:"#4b2",aaColor:"#ffdad",},},},],};myChart.stOption(option);window.addEvntListnr("siz",function(){myChart.siz();});}
JSON数据格式
[{"nam":"北京","valu":},{"nam":"天津","valu":},{"nam":"河北","valu":},{"nam":"山西","valu":},{"nam":"内蒙古","valu":},{"nam":"宁夏","valu":},{"nam":"青海","valu":},{"nam":"陕西","valu":},{"nam":"甘肃","valu":},{"nam":"*","valu":},{"nam":"辽宁","valu":},{"nam":"吉林","valu":},{"nam":"黑龙江","valu":},{"nam":"山东","valu":},{"nam":"江苏","valu":},{"nam":"上海","valu":},{"nam":"浙江","valu":},{"nam":"安徽","valu":},{"nam":"福建","valu":},{"nam":"江西","valu":},{"nam":"河南","valu":},{"nam":"湖南","valu":},{"nam":"湖北","valu":},{"nam":"四川","valu":},{"nam":"贵州","valu":},{"nam":"云南","valu":},{"nam":"重庆","valu":},{"nam":"西藏","valu":},{"nam":"广东","valu":},{"nam":"广西","valu":},{"nam":"海南","valu":}]
6.国家省市三级下钻地图map
下钻事件代码
functionmak_china(containr){mak_map("china",containr);async_chart(containr,filnam_map_china_map_drill_china);//更新面包屑导航consol.log(containr);button=documnt.gtElmntById("china");button.onclick=function(){mak_china(containr);};//隐藏provinc按钮$("#provinc").hid();//隐藏city按钮$("#city").hid();//nd更新面包屑导航//自定义click事件处理函数myChart=charts.init(documnt.gtElmntById(containr),window.gThm);myChart.off("click");myChart.on("click",function(params){//params.nam为省市名称，如河北，内蒙古，深圳市//加载省市地图mak_provinc(params.nam,containr);//加载省市数据});}//渲染省市地图functionmak_provinc(cityNam,containr){//绘制省地图mak_map(cityNam,containr);async_chart(containr,filnam_map_china_map_drill_provinc);//更新面包屑导航consol.log(cityNam,containr);button=documnt.gtElmntById("provinc");button.innrHTML=cityNam;button.onclick=function(){mak_provinc(cityNam,containr);};//显示provinc按钮$("#provinc").show();//隐藏city按钮$("#city").hid();//nd更新面包屑导航myChart=charts.init(documnt.gtElmntById(containr),window.gThm);myChart.off("click");//自定义click事件处理函数myChart.on("click",function(params){//params.nam为省市名称，如河北，内蒙古，深圳市//加载省市地图consol.log(params.nam,containr);mak_city(params.nam,containr);});}functionmak_city(cityNam,containr){//绘制市地图mak_map(cityNam,containr);async_data(containr,filnam_map_china_map_drill_city);//更新面包屑导航consol.log(cityNam,containr);button=documnt.gtElmntById("city");button.innrHTML=cityNam;button.onclick=function(){mak_city(cityNam,containr);};//显示city按钮$("#city").show();//无区县下钻，关闭click事件myChart=charts.init(documnt.gtElmntById(containr),window.gThm);myChart.off("click");}
charts代码
functionmak_map(cityNam,containr){//删除《市》，如：深圳市深圳。因为地图城市注册的时候名字不包含市。cityNam=cityNam.plac("市","");myChart=charts.init(documnt.gtElmntById(containr),window.gThm);varoption={titl:{txt:"三级(国家/省/市)下钻地图map"+cityNam,top:"top",lft:"cntr",txtStyl:{color:"hsl(,86%,48%)",fontSiz:"14",},},tooltip:{triggr:"itm",formattr:function(params){if(typofparams.valu=="objct"){valu=params.valu[2];}lsif(typofparams.valu=="numbr"){valu=params.valu;}ls{valu=0;}turnparams.nam+":"+valu;},},dataRang:{min:0,max:0,altim:tru,calculabl:tru,srisIndx:0,},go:[{map:cityNam,//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成scal或者mov。设置成tru为都开启//roam:tru,//需要关闭鼠标平移漫游，否则地图定位漂移到div外面roam:"scal",layoutCntr:["50%","50%"],layoutSiz:"%",slctdMod:"singl",//zoom:1,labl:{normal:{show:tru,//显示城市标签//txtStyl:{color:"#c71"},//省份标签字体颜色},mphasis:{//对应的鼠标悬浮效果show:tru,//txtStyl:{color:"#800"},},},//地图背景色:itmStyl:{normal:{bordrColor:"rgba(,,,1)",bordrWidth:1,aaColor:{typ:"radial",x:0.5,y:0.5,r:0.8,colorStops:[{offst:0,color:"rgba(,,,0)",//0%处的颜色},{offst:1,color:"rgba( 47,79,79,.2)",//%处的颜色},],globalCoord:fals,//缺省为fals},shadowColor:"rgba(,,,1)",shadowOffstX:-2,shadowOffstY:2,shadowBlur:10,},mphasis:{//aaColor:"#BB7",bordrWidth:0,},},},],sris:[{nam:"地图",typ:"map",coordinatSystm:"go",zoom:1,roam:tru,goIndx:0,data:[],backgroundColor:"#",},{nam:"Top5",typ:"ffctScattr",coordinatSystm:"go",goIndx:0,data:[],symbolSiz:function(val){turnval[2]/20;},ripplEffct:{brushTyp:"strok",},},],};myChart.stOption(option);window.addEvntListnr("siz",function(){myChart.siz();});}functionhandl_data(nod){turn{nam:nod.nam,valu:nod.valu[2],};}functionasync_data(containr,filnam){$.gtJSON(filnam).don(function(data){dataNoCoordinat=data.map(handl_data);dataDsc=data.sort(function(a,b){turnb.valu[2]-a.valu[2];}).slic(0,5);consol.log(containr,dataDsc,dataNoCoordinat);varmyChart=charts.init(documnt.gtElmntById(containr));myChart.stOption({sris:[{data:dataNoCoordinat},{data:dataDsc,},],});});}
JSON数据格式-中国地图
[{"nam":"北京","valu":5},{"nam":"天津","valu":},{"nam":"河北","valu":1},{"nam":"山西","valu":1},{"nam":"内蒙古","valu":2},{"nam":"宁夏","valu":},{"nam":"青海","valu":0},{"nam":"陕西","valu":},{"nam":"甘肃","valu":2},{"nam":"*","valu":},{"nam":"辽宁","valu":},{"nam":"吉林","valu":},{"nam":"黑龙江","valu":5},{"nam":"山东","valu":},{"nam":"江苏","valu":},{"nam":"上海","valu":5},{"nam":"浙江","valu":},{"nam":"安徽","valu":6},{"nam":"福建","valu":},{"nam":"江西","valu":},{"nam":"河南","valu":},{"nam":"湖南","valu":},{"nam":"湖北","valu":2},{"nam":"四川","valu":},{"nam":"贵州","valu":1},{"nam":"云南","valu":},{"nam":"重庆","valu":},{"nam":"西藏","valu":},{"nam":"广东","valu":},{"nam":"广西","valu":},{"nam":"海南","valu":9}]
JSON数据格式-广东省地图
[{"nam":"深圳市","valu":5},{"nam":"东莞市","valu":},{"nam":"惠州市","valu":1},{"nam":"河源市","valu":1},{"nam":"中山市","valu":2},{"nam":"潮州市","valu":},{"nam":"汕头市","valu":0},{"nam":"广州市","valu":}]
[{"nam":"罗湖区","valu":[.,22.,]},{"nam":"福田区","valu":[.,22.,]},{"nam":"南山区","valu":[.913,22.,]},{"nam":"宝安区","valu":[.802,22.,]},{"nam":"龙岗区","valu":[.299,22.774,]},{"nam":"盐田区","valu":[.,22.557,58]},{"nam":"坪山区","valu":[.350,22.781,]},{"nam":"龙华区","valu":[.,22.667,]}]
YYDatav的数据可视化大屏《精彩案例汇总》（PythonEcharts源码）
YYDatav的数据可视化大屏《精彩案例汇总》（PythonEcharts源码）
《工厂订单出入库信息管理系统》完整解决方案（含演示账号）
《工厂订单出入库信息管理系统》完整解决方案（含演示账号）