使用Echarts绘制geo地图（案例）

项目使用@vue/cli 4.5.13以及echarts版本为5.1.2。
需求：在省份地图上，将数据进行分段映射。如图：

首先下载geojson数据

链接: http://datav.aliyun.com/tools/atlas/index.html#&lat=33.521903996156105&lng=104.29849999999999&zoom=3
在左侧点击所选择的区域，勾选是否包含子区域（是否显示各个市区域），然后直接下载即可。

下载后我将文件放入了libs文件夹下，并用export default输出：

接下来就是mapEcharts组件的基本代码

<template><div class="map" ref="mapChart"></div>
</template>
<script>
//引入geo数据
import zjData from "libs/china-zj";export default {methods: {initMapChart() {const el = this.$refs.mapChart;const echarts = require("echarts");const myChart = echarts.init(el);echarts.registerMap("zj", zjData);const option = {//这里渲染地图}myChart.setOption(option);window.addEventListener("resize", function () {myChart.resize();});},},mounted() {this.initMapChart();},
};
</script><style lang="less" scoped>
.map {width: 100%;height: 100%;//要给指定高度，这里我在组件外加了固定高度，所以这里给了100%
}
</style>

渲染地图的代码

const option = {//数据映射visualMap: {type: "piecewise",//分段标签min: 0,//最小值max: 50,//最大值，不设置为无限大right: 30,//距离右侧位置bottom: 30,//距离底部位置orient: "vertical",//组件竖直放置align: "left",//色块在左textGap: 14,//文字主体之间的距离itemSymbol: "circle",//右下角映射组件使用圆点形状show: true,seriesIndex: 0,//指定取哪个系列的数据(series.data)，若不设置则会影响图上标点颜色设置。//一以下是分段式视觉映射组件的每一段的范围//gt：大于、gte：大于等于、lt：小于、lte：小于等于。pieces: [{gt: 5,label: "5个以上",color: "#1492FF",},{gte: 2,lte: 5,label: "2-5个",color: "#59AAF5",},{gte: 0,lt: 2,label: "0-2个",color: "#99CBF9",},],/*pieces或者inRange内设置颜色试验时都能生效，个人认为需要传入组件控制颜色时再选择用inRange，两个都存在并给予不同的颜色，显示以pieces为主。*///inRange: {//    color: ["#99CBF9", "#59AAF5", "#1492FF"],//},},geo: {map: "zj",//上面引入的数据名show: true,roam: false,//关闭拖拽label: {  //地图显示的地点名show: true,color: "#fff",fontSize: 16,},itemStyle: { areaColor: "#99CBF9", //地图区域的颜色(没有数据时会按照这个颜色显示)borderColor: "#fff",  //地图区域的边框borderWidth: 0.6,},emphasis: {  //高亮的显示设置label: {color: "#fff",},itemStyle: {areaColor: "#9DE3FF",},},select: { //选中显示设置label: {color: "#fff",},itemStyle: {areaColor: "#9DE3FF",},},},series: [//配置数据的显示{type: "map",  //类型mapgeoIndex: 0, //指定geo属性后，series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，而是采用 geo 中的相应属性。data:[{name: "杭州市",value: 6},{name: "湖州市",value: 0},{name: "嘉兴市",value: 0},{name: "金华市",value: 0},{name: "丽水市",value: 0},{name: "宁波市",value: 0},{name: "衢州市",value: 0},{name: "绍兴市",value: 0},{name: "台州市",value: 0},{name: "温州市",value: 0},{name: "舟山市",value: 0}],},//以下配置了图中白色标记圆点的显示{type: "scatter", //类型：散点coordinateSystem: "geo", //使用地理坐标系itemStyle: {color: {type: "radial", // 径向渐变，前三个参数分别是圆心 x, y 和半径x: 0.5,y: 0.5,r: 0.5,colorStops: [{offset: 0.5,color: "#fff", // 50% 处的颜色},{offset: 1,color: "rgb(0 0 0 / 0%)", // 100% 处的颜色},],global: false, // 缺省为 false},borderColor: "#fff", //边框白色borderWidth: 1,      //边框宽度},symbolSize: 10,    //散点大小data: [{ name: "杭州市", value: [119.5035076, 29.703459] },{ name: "宁波市", value: [121.579792, 29.468388] },{ name: "温州市", value: [120.452111, 27.700575] },{ name: "嘉兴市", value: [120.770865, 30.500653] },{ name: "湖州市", value: [119.882398, 30.607198] },{ name: "绍兴市", value: [120.582112, 29.597117] },{ name: "金华市", value: [120.009506, 28.950024] },{ name: "衢州市", value: [118.67263, 28.681708] },{ name: "舟山市", value: [122.106863, 30.016028] },{ name: "台州市", value: [121.128599, 28.561378] },{ name: "丽水市", value: [119.571786, 28.001993] },],zlevel: 1,},],};

需要注意的问题

1.遇到更改scatter或effectScatter颜色不生效问题

按照官网文档写那些白色标点的时候一直都是默认颜色，写的任何颜色都不生效，经查询发现有人说echarts中visualMap的优先级是最高的，需要添加在visualMap中指定seriesIndex来解决，指定取哪个系列的数据他们将会互相影响，其他则不会受影响。试了一下果然ok

使用Echarts绘制geo地图（案例）相关推荐

使用echarts绘制geo地图
我这里实现的是河南省的地图点击要下钻的区域展示相应区域的地图,点击地图外部空白处返回上一级. 一.准备geojson数据网址:DataV.GeoAtlas地理小工具系列下载需要的geojson ...
vue中用echarts 绘制geo 中国地图
前言由于5.X版本的echarts没有了map包,因此我先安装了5.1.1版本,再安装了4.9版本,并将4.9版本中的map包复制到了5.1.1版本里. 绘制效果如下: 1.省份根据数据值,展示不同 ...
vue echarts绘制市级地图下钻（带注释）
vue echarts绘制市级地图下钻 ------- 以浙江嘉兴市为例首先要知道地图的数据获取:http://datav.aliyun.com/portal/school/atlas/area_s ...
echarts 绘制中国地图（中英文转换）
echarts 绘制中国地图 1.引入echarts npm install echarts import echarts from 'echarts' 2.引入地图china.js(网上自行搜索下载 ...
vue使用echarts绘制中国地图
vue使用echarts绘制中国地图 //myMap.vue <div id="geo"></div>//china.js下载地址 https://down ...
Echarts绘制各省地图
Echarts 绘制全国地图近期工作需要用到echarts制作省内地图,研究了一番,好多人写的很模糊不好理解,我这里写个菜鸟教程记录一下. 在页面引入 jquery.js h和echarts.js ...
echarts引入geo地图数据，前端学习记录01
最近遇到项目需要使用使用geoJson数据在echarts上进行地图的绘制,仅使用此文记录学习的过程. 首先需要在项目中引入echart相关依赖,在package.json中添加如下依赖: " ...
不习惯的 Vue3 起步六の Echarts绘制下钻地图
序看过一些可视化大屏展示地图的例子,准备动手做做. 既然要开始比制作,那么先把目标定好,做一个展示中国城市的下钻地图使用: Vue3 Vite Typescript echarts 实现效果: 准 ...
Echarts — 绘制省级地图
版本:vue@3.0.5 + echarts@5.1.2 本文将介绍如何使用 echarts 绘制一个省级地图(以江西省为例) 一.安装 echarts npm i echarts --save-de ...

使用Echarts绘制geo地图（案例）

使用Echarts绘制geo地图（案例）

首先下载geojson数据

接下来就是mapEcharts组件的基本代码

渲染地图的代码

需要注意的问题

1.遇到更改scatter或effectScatter颜色不生效问题

使用Echarts绘制geo地图（案例）相关推荐

最新文章

热门文章