首先引入獲取Echarts.js個人使用cdnjs引入，也可以下載到本地在瀏覽輸入地址打開網(wǎng)頁全選復(fù)制粘貼到本地js文件尾抑。
image.png
由于一些原因echarts js 地圖已經(jīng)停止下載了突诬，所以我們使用geojson數(shù)據(jù)生成地圖哨啃，獲取geojson 鏈接如下：
阿里云地圖選擇器地址：
http://datav.aliyun.com/tools/atlas/#&lat=33.521903996156105&lng=104.29849999999999&zoom=4
image.png
準(zhǔn)備完成拼坎，下面是頁面代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body {
background-color: #009999;
}
#map {
width: 500px;
height: 500px;
}
</style>
<body>
<div id="map"></div>
</body>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.0.0/echarts.min.js" integrity="sha512-ZRdjJAYP8Kij8Lkln9uiGj0jIrMDLAALm1ZB2b3VfV9XJ0nR4zbJmHKB42/A4tgMlZS4DTPnSAmcYRoS0dginA==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js" integrity="sha512-bZS47S7sPOxkjU/4Bt0zrhEtWx0y0CRkhEp8IckzK+ltifIIE9EMIMTuT/mEzoIMewUINruDBIR/jJnbguonqQ==" crossorigin="anonymous"></script> -->
<!-- 建議下載到本地引用速度快一點-->
<script src="./js/echarts5.0.0.js"></script>
<script src="./js/axios0.21.1.js"></script>
<script>
//這里我用的axios請求的數(shù)據(jù)，下面也準(zhǔn)備的jQuery的請求方法
axios.get('./mapJson/臨沂市.json')
.then(function(response) {
console.log(response)
echarts.registerMap('linyi', response.data);
var chart = echarts.init(document.getElementById('map'));
chart.setOption({
series: [{
map: 'linyi',
type: 'map',
}]
});
});
</script>
<script>
//jQuery請求
$.get("./js/臨沂市.json", function(map) {
echarts.registerMap("luoyang", map);
var myChart = echarts.init(document.getElementById('map'));
myChart.setOption({
series: [{
map: "luoyang",
type: "map",
}]
});
});
</script>
</html>
效果：
image.png
