echarts点击省份显示对应的省份
1、因为业务要用到城市数据展示，由于echartsjs 中国地图及省份地图已经找不到demo了，所以只能在网上找对应的文章，但是找到的文章也不太符合自己的代码习惯，决定自己来编写吧。
2、网上很多文章要么就是代码不全，要么就是代码比较多，比较难于理解，所以着手自己整理一份。
3、地图展示，单击即可全国或省份切换
4、使用npm下载最新的 echarts ，$ cnpm i echarts 下载到本地，然后里面包含了china，及省份地图；
5、目录结构
6、index.html 代码展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>echarts</title> <style> *{padding: 0;margin: 0;} #china{ background-color: #f1f1f1; } </style> </head> <body> <div id="china" style="width:100%;height:600px;"></div> <script src="./node_modules/jquery/dist/jquery.min.js"></script> <script src="./node_modules/_echarts@4.6.0@echarts/dist/echarts.min.js"></script> <script src="./node_modules/_echarts@4.6.0@echarts/map/js/china.js"></script> <!-- <script src="./node_modules/_echarts@4.6.0@echarts/map/js/province/guangdong.js"></script> --> <script src="./js/init.js"></script> </body> </html>
7、init.js 代码展示
var myChart = echarts.init(document.getElementById('china')); var option = { tooltip:{ show:true, formatter:function(params){ if(params.data){ return params.name+'<br/>人数：'+params.data.value[0]+'<br/>设备：'+params.data.value[1] } } }, visualMap: { type:'continuous', orient: 'horizontal', //控制条横向 bottom:20, min: 0, max: 10000, inRange: { color: ['#ffd200','#ff0000'] }, text: ['高', '低'], // // calculable: true, //是否显示拖把 }, series:[ { type:'map', mapType:'china', // roam:true, label: { show: true }, // 区域颜色 itemStyle:{ areaColor:'#ffff00' }, //鼠标聚焦时的区域颜色 emphasis:{ itemStyle:{ areaColor:'#dede00' } }, //虚拟数据 data:[{ name: '北京', value: [1000, 5000] }, { name: '广东', value: [200, 300] }], } ], }; myChart.setOption(option); //定义全国省份的数组 var cityArr=[ ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林','黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东','河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门', '台湾'], ['shanghai', 'hebei','shanxi','neimenggu','liaoning','jilin','heilongjiang','jiangsu','zhejiang','anhui','fujian','jiangxi','shandong','henan','hubei','hunan','guangdong','guangxi','hainan','sichuan','guizhou','yunnan','xizang','shanxi1','gansu','qinghai','ningxia','xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen', 'taiwan'] ]; myChart.on('click', function (param) { // 城市中文名 var cityName = param.name; // 查找是否有对应城市有则加载城市 for(var i=0,len=cityArr[0].length;i<len;i++){ if(cityName==cityArr[0][i]){ // 获取得城市拼音 showCity(cityArr[0][i], cityArr[1][i]); return; } } //没有找到对应城市的话，那么返回到全国地图 option.series[0].mapType='china'; myChart.setOption(option); }); // 定义省份 /** * * @param {城市中文名} zhName * @param {城市拼音名} pyName */ function showCity(zhName, pyName){ console.log(zhName, pyName); $.getScript('./node_modules/_echarts@4.6.0@echarts/map/js/province/'+pyName+'.js', function(){ // 设定中文省份名才能显示相关省份，之后想要设置什么数据，直接设置到option这里就可以了 option.series[0].mapType=zhName; // 深拷贝，另建option以免丢失原始option数据 var cityOption = JSON.parse(JSON.stringify(option)); // 模拟虚拟数据 if(zhName=='广东'){ cityOption.series[0].data=[{ name: '梅州市', value: [100, 100] }, { name: '深圳市', value: [100, 200] }] }else if(zhName=='北京'){ cityOption.series[0].data=[{ name: '海淀区', value: [500, 1000] }, { name: '朝阳区', value: [500, 4000] }] } myChart.setOption(cityOption); }); } // 地图跟随浏览器缩放 window.onresize=function(){ myChart.resize(); }
