基于echarts实现中国地图显示,省份区域地区鼠标悬停显示区域数据,数据从低到高,显示不同的颜色,主要用于数据统计。效果如下图所示:
步骤1:引入相关地图文件
引入 echarts.min.js 和 china.js
附件下载及案例:
链接:https://pan.baidu.com/s/1T_1zb-LObESMu90Y_Zq5dg
提取码:ia9w
步骤2:用于存放地图的盒子
<div id="region" style="width: 700px;height:600px;"></div>
步骤3:js实例化代码:
<script> var myChart2 = echarts.init(document.getElementById('region')); var option2 = { backgroundColor: '#FFFFFF', title: { text: '中国', x:'center' }, tooltip : { trigger: 'item' }, visualMap: { min: 0, max: 1000000, text:['高','低'], realtime: false, calculable: false, color: ['orangered','yellow','lightskyblue'] }, series: [{ name: '浏览量', type: 'map', mapType: 'china', roam: false, label: { normal: { show: true }, emphasis: { show: true } }, itemStyle: { normal: { borderWidth: .5,//区域边框宽度 borderColor: '#FFF7FB',//区域边框颜色 areaColor:"#C4E1FF",//区域颜色 }, emphasis: { borderWidth: .5, borderColor: '#4b0082', areaColor:"#ece39e", } }, data:[ {name: '北京', value: 1100}, {name: '湖北', value: 2221250}, {name: '上海', value: 1500}, {name: '广州', value: 5200}, {name: '广东', value: 900500}, {name: '新疆', value: 5000}, {name: '西藏', value: 500000}, {name: '湖南', value: 21250}, {name: '内蒙古', value: 182250} ] }] }; myChart2.setOption(option2); </script>
以上就是echarts实现中国地图分布案例,常见的区域分布图,我们在百度统计上可以看到类似,还有今年2020的全国区域疫情概况分布图,大家只需稍微更改下,自定义下即可。
注:echarts生成世界地图方法参考:/fdetail/391.html