echarts实现河南各省市区县地图（河南省各省市区县地图json文件可以在我博客里下载）

前言：最近公司项目有个需求，展示河南省各省市区县的地图，并展示相应的数据，看了些资料决定用echarts实现。
一、完成之后的效果图

点击市的模块显示对应的市，并显示对应市的数据

点击区县的模块显示对应的区县，并显示对应区县的数据

二、实现方法
1、首先要确定已经引入的echart的文件,vue项目和html项目的引入方法不一样，在此不再赘述，童鞋们自行百度。
2、把需要用到的json文件放到本地（json文件获取的方法后续我会上传，童鞋们自行下载），在此我放到了static目录下，如下图：

3、页面中请求加载json文件，然后初始化echarts，把加载到的数据传入echarts即可，在这里直接上代码了：

<template><div class="commonCenter"><div class="newecharts" id="mapEcharts" @click="clickmap" style="width:600px;height:600px;"></div></div>
</template>
<script>export default {data() {return {mapoption: {},mydata: [],mapEcharts: null,name:'河南省',code:'410000'};},created(){},mounted() {var _this = this;this.$nextTick(() => {_this.initMap(_this.name, _this.code)});},methods: {clickmap(val) {var _this = this;this.mapEcharts.on("click", function(param) {var name = param.data.properties.name;var code = param.data.properties.adcode;_this.initMap(name, code+'')  })},initMap(name, code) {var _this = this;_this.$emit('clickmap',{code:code,name:name})$.getJSON(`static/json/newMapJson/${code}.json`, "", function(res) {echarts.registerMap(name, res, {}); //引入地图文件var mapData = res.features;for (let i = 0; i < mapData.length; i++) {mapData[i].name = mapData[i].properties.name;mapData[i].center = mapData[i].properties.center;mapData[i].value = Math.floor(Math.random() * 10 + 1);}_this.mapoption = {tooltip: {trigger: "item",},layoutCenter: ['48%', '44%'], //距离左右，上下距离的百分比layoutSize: 600,series: [{name: name + "专项整治",type: "map",map: name, //地图名称coordinateSystem: "geo", // series坐标系类型data: mapData, // series数据内容label: {show: true,color: "#fff",fontSize: 12,formatter:function(res){}},itemStyle: {normal: {borderWidth: 2, //边际线大小borderColor: "#00ffff", //边界线颜色areaColor: "rgb(50,131,127)", //默认区域颜色},emphasis: {show: true,areaColor: "rgba(48,131,182)", //鼠标滑过区域颜色label: {show: true,textStyle: {color: "#000",},},},},}, ],// visualMap: {//   min: 1,//   max: 10,//   left: "left",//   top: "bottom",//   text: ["高", "低"], // 文本，默认为数值文本//   realtime: false,//   calculable: false,//   inRange: {//     color: ["lightskyblue", "yellow", "orangered"],//   },// }};_this.mapEcharts = echarts.init(document.getElementById("mapEcharts"));_this.mapEcharts.setOption(_this.mapoption);});},},};
</script>
<style lang="less" scoped>
</style>

注：为了便于童鞋们上手，在这里我把加载数据和返回上一级的功能代码去掉了，只留了加载地图的代码，需要根据不同的地市加载不同数据的话可以直接写
三、结尾下载全国各地市json文件的地址（河南各省市区县的以名字命名的和区域代码命名的都已打包好上传，童鞋们可以去我博客自行下载）：
1、全国各地市json文件下载地址：
（1）http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=33.521903996156105&lng=104.29849999999999&zoom=4
（2）https://hxkj.vip/demo/echartsMap/

echarts实现河南各省市区县地图（河南省各省市区县地图json文件可以在我博客里下载）相关推荐

vue echarts 中国地图省级联动+散点图（各省json文件及china.js）
最近用echarts 做个散点图,且省级联动,效果图如下: 1.安装echarts cnpm install echarts --save 2.引入echarts.中国地图及省份地图json impo ...
echarts地图坐标系及多个省份json文件的合并
安装echarts yarn add echarts 获取省市区数据来源的json文件 datav使用的是高德坐标系,即国测局坐标(GCJ-02).对于GPS,即WSG84坐标系经纬度需要转GCJ-0 ...
echarts 中国地图飞机实现demo 中国地图路线飞行 echarts飞行
先看看效果图, 如果是你的菜请往下看. html 代码 <template><div id="chineView"></div> </t ...
ArcGIS+百度地图API：制作杭州市边界shp文件
参考文章:百度地图API+ArcGIS软件-城市出行时空数据可视化_WenWu_Both的博客-CSDN博客这篇博客在介绍的时候遗漏了很多关键步骤,我对此进行了必要的补充. 一.获取轮廓线的代码(g ...
点云地图PCL转换成为八叉树地图octomap
//TODO //完成离线点云地图到八叉树地图的转换 //进一步在线实时完成点云地图到八叉树地图的转换转载自高翔的博客:SLAM拾萃(1):octomap *******************我是 ...
百度地图android兼容,Android百度地图SDK无法支持64位平台完美解决方案
首先强调下,百度地图早已经处理了对64位平台的支持,而且现在很多手机都用64位处理器了,而且很多应用使用百度地图sdk都没有问题,那么问题就是我们没有使用好百度地图了. 最近开发项目时候遇到一个问题, ...
echarts河北省json文件最新的_echarts地图边界数据的实时获取与应用，省市区县多级联动【附最新geoJson文件下载】...
首先,来看下效果图前段时间给公司弄了一套基于echarts map的地图数据展示的平台,开发过程中发现百度官方已经不提供地图下载了,于是只能期望能在网上搜到哪位大佬帮忙收集的json文件.找是找到了 ...
echarts之河南省市地图（根据数据大小控制颜色显示变化）
直接上代码: var mapOption = {tooltip: {show: true //鼠标经过提示},visualMap: {show: false,min:10,max: 50, //控制根 ...
2023年实时获取地图边界数据方法，省市区县多级联动【附区县乡镇街道geoJson文件下载】
首先,来看下效果图在线体验地址:https://geojson.hxkj.vip,并提供实时geoJson数据文件下载可下载的数据包含省级geojson行政边界数据.市级geojson行政边界数据 ...

echarts实现河南各省市区县地图（河南省各省市区县地图json文件可以在我博客里下载）

echarts实现河南各省市区县地图（河南省各省市区县地图json文件可以在我博客里下载）相关推荐

最新文章

热门文章