大家好，关于多城市网站源码分享很多朋友都还不太明白，不过没关系，因为今天小编就来为大家分享关于2020网站源码的知识点，相信应该可以解决大家的一些困惑和问题，如果碰巧可以解决您的问题，还望关注下本站哦，希望对各位有所帮助！
一起养成写作习惯！这是我参与「掘金日新计划·4月更文挑战」的第4天，点击查看活动详情。
说在前面
最近在捣鼓自己的个人博客网站，在管理统计页中想要加入地区用户访问数量统计图，原本准备使用饼图进行呈现，但是最后还是选择了呈现效果更好地地图来进行展示。在这里对此功能进行总结，也给大家分享一下在vue中echarts地图的使用，以及如何实现省市下钻联动
体验
jyeontu.xyz/JDemo/34;text/javascript&34;https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js&34;text/javascript&34;https://cdn.jsdelivr.net/npm/echarts/map/js/china.js&34;div&34;main&34;450px&39;600px&39;auto&34;南海诸岛&34;beijing&34;北京&34;tianjin&34;天津&34;shanghai&34;上海&34;chongqing&34;重庆&34;hebei&34;河北&34;henan&34;河南&34;yunnan&34;云南&34;liaoning&34;辽宁&34;heilongjiang&34;黑龙江&34;hunan&34;湖南&34;anhui&34;安徽&34;shandong&34;山东&34;xinjiang&34;新疆&34;jiangsu&34;江苏&34;zhejiang&34;浙江&34;jiangxi&34;江西&34;hubei&34;湖北&34;guangxi&34;广西&34;gansu&34;甘肃&34;shanxi&34;山西&34;neimenggu&34;内蒙古&34;shanxi1&34;陕西&34;jilin&34;吉林&34;fujian&34;福建&34;guizhou&34;贵州&34;guangdong&34;广东&34;qinghai&34;青海&34;xizang&34;西藏&34;sichuan&34;四川&34;ningxia&34;宁夏&34;hainan&34;海南&34;台湾&34;xianggang&34;香港&34;aomen&34;澳门&34;省份&34;map&34;<br/>&34;：&34;left&34;bottom&34;高&34;低&34;34;,&34;],//取值范围的颜色\n},\nshow:true,//图注\n},\n复制代码
geo地图绘制
geo:{\nmap:&34;,//引入地图数据\nroam:false,//不开启缩放和平移\nzoom:1,//视角缩放比例\nlabel:{\nnormal:{\nshow:true,\nfontSize:&34;,\ncolor:&34;,\n},\n},\nitemStyle:{\nnormal:{\nborderColor:&34;,\n},\nemphasis:{//高亮的显示设置\nareaColor:&34;,//鼠标选择区域颜色\nshadowOffsetX:0,\nshadowOffsetY:0,\nshadowBlur:20,\nborderWidth:0,\nshadowColor:&34;,\n},\n},\n},\n复制代码
省份区域点击事件
可以通过该点击事件实现省份下钻联动，点击跳转到省级地图页面，省级地图页面根据传入参数渲染不同的省份地图数据即可，具体实现后面会讲到。
myChart.on(&34;,function(params){\nif(!params.data.ename){\nalert(&39;+params.name+&39;);\nreturn;\n}\n_this.$router.push({\npath:&34;,\nquery:{provinceName:params.data.ename,province:params.name},\n});\n});\n复制代码
完整代码
<script>\nexportdefault{\nrender:function(createElement){\nreturncreateElement(&34;,{\nattrs:{\nid:&34;,\n},\nstyle:{\nheight:&34;,\nwidth:&39;,\nmargin:&39;\n},\n});\n},\ndata(){\nreturn{\ndataList:[\n{name:&34;},\n{ename:&34;,name:&34;},\n{ename:&34;,name:&34;},\n{ename:&34;,name:&34;},\n{ename:&34;,name:&34;},\n{ename:&34;,name:&34;},\n{ename:&34;,name:&34;},\n{ename:&34;,name:&34;},\n{ename:&34;,name:&34;},\n{ename:&34;,name:&34;},\n{ename:&34;,name:&34;},\n{ename:&34;,name:&34;},\n{ename:&34;,name:&34;},\n{ename:&34;,name:&34;},\n{ename:&34;,name:&34;},\n{ename:&34;,name:&34;},\n{ename:&34;,name:&34;},\n{ename:&34;,name:&34;},\n{ename:&34;,name:&34;},\n{ename:&34;,name:&34;},\n{ename:&34;,name:&34;},\n{ename:&34;,name:&34;},\n{ename:&34;,name:&34;},\n{ename:&34;,name:&34;},\n{ename:&34;,name:&34;},\n{ename:&34;,name:&34;},\n{ename:&34;,name:&34;},\n{ename:&34;,name:&34;},\n{ename:&34;,name:&34;},\n{ename:&34;,name:&34;},\n{ename:&34;,name:&34;},\n{ename:&34;,name:&34;},\n{name:&34;},\n{ename:&34;,name:&34;},\n{ename:&34;,name:&34;},\n],\n};\n},\nmethods:{\ninitEchart(){\nletdataList=this.dataList;\nfor(leti=0;i<dataList.length;i++){\ndataList[i].value=Math.ceil(Math.random()*1000-1);\n}\nconst_this=this;\nvarmyChart=echarts.init(document.getElementById(&34;));\nvaroption={\ntooltip:{\n//数据格式化\nformatter:function(params,callback){\nreturn(\nparams.seriesName+&34;+params.name+&34;+params.value\n);\n},\n},\nvisualMap:{\nmin:0,\nmax:1000,\nleft:&34;,\ntop:&34;,\ntext:[&34;,&34;],//取值范围的文字\ninRange:{\ncolor:[&e0ffff&34;blue&34;china&34;10&34;rgba(0,0,0,0.7)&34;rgba(0,0,0,0.2)&34;skyblue&34;rgba(0,0,0,0.5)&34;省份&34;map&34;click&39;暂无&39;地图数据&34;/province&34;goBack()&34;id&34;o-echarts&39;&39;8%&39;8%&39;39;\n}\n},\ntooltip:{\npadding:0,\n//数据格式化\nformatter:function(params,callback){\nreturnparams.name+&39;+params.value\n}\n},\nlegend:{\norient:&39;,\ntop:&39;,\nleft:&39;,\nicon:&39;,\ndata:[],\nselectedMode:&39;,\nselected:{},\nitemWidth:12,\nitemHeight:12,\nitemGap:30,\ninactiveColor:&b6d7ff&39;39;,\nfontSize:14,\nfontWeight:300,\npadding:[0,0,0,15]\n}\n},\nvisualMap:{\nmin:0,\nmax:500,\nleft:&39;,\ntop:&39;,\ntext:[&39;,&39;],//取值范围的文字\ninRange:{\ncolor:[&e0ffff&39;blue&39;&39;39;\n},\nemphasis:{\nshow:true,\ncolor:&39;,\n}\n},\nitemStyle:{\nnormal:{\nborderColor:&39;\n},\nemphasis:{\nareaColor:&39;,//鼠标选择区域颜色\nshadowOffsetX:0,\nshadowOffsetY:0,\nshadowBlur:20,\nborderWidth:0,\nshadowColor:&39;\n}\n},\nleft:&39;,\nright:&39;,\ntop:&39;,\nbottom:&39;\n},\nseries:[\n{\nname:&39;,\ntype:&39;,\ngeoIndex:0,//不可缺少，否则无tooltip指示效果\ndata:[]\n}\n],\nprovinceJSON:{},\nprovinceName:&39;\n}\n复制代码
根据参数配置不同地图数据
constprovinceName=this.$route.query.provinceName\nconstprovince=this.$route.query.province\nthis.provinceName=provinceName\nthis.provinceJSON=require(&39;+provinceName)\nthis.option.geo.map=province\nthis.echartObj=echarts.init(document.getElementById(this.id))\necharts.registerMap(province,this.provinceJSON)\nthis.echartObj.setOption(this.option);\nwindow.addEventListener(&39;,()=>{\nif(this.echartObj&&this.echartObj.resize){\nthis.echartObj.resize()\n}\n})\n复制代码
完整代码
<template>\n<div>\n<div@click=&34;>返回</div>\n<div:id=&34;class=&34;></div>\n</div>\n</template>\n\n<script>\nexportdefault{\nname:&39;,\ndata(){\nreturn{\nid:&39;+newDate().getTime()+Math.floor(Math.random()*1000),\nechartObj:null,\noption:{\ntitle:{\ntext:&39;,\ntop:&39;,\nleft:&39;,\ntextStyle:{\nfontSize:14,\nfontWeight:300,\ncolor:&b6d7ff&34;transparent&39;：&39;vertical&39;9%&39;5%&39;circle&39;single&39;39;,\ntextStyle:{\ncolor:&ec808d&39;left&39;bottom&39;高&39;低&39;39;,&39;]//取值范围的颜色\n},\nshow:true//图注\n},\ngeo:{\nmap:&39;,\nroam:false,//不开启缩放和平移\nzoom:0.6,//视角缩放比例\nlabel:{\nnormal:{\nshow:true,\nfontSize:10,\ncolor:&000&39;blue&39;rgba(0,0,0,0.2)&39;skyblue&39;rgba(0,0,0,0.5)&39;5%&39;5%&39;5%&39;5%&39;年度总项目数据查询&39;map&39;&39;../../utils/省份数据/json(省份)/&39;resize&34;scss”>\n.o-echarts{\nheight:400px;\nwidth:600px;\nmargin:auto;\n}\n</style>
原文地址：https://juejin.cn/post/7082686310166560799
如果你还想了解更多这方面的信息，记得收藏关注本站。