Echarts+DataV.GeoAtlas地理小工具实现地图及其注意事项

DataV.GeoAtlas地理小工具实现地图：DataV.GeoAtlas地理小工具系列

实现效果：

惠州地图获取，从地理小工具官网中下载

其他地图如大亚湾则需自行找资源。

下面为实现代码：

<template><div class="echartsMapAllDemo"><div id="myEcharts" ref="myEcharts"></div></div>
</template>
<script>
import chinaJson from "@/static/dyw.json";
export default {data() {return {mapData:[]};},mounted() {},methods: {initMapData(year){this.request("/index/getAreaQuantityYear", { year: year}, "get").then((res) => { res.forEach(item => {var num={ name:"", value:"",}num.name=item.NAME;num.value=item.QUANTITY;this.mapData.push(num);});this.chinaEcharts(this.mapData);// 准备数据之前清空地图数据this.mapData=[]});},chinaEcharts(data) {//1.注册一个地图this.$echarts.registerMap("大亚湾", chinaJson);//2.初始化echartslet myChart = this.$echarts.init(this.$refs.myEcharts);//5.echarts配置let option = {backgroundColor: "transparent",// layoutCenter: ['1350%', '500%'],// layoutSize: '5500%',title: {text: "",subtext: "",sublink: "",left: "center",textStyle: {color: "#fff",},},tooltip: {trigger: "item",// formatter: "{b}<br/>{c} ",formatter: function (params) {let name = params.name;let value = "";//判断字符类型是否是NANif(params.value !== params.value){value=0}else{value=params.value;}return name+"<br/>"+value;}},visualMap: {min: 1,max: 100,text: ["High", "Low"],calculable: true,seriesIndex: [0], //这个对应的是series的数组下标inRange: {color: ["#00467F", "#A5CC82"],},},geo: {map: "大亚湾",roam: false,  label: {normal: {show: true,},emphasis: {show: true,textStyle: {color: "#000",},},},},//series就是地图上的数据（去掉就没有数据了）series: [{zoom: 100,type: "map",geoIndex: 0,aspectScale: 1.0, //长宽比showLegendSymbol: false, // 存在legend时显animation: false,data: data,},],};myChart.setOption(option);window.addEventListener("resize", function () {myChart.resize();});},},
};
</script>
<style scoped>
.echartsMapAllDemo {height: 100%;border-radius: 20px;/* background-color: azure; */
}
#myEcharts {width: 100%;border-radius: 20px;/* height: 672px; */height: 100%;
}
</style>

值得注意的有一下几点

1，注册地图时候，如果是市区级地图则不能通过"china"注册

如图（这会导致市区级地图缩小，且不好调位置）

//1.注册一个地图this.$echarts.registerMap("china", chinaJson);

正确做法是如下所示，同理geo/series里面的地图名也得注意更改

   //1.注册一个地图this.$echarts.registerMap("大亚湾", chinaJson);

2，悬浮窗内容的更改

其中，根据查询出来的数据最开始，当没有数据时显示的为NAN数据类型，如何判断此类型呢？

如下图代码所示，其中tooltip为悬浮窗显示字段，formatter为悬浮窗内容，要更改内容则可以直接从此处下手。

tooltip: {trigger: "item",// formatter: "{b}<br/>{c} ",formatter: function (params) {let name = params.name;let value = "";//判断字符类型是否是NANif(params.value !== params.value){value=0}else{value=params.value;}return name+"<br/>"+value;}

更好的写法：

tooltip: {trigger: "item",// formatter: "{b}<br/>{c} ",formatter: (params) =>params.name + "<br/>" + (params.value ? params.value : 0),},

3，地图省市区标签显示，和颜色的调整

如下代码所示：

lable中的normal{show:true}表示地级市标签显示

emphasis{}表示鼠标hover之后字段是否继续显示，以及显示时字体颜色。

roam属性表示地图是否可以被拖动

 geo: {map: "大亚湾",roam: false,  label: {normal: {show: true,},emphasis: {show: true,textStyle: {color: "#000",},},},},

写好组件后，父组件引用

<Map></Map>

Echarts+DataV.GeoAtlas地理小工具实现地图及其注意事项相关推荐

echarts实现单个城市下所有区域地图
一:需求:展示中国某一个市下面所有的区域地图并轮播高亮显示(以南京市为例) 二:数据来源 DataV.GeoAtlas地理小工具系列(写这篇文章的时候提示服务升级) 三:具体实现如下(vue实现) ...
android倒计时小工具,为五一放假倒计时《倒数日小工具》
俗话说好记性不如烂笔头,有时候记到脑子里并不一定是最保险,因为它总有短路和不灵光的时候,当你忘记精彩的球赛.周年纪念日.生日等重要时刻的时候,再拍着脑袋追悔莫及就为时已晚了.装上这款Android&l ...
使用Echarts将Excel数据转换成色彩地图HTML小工具
朋友有个需求想要把excel数据转换成地图分布图,而且想要动态修改数据生成不同时间段的数据,于是我就想办法给他做了个工具,下面是所有代码逻辑,很简单代码,结尾附带源码文件,只有一个html文件,很方便 ...
高德地图（第二篇）测量距离小工具
实现如下图一样的小工具操作说明: 1.在地图上长按选点,第一个点添加起点marker,底部导航点为红色表示正在编辑 2.连续选点会弹出气泡计算总距离,底部导航点为红色表示正在编辑 3.点击气泡内垃圾 ...
arcgis地图开发测面、测距、定位小工具
arcgis小工具(测面.测线.定位等) 一下三个功能用到的arcgis文件汇总: import Graphic from "@arcgis/core/Graphic"; impo ...
腾讯地图SDK距离测量小工具
以下内容转载自面糊的文章<腾讯地图SDK距离测量小工具> 作者:面糊链接:https://www.jianshu.com/p/6e507ebcdd93 来源:简书著作权归作者所有.商业 ...
python 画一张中国地图 geopandas 城市地图 DATAV.GeoAtlas
地图json获取: DATAV.GeoAtlas http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=10 ...
Map Tile地图切片小工具
Map Tile 地图切片小工具想把一张高分辨率的图片切成像Google Maps那样256*256的分级小瓦片吗?想把这些图片按照在线地图的样式发布出来吗?LionGG带你走进新的一篇博客:Map ...
1.Electron-封装地图瓦片下载小工具(MapDownload) [配置开发环境]
本软件完成状况未完成~~ 目的之前写了一个地图瓦片下载小工具地图地图瓦片下载器(有兴趣可以去看看)由于是"黑框"版本的.想把它封装成界面版本.接下来我会用一段时间把我学习El ...

Echarts+DataV.GeoAtlas地理小工具实现地图及其注意事项

Echarts+DataV.GeoAtlas地理小工具实现地图及其注意事项相关推荐

最新文章

热门文章