01-Echarts引入地图

最新推荐文章于 2024-04-30 16:57:21 发布

ann0302

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量1.4k

点赞数

分类专栏： echarts 文章标签： javascript vue echarts

本文链接：https://blog.csdn.net/qq_40353662/article/details/119055526

版权

echarts 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

地图图表的使用方式

百度地图API : 使用百度地图的 api , 它能够在线联网展示地图, 百度地图需要申请 ak
矢量地图 : 可以离线展示地图, 需要开发者准备矢量地图数据
接下来的实现是通过矢量图的方式来实现的

矢量地图的实现步骤

1、Echarts最基本的代码结构：
引入js文件，DOM容器，初始化对象，设置option

<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px"></div>
<script>
	var mCharts = echarts.init(document.querySelector("div"))
	var option = {}
	mCharts.setOption(option)
</script>
</body>
</html>

2、准备中国的矢量地图json文件，放到json/map/的目录下
china.json
3、使用AJAX获取china.json

$.get('json/map/china.json',function(chinaJson){})

4、在回调函数中往echarts全局对象注册地图的json数据

$.get('json/map/china.json', function (chinaJson) {
	echarts.registerMap('chinaMap', chinaJson)
})

5、获取完数据之后, 需要配置 geo 节点, 再次的 setOption

type:'map'
map:'chinaMap'

var mCharts = echarts.init(document.querySelector("div"))
$.get('json/map/china.json', function (chinaJson) {
	echarts.registerMap('chinaMap', chinaJson)
	var option = {
		geo: {
		type: 'map',// map是一个固定的值
		map: 'chinaMap',//chinaMap需要和registerMap中的第一个参数保持一致
	}
};
mCharts.setOption(option)

在这里插入图片描述

注意: 需要注意的是, 由于在代码中使用了 Ajax , 所以, 关于此文件的打开, 不能以 file 的协议打开, 应该将其置于 HTTP 的服务之下方可正常展示地图

ann0302

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
01-Echarts引入地图

地图图表的使用方式百度地图API : 使用百度地图的 api , 它能够在线联网展示地图, 百度地图需要申请 ak矢量地图 : 可以离线展示地图, 需要开发者准备矢量地图数据接下来的实现是通过矢量图的方式来实现的矢量地图的实现步骤1、Echarts最基本的代码结构：引入js文件，DOM容器，初始化对象，设置option<!DOCTYPE html><html lang="en"><head><script src="js/echarts.min.
复制链接

扫一扫