echarts市级地图以及给个区块的自定义颜色完整版 |
您所在的位置：网站首页 › echarts地图数据怎么导入 › echarts市级地图以及给个区块的自定义颜色完整版 |
echarts市级地图以及给个区块的自定义颜色完整版
|
放一张完整的图看下效果  视频效果 首先需要下载一个市级地图的json文件，网上很多下载方法，这里说一下我的下载途径，去Ps拉框助手上找到示例大全下的地图菜单  找到你需要的市级名称，并下载json文件  得到json数据后开始初始化echarts地图吧，（注意：我这里涉及到最新的行政区划合并更改，比如三山区与弋江区合并，但是各大地图数据并没有及时更新，这里要做就是自己手动去合并，只要把json数据下的两个区域，coordinates数据合并就可以了，具体可以参考镜湖区的格式，目前两个区域之间的线还没有找到解决方法去掉，各路大神看到可以指点一下） var geoCoordMap = { '弋江区': [118.27958, 31.217566], '镜湖区': [118.392606, 31.345866], '湾沚区': [118.582443, 31.141239], '鸠江区': [118.207874, 31.386268], '无为市': [117.908579, 31.308844], '繁昌区': [118.155424, 31.057959], '南陵县': [118.340414, 30.92026] };以上的区域名称需要和json里面对应，不一样的自己手动更改一下，统一就行，区域后面的经纬度是根据百度地图坐标拾取器来的，（不会的可以私我），位置就是地图上圆圈的位置，错位的可以手动微调一下。 //数据信息（黄色点点的大小，鼠标移上去会显示这个数据） var data = [{ name: "弋江区", value: 199 }, { name: "镜湖区", value: 170 }, { name: "湾沚区", value: 102 }, { name: "鸠江区", value: 81 }, { name: "无为市", value: 147 }, { name: "繁昌区", value: 130 }, { name: "南陵县", value: 172 } ]; //处理数据的函数,将经纬度,名称,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; };以上是区域的数据，区域名称不要搞错， geo是核心部分，对地图整体样式的配置，代码也做了标注: geo: { map: 'wuhu', //中心点(经纬度) center: [118.27958, 31.117566], //缩放比例 zoom: 1.1, label: { emphasis: { show: false } }, //是否允许拖拽 roam: true, itemStyle: { normal: { areaColor: '#323c48',//默认区块颜色 borderColor: '#03b8c0',//区块描边颜色 borderWidth:2//区块描边颜色 }, emphasis: { areaColor: '#45ad00'//鼠标划过区块的颜色 }, }, regions: [ //对不同的区块进行着色 { name: '无为市', //区块名称 itemStyle: { normal: { areaColor: '#281fe1' } } },{ name: '繁昌区', //区块名称 itemStyle: { normal: { areaColor: '#193094' } } },{ name: '南陵县', //区块名称 itemStyle: { normal: { areaColor: '#4210c2' } } },{ name: '湾沚区', //区块名称 itemStyle: { normal: { areaColor: '#295bcc' } } },{ name: '镜湖区', //区块名称 itemStyle: { normal: { areaColor: '#009900' } } },{ name: '弋江区', //区块名称 itemStyle: { normal: { areaColor: '#1f95e1' } } },{ name: '鸠江区', itemStyle: { normal: { areaColor: '#1042c2' } } }] },此处需要引入json数据，一开始下载的市级地图json文件 //wuhu.json 是对应区域的地理信息json文件 $.get('json/wuhu.json', function (myJson){ echarts.registerMap('wuhu', myJson) //注册 optionMap.geo.map = 'wuhu'; myChart.setOption(optionMap); // 地图自适应 window.onresize = function () { myChart.resize(); } });最后，贴一下完整的代码 // 芜湖 地图 wuhuMap() function wuhuMap(){ var dom = document.getElementById("wuhuMap"); //得到echarts的实例对象 var myChart = echarts.init(dom); //根据百度地图坐标拾取器来的经纬度 var geoCoordMap = { '弋江区': [118.27958, 31.217566], '镜湖区': [118.392606, 31.345866], '湾沚区': [118.582443, 31.141239], '鸠江区': [118.207874, 31.386268], '无为市': [117.908579, 31.308844], '繁昌区': [118.155424, 31.057959], '南陵县': [118.340414, 30.92026] }; //数据信息（黄色点点的大小，鼠标移上去会显示这个数据） var data = [{ name: "弋江区", value: 199 }, { name: "镜湖区", value: 170 }, { name: "湾沚区", value: 102 }, { name: "鸠江区", value: 81 }, { name: "无为市", value: 147 }, { name: "繁昌区", value: 130 }, { name: "南陵县", value: 172 } ]; //处理数据的函数,将经纬度,名称,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: '芜湖市', left: 'center', textStyle: { color: '#fff' } }, //鼠标移到黄点点上显示数据就是配置的这个 tooltip: { trigger: 'item', //自定义修改显示 formatter: function(data) { return res = '人数：' + data.value[2] + ' ' }, }, geo: { map: 'wuhu', //中心点(经纬度) center: [118.27958, 31.117566], //缩放比例 zoom: 1.1, label: { emphasis: { show: false } }, //是否允许拖拽 roam: true, itemStyle: { normal: { areaColor: '#323c48',//默认区块颜色 borderColor: '#03b8c0',//区块描边颜色 borderWidth:2//区块描边颜色 }, emphasis: { areaColor: '#45ad00'//鼠标划过区块的颜色 }, }, regions: [ //对不同的区块进行着色 { name: '无为市', //区块名称 itemStyle: { normal: { areaColor: '#281fe1' } } },{ name: '繁昌区', //区块名称 itemStyle: { normal: { areaColor: '#193094' } } },{ name: '南陵县', //区块名称 itemStyle: { normal: { areaColor: '#4210c2' } } },{ name: '湾沚区', //区块名称 itemStyle: { normal: { areaColor: '#295bcc' } } },{ name: '镜湖区', //区块名称 itemStyle: { normal: { areaColor: '#009900' } } },{ name: '弋江区', //区块名称 itemStyle: { normal: { areaColor: '#1f95e1' } } },{ name: '鸠江区', itemStyle: { normal: { areaColor: '#1042c2' } } }] }, series: [{ // name: '', 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: 'red'//圆点光晕的颜色 } }, zlevel: 1 }], }; //wuhu.json 是对应区域的地理信息json文件 $.get('json/wuhu.json', function (myJson){ echarts.registerMap('wuhu', myJson) //注册 optionMap.geo.map = 'wuhu'; myChart.setOption(optionMap); // 地图自适应 window.onresize = function () { myChart.resize(); } }); }总结，无论市级，省级，还是china地图，原理是一样的。 |
【本文地址】
今日新闻 |
推荐新闻 |