企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
[TOC] * * * * * ## `Echarts-China` 实现中国地图 > 这个Demo可以实现的内容是: > 1.绘制基本的中国地图,标识每个省的颜色,放大和缩小及拖动; > 2.可以在地图上标出某个坐标(经纬度),并用不同的样式显示; > 3.点击地图上某个区域后会触发点击事件 ### 1. 效果图 ![](https://box.kancloud.cn/5b5aec804fb083385d44f807f928ada7_825x638.png) * * * * * ### 2. 需要的`js`包 ~~~ jquery-2.1.4.min.js echarts-4.0.2.min.js 如果要看错误提示等,可以下载源码包,2M多;压缩版的687KB china.js 这里定义了绘制中国地图所需要的数据。 也可以调用百度的接口获取数据,但我此时不需要那些东西,就想要个简单的地图。 map-china.js 我自定义 ~~~ * * * * * ### 3. `map-china.html` ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>map-china</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <style type="text/css"> html,body{ margin: 0; padding: 0; font-size: 12px; } .wrap{ padding: 2rem; margin: 2rem; border: solid 1px grey; border-radius: 0.5rem; } </style> </head> <body> <!-- 长度和宽度必须设置 --> <div class="wrap" id="map" style="width: 500px; height: 375px;"></div> <!-- required-begin --> <script src="libs/jquery-2.1.4.min.js"></script> <script src="libs/echarts-4.0.2.js"></script> <script src="libs/china.js"></script> <!-- required-end --> <!-- 自定义配置-begin --> <script src="js/map-china.js"></script> <!-- 自定义配置-end --> </body> </html> ~~~ * * * * * ### 4. `map-china.js` ~~~ var wrap= document.getElementById('map'), wrapW=wrap.getBoundingClientRect().width, chart = echarts.init(wrap); var option = { backgroundColor: '#33a3dc', title: { show: true, text: '中国地图显示', subtext: '数据中心统计', left: 'center', textStyle: { color: 'white', fontSize: '16' }, subtextStyle: { color: 'smokewhite', fontSize: '13' } }, tooltip: { trigger: 'item' }, geo: { //绘制基本的地图 map: 'china', roam: true, //是否可手势或者鼠标滚轮放大缩小 left: 10, //如果为0可最大化的在画布上显示地图,但也可能边缘处有的被隐藏,所以留一定的距离 right: 10, label: { normal: { show: true, formatter: '{b}', textStyle: { color: 'red' } } }, itemStyle: { normal: { borderColor: 'rgba(0, 0, 0, 0.2)' } }, emphasis: { itemStyle: { areaColor: '#ffe600' //鼠标移动到省份上或手指点击到省份上之后高亮的颜色 } }, regions: [ //这里可自定义每一个省的颜色 { name: '甘肃', itemStyle: { areaColor: '#faa755' } }, { name: '新疆', itemStyle: { areaColor: '#ea66a6' } }, { name: '浙江', itemStyle: { areaColor: 'green' } }, { name: '北京', itemStyle: { areaColor: '#ffc20e' } } ], }, series: [{ //如果要在中国地图这一坐标里的特定位置做标记,就需要这些配置 name: '我想标出的点', type: 'effectScatter', coordinateSystem: 'geo', symbol: 'circle', symbolSize: 15, //这里也是可以用一个函数的,根据数据来决定标记的大小 label: { show: true, position: 'bottom', formatter: function(params) { console.log(params) let data=params.data; return params.name + '-' + data.capital+':'+data.man; }, fontSize: 11, color: 'white', backgroundColor: 'rgba(242,50,18,1)', borderRadius: 4, padding: [1, 2, 1, 2] }, tooltip: { show: false, }, itemStyle: { normal: { color: '#f4e925', shadowBlur: 25, } }, data: [ //在地图按照坐标找出点 {name: '新疆', capital: '库尔勒', value: [86.06,41.68], man: '帆帆挖金' }, {name: '甘肃', capital: '兰州', value: [103.73,36.03,9], man: '未来建筑师' } ], zlevel: 3 }] }; chart.setOption(option); chart.on('click', function(params) { //这里可以根据参数的不同确定点击的区域,作出不同反应 }); ~~~