<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="lib/echarts.min.js"></script>
<script src="lib/jquery.min.js"></script>
</head>
<body>
<div style=" 600px;height: 400px;"></div>
<!--
1.准备中国的矢量地图json文件，放到json/map的目录下
2.使用Ajax获取china.json
$.get('json/map/china.json',function(chinaJson){})
3.在回调函数中往echarts全局对象中注册地图的json数据
echatrs.registerMap('chinaMap',chinaJson)
4.在geo下设置
type: 'map',
map: 'chinaMap'
-->
<!-- 引入jsonMap文件跨域：
1.开启一个服务 2.jsonp 3.script获取
本实例采用方式一:ECharts 请求本地地图json文件数据 跨域问题 解决方案：右键Open with Live Serve打开
如右键没有Open with Live Serve，vscode需安装Live Serve插件
live-server是可以运行前端静态文件的一个服务器，既然我们要前后端分离，
所以就需要单独将html代码运行起来，这里我们选择live-server，等到后边真正部署的时候在用nginx-->
<!-- 常用配置
拖动缩放：roam:true
名称显示: label
-->
<script>
var mCharts = echarts.init(document.querySelector("div"))
// ajax直接请求访问本地文件(下载插件liveserver 插件解决跨域)
$.get('json/china.json',function(ret){
// ret就是中国的各省份的矢量地图数据
// console.log(ret);
echarts.registerMap('chinaMap',ret)
var option = {
geo: {
type: 'map',
map: 'chinaMap',
roam: true, // 设置允许缩放以及拖动的效果
label: {
show: true // 展示标签
},
zoom: 1, // 设置初始化的缩放比例
center: [87.617733, 43.792818], // 中心点
}
}
mCharts.setOption(option)
})
</script>
</body>
</html>