vueecharts实现中国地图省份下钻联动

　　一起养成写作习惯！这是我参与掘金日新计划4月更文挑战的第4天，点击查看活动详情。说在前面
　　最近在捣鼓自己的个人博客网站，在管理统计页中想要加入地区用户访问数量统计图，原本准备使用饼图进行呈现，但是最后还是选择了呈现效果更好地地图来进行展示。在这里对此功能进行总结，也给大家分享一下在vue中echarts地图的使用，以及如何实现省市下钻联动
　　体验
　　jyeontu。xyzJDemochi引入echarts
　　npm下载npminstallecharts复制代码
　　cdn引入复制代码引入中国地图china。js复制代码配置中国地图定义一个p来作为地图的载体render：function（createElement）｛returncreateElement（p，｛attrs：｛id：main，｝，style：｛height：450px，width：600px，margin：auto｝，｝）；｝，复制代码设置各省份的值定义省份数据data（）｛return｛dataList：〔｛name：南海诸岛｝，｛ename：beijing，name：北京｝，｛ename：tianjin，name：天津｝，｛ename：shanghai，name：上海｝，｛ename：chongqing，name：重庆｝，｛ename：hebei，name：河北｝，｛ename：henan，name：河南｝，｛ename：yunnan，name：云南｝，｛ename：liaoning，name：辽宁｝，｛ename：heilongjiang，name：黑龙江｝，｛ename：hunan，name：湖南｝，｛ename：anhui，name：安徽｝，｛ename：shandong，name：山东｝，｛ename：xinjiang，name：新疆｝，｛ename：jiangsu，name：江苏｝，｛ename：zhejiang，name：浙江｝，｛ename：jiangxi，name：江西｝，｛ename：hubei，name：湖北｝，｛ename：guangxi，name：广西｝，｛ename：gansu，name：甘肃｝，｛ename：shanxi，name：山西｝，｛ename：neimenggu，name：内蒙古｝，｛ename：shanxi1，name：陕西｝，｛ename：jilin，name：吉林｝，｛ename：fujian，name：福建｝，｛ename：guizhou，name：贵州｝，｛ename：guangdong，name：广东｝，｛ename：qinghai，name：青海｝，｛ename：xizang，name：西藏｝，｛ename：sichuan，name：四川｝，｛ename：ningxia，name：宁夏｝，｛ename：hainan，name：海南｝，｛name：台湾｝，｛ename：xianggang，name：香港｝，｛ename：aomen，name：澳门｝，〕，｝；｝，复制代码随机给各省份赋值letdataListthis。dataLfor（leti0；idataList。i）｛dataList〔i〕。valueMath。ceil（Math。random（）10001）；｝复制代码鼠标悬浮展示
　　option中的tooltip可以设置鼠标悬浮在省份上的数据显示鼠标悬浮提示框series：〔｛name：省份，type：map，geoIndex：0，data：this。dataList，｝，〕，tooltip：｛数据格式化formatter：function（params，callback）｛return（params。seriesNamebrparams。name：params。value）；｝，｝，复制代码
　　如下图为鼠标悬浮在广东上的数据提示
　　visualMap图注配置数值映射
　　在min和max中，数值越大，区域颜色越深。visualMap：｛min：0，最小值max：1000，最大值left：left，位于地图左边top：bottom，位于地图下方text：〔高，低〕，取值范围的文字inRange：｛color：〔e0ffff，blue〕，取值范围的颜色｝，show：true，图注｝，复制代码geo地图绘制geo：｛map：china，引入地图数据roam：false，不开启缩放和平移zoom：1，视角缩放比例label：｛normal：｛show：true，fontSize：10，color：rgba（0，0，0，0。7），｝，｝，itemStyle：｛normal：｛borderColor：rgba（0，0，0，0。2），｝，emphasis：｛高亮的显示设置areaColor：skyblue，鼠标选择区域颜色shadowOffsetX：0，shadowOffsetY：0，shadowBlur：20，borderWidth：0，shadowColor：rgba（0，0，0，0。5），｝，｝，｝，复制代码省份区域点击事件
　　可以通过该点击事件实现省份下钻联动，点击跳转到省级地图页面，省级地图页面根据传入参数渲染不同的省份地图数据即可，具体实现后面会讲到。myChart。on（click，function（params）｛if（！params。data。ename）｛alert（暂无params。name地图数据）；｝this。router。push（｛path：province，query：｛provinceName：params。data。ename，province：params。name｝，｝）；｝）；复制代码完整代码复制代码展示效果
　　配置省级地图
　　前面通过中国地图的省份区域点击事件跳转到省级地图页面，并传递对应参数，在省级地图页面可以根据参入参数来渲染不同的地图数据。引入省份地图资源
　　如下图，省份地图资源的js版数据和json版数据我都已经放在源码中，这里我使用的是json版数据，有需要的同学可以直接去下载。
　　编写简单页面
　　返回按钮省级地图。返回复制代码地图配置
　　与前面中国地图的配置规则是一样的，按需配置即可option：｛title：｛text：，top：8，left：8，textStyle：｛fontSize：14，fontWeight：300，color：b6d7ff｝｝，tooltip：｛padding：0，数据格式化formatter：function（params，callback）｛returnparams。name：params。value｝｝，legend：｛orient：vertical，top：9，left：5，icon：circle，data：〔〕，selectedMode：single，selected：｛｝，itemWidth：12，itemHeight：12，itemGap：30，inactiveColor：b6d7ff，textStyle：｛color：ec808d，fontSize：14，fontWeight：300，padding：〔0，0，0，15〕｝｝，visualMap：｛min：0，max：500，left：left，top：bottom，text：〔高，低〕，取值范围的文字inRange：｛color：〔e0ffff，blue〕取值范围的颜色｝，show：true图注｝，geo：｛map：，roam：false，不开启缩放和平移zoom：0。6，视角缩放比例label：｛normal：｛show：true，fontSize：10，color：000｝，emphasis：｛show：true，color：blue，｝｝，itemStyle：｛normal：｛borderColor：rgba（0，0，0，0。2）｝，emphasis：｛areaColor：skyblue，鼠标选择区域颜色shadowOffsetX：0，shadowOffsetY：0，shadowBlur：20，borderWidth：0，shadowColor：rgba（0，0，0，0。5）｝｝，left：5，right：5，top：5，bottom：5｝，series：〔｛name：年度总项目数据查询，type：map，geoIndex：0，不可缺少，否则无tooltip指示效果data：〔〕｝〕，provinceJSON：｛｝，provinceName：｝复制代码根据参数配置不同地图数据constprovinceNamethis。route。query。provinceNameconstprovincethis。route。query。provincethis。provinceNameprovinceNamethis。provinceJSONrequire（。。。。utils省份数据json（省份）provinceName）this。option。geo。mapprovincethis。echartObjecharts。init（document。getElementById（this。id））echarts。registerMap（province，this。provinceJSON）this。echartObj。setOption（this。option）；window。addEventListener（resize，（）｛if（this。echartObjthis。echartObj。resize）｛this。echartObj。resize（）｝｝）复制代码完整代码template返回templatestylelangscss。oecharts｛height：400width：600margin：｝style
　　原文地址：https：juejin。cnpost7082686310166560799