一、原理

引用对应市区json数据（比如我就是引用的河南省驻马店市的数据），通过百度地图坐标拾取器获取地区的经纬度，将数据填在对应位置（我下面有注释），再配置下样式颜色之类的渲染上就可以了

二、看图片可能感受不大，下面是我echarts社区的主页，里面有这个例子，大家可以去看看效果

我的echarts个人主页

三、效果图

四、直接上代码，解释在注释里

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"><title></title><script type="text/javascript" src = "jquery-3.4.1.js的路径"></script><script type="text/javascript" src = "echarts.js的路径"></script>
</head>
<body>
<div id="map" style="width: 1200px;height:900px;"></div>
<script type="text/javascript">var dom = document.getElementById("map");//得到echarts的实例对象var myChart = echarts.init(dom);//根据百度地图坐标拾取器来的经纬度var geoCoordMap = {'遂平县': [114.015819, 33.150944],'上蔡县': [114.276256, 33.267906],'西平县': [114.022143, 33.394355],"驿城区": [114.006045, 32.978599],'确山县': [114.033641, 32.810768],"泌阳县": [113.335694, 32.731107],"汝南县": [114.375141, 33.016389],"正阳县": [114.398138, 32.615372],"平舆县": [114.629254, 32.969876],"新蔡县": [114.979952, 32.752487]};//数据信息（黄色点点的大小，鼠标移上去会显示这个数据）var data = [{name: "遂平县",value: 199},{name: "上蔡县",value: 170},{name: "西平县",value: 102},{name: "驿城区",value: 81},{name: "确山县",value: 147},{name: "泌阳县",value: 130},{name: "汝南县",value: 172},{name: "正阳县",value: 123},{name: "平舆县",value: 120},{name: "新蔡县",value: 292}];//处理数据的函数,将经纬度,名称,value结合到一起放入series中的data中var convertData = function(data) {var res = [];for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name];if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value)});}}return res;};//配置样式var optionMap = {backgroundColor: '#404a59',title: {text: 'XX数量-驻马店市',left: 'center',textStyle: {color: '#fff'}},//鼠标移到黄点点上显示数据就是配置的这个tooltip: {trigger: 'item',//自定义修改显示formatter: function(data) {return res = '<div><p>数量：' + data.value[2] + '</p></div>'},},geo: {map: 'china',//中心点(经纬度)center: [114.006045, 32.978599],//缩放比例zoom: 1.2,label: {emphasis: {show: false}},//是否允许拖拽roam: true,itemStyle: {normal: {areaColor: '#323c48',borderColor: '#111'},emphasis: {areaColor: '#2a333d'}}},series: [{name: 'pm2.5',type: 'effectScatter',coordinateSystem: 'geo',data: convertData(data),symbolSize: function(val) {return val[2] / 10;},showEffectOn: 'render',rippleEffect: {brushType: 'stroke'},hoverAnimation: true,label: {normal: {formatter: '{b}',position: 'right',show: true}},itemStyle: {normal: {color: '#f4e925',shadowBlur: 10,shadowColor: '#333'}},zlevel: 1}]};//411700.json 是对应区域的地理信息json文件$.get('../json/411700.json', function (myJson){echarts.registerMap('411700', myJson) //注册optionMap.geo.map = '411700';myChart.setOption(optionMap);});</script>
</body>
</html>

五、本地访问json会有跨域的问题,为了图方便我就放在了服务器上看网页的效果…在社区的话没有这个问题

echarts市级区域地图数据展示相关推荐

Echarts实现区域地图数据渲染的一些尝试 || 各种方案/资源的集锦
最近,需要利用Ecarts完成一个区域地图数据渲染,因为区域地图每一块的数据能尽可能渲染的丰富一些,比如一些点的预警以及区域色块的区分,所以和之前只是简单根据每个区域数据量(单块数据)渲染有所不同. ...
echarts实现中国地图数据展示
在项目中运用到图形展示数据太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts: 一般运用到条形.折线.扇形图,今天说一说在中国地图上展示各地数据: 首先要准备中国地 ...
echarts geo地图示例_基于Echarts的中国地图数据展示
一.概述实际项目中大概率会遇到很多需要进行数据展示的地方,如折现图,柱状图等,今天给大家介绍一个更加炫酷的中国地图大数据展示,结合echarts免费开源第三方插件,可以实现自己的定制样式,定制提示. ...
echarts自定义区域地图
echarts自定义区域地图地图代码逻辑梳理文件梳理 myChina.json mapData.json mock.json(权限json---等同于后台返回的权限json) chinaMapDa ...
react可视化项目 ECharts 3D区域地图图表+点击取消高亮黄色
react 可视化项目 ECharts 3D区域地图图表地图介绍 echarts图表引入 react页面中引入使用地图介绍做可视化项目时需要3d的区域地图,在网上搜到ECharts社区的一个其他 ...
【vue项目使用echarts实现区域地图绘制，且可点击单独区域】
vue项目使用echarts实现区域地图绘制,且可点击单独区域 - 菜鸟程序员的总结 - 博客园
superset 最新版地图数据展示问题
superset 最新版本配置地图的时候,可能不显示数据,具体什么原因呢? superset里的地图用的是 iso3166-2 编码,所以你要想让superset的地图数据展示出来,需要用他的编码保 ...
echarts——实现大屏数据展示——基础积累（超详细）
echarts--实现大屏数据展示--柱状图+堆叠柱状图+table表格等功能的使用最近在做大屏数据展示,样式真的超级好看.但是细节处理也是比较麻烦的. 最终效果图如下: 下面对我遇到的几个知识点进 ...
echarts地图api series_echarts实现中国地图数据展示
在项目中运用到图形展示数据太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts: 一般运用到条形.折线.扇形图,今天说一说在中国地图上展示各地数据: 也可以在gith ...

echarts市级区域地图数据展示

一、原理

二、看图片可能感受不大，下面是我echarts社区的主页，里面有这个例子，大家可以去看看效果

三、效果图

四、直接上代码，解释在注释里

五、本地访问json会有跨域的问题,为了图方便我就放在了服务器上看网页的效果…在社区的话没有这个问题

echarts市级区域地图数据展示相关推荐

最新文章

热门文章