<!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="width: 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>
