01 背景
在数据可视化项目里面经常会用到地图随机选中或地图定时选中的效果，结合各个地图api 和可视化库对比发现：用ECharts的地图组件实现较为简单。
地图组件一直是 ECharts 中使用非常广泛的组件。一般地图组件会使用存储了经纬度的 GeoJSON 格式的数据，而 ECharts 则计算出合适的显示区域然后把经纬度线性映射到这个区域，这是一种最简单的地图投影方式。
02 最终效果
看着这种效果，是不是觉得很酷！话不多说，马上开始！
03 准备工作
安装ECharts
下载最新版本的ECharts(官网)
https://echarts.apache.org/zh/download.html
下载经纬度数据
下载中国经纬度的 GeoJSON json数据(国内在高德地图下载)
http://datav.aliyun.com/portal/school/atlas/area_selector
重命名文件
把下载的json文件保存到项目目录并命名为geojson.json，数据里面存储了国内34个省级行政区域的地理经纬度坐标信息。
代码
如果实在不知道代码怎么写？没关系，小趣已经帮大家准备好了，可以参考着来哦~
04 代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入echarts文件 -->
<script src="./echarts.js"></script>
<style>
#map {
width: 800px;
height: 800px;
margin: 0 auto;
background-color: #000;
}
</style>
</head>
<body>
<!-- 地图挂载入口 -->
<div id="map"></div>
<script src="./mapdemo.js"></script>
</body>
</html>mapdemo.js
let myEchart = echarts.init(document.querySelector("#map"), null, {
renderer: 'canvas',
useDirtyRec
最低0.47元/天 解锁文章
1076
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
