Echarts实现省级地图的两种方法（以浙江省为例） |
您所在的位置：网站首页 › 中国各省地图中国地图 › Echarts实现省级地图的两种方法（以浙江省为例） |
Echarts实现省级地图的两种方法（以浙江省为例）
|
Echarts实现省级地图的两种方法（以浙江省为例）
在echarts调用地图时，我们往往会使用GeoJson格式的数据，根据网上的资料，会发现官网会提供世界、中国以及各省的数据。但是，访问下载最新的echarts组件时，会发现echarts暂不提供地图下载。所以，我们需要自己找GeoJson数据，仔细一点会发现，其实在安装echarts依赖时，已经将数据下载到项目中了。你想要的省级Js、Json文件，node_modules文件下全都有。 echarts下载地址https://echarts.apache.org/zh/download-map.html.
在main文件中引用 import ‘…/node_modules/echarts/map/js/province/zhejiang.js’; 第二步 主体结构 let mychart = this.$echarts.init(document.getElementById("mychart")); let option = { geo: { map: 'china' } } mapChart.setOption(option); 第三步 具体实现 initZheJiang() { let that = this; this.mychart = this.$echarts.init(document.getElementById("mychart")); // 绘制图表 this.mychart.setOption({ backgroundColor: "#404a59", title: { text: "浙江", top: 25, left: "center", textStyle: { fontSize: 25, fontWeight: 650, color: "#fff", }, }, tooltip: { trigger: "item", formatter: function (val) { return val.data.name + "人数: " + val.data.value + "人"; }, }, toolbox: { show: true, orient: "vertical", left: "right", top: "center", feature: { dataView: { readOnly: false }, restore: {}, saveAsImage: {}, }, }, series: [ { type: "map", map: "浙江",//这里需要注意呀, //mapType: "浙江", // 是否开启鼠标缩放和平移漫游 默认不开启 itemStyle: { normal: { areaColor: "#323c48", borderColor: "#111", }, emphasis: { areaColor: "#2a333d", label: { show: true, color: "white", }, }, }, roam: true, top: 70, label: { show: true, // 是否显示对应地名 }, data: this.cityDatas, }, ], }); this.mychart.on("click", function (params) { console.log(params); that.selCity = params.name; console.log(this); console.log(that); for (let i = 0; i that.geoJson = that.cityList[i].cityJson; console.log(that.geoJson); } else { console.log("不符合"); } } console.log(that.selCity); debugger; that.onLoadMap(that.geoJson); }); },对于mapType/map的值需要说一句 中国、世界地图是英文，省份是中文。比如 ‘china’ ，'浙江’等，若填写’zhejiang’是找不到的。 引用之前可以查看一下js文件啦。一定要引对。
主要看echarts.registerMap(’ ')中注册的名字。
在main文件中引用 import ‘…/node_modules/echarts/map/json/province/zhejiang.json’; 第二步 主体结构 mapJsonPath = "";//json文件的相对路径 $.get(mapJsonPath, function (mapJson) { echarts.registerMap("浙江", mapJson);// 注册地图 let option = { series: [ { name: this.selCity, type: "map", mapType: "浙江", // 自定义扩展图表类型 label: { show: true, }, }, ], }; that.mychart.setOption(option); });同样，我们也可以将地图进行可视化。 那么，我们同样也可以将外部的json数据引入使用。可以从http://datav.aliyun.com/tools/atlas/进行下载需要的json数据。（数据只到区县级） 这样对代码进行整理编写，用if语句，减少代码的重复率，可实现地图下钻。会在之后进行更新。 |
所以，要好好的用echarts提供的数据进行地图数据可视化。
要想数据到更下一级，则可以访问 http://geojson.io进行手动绘制。 
【本文地址】
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |