ECharts地图生成
2021-01-05 本文已影响0人
书十一
首先引入获取Echarts.js个人使用cdnjs引入，也可以下载到本地在浏览输入地址打开网页全选复制粘贴到本地js文件。
image.png
由于一些原因echarts js 地图已经停止下载了，所以我们使用geojson数据生成地图，获取geojson 链接如下：
阿里云地图选择器地址：
http://datav.aliyun.com/tools/atlas/#&lat=33.521903996156105&lng=104.29849999999999&zoom=4
image.png
准备完成，下面是页面代码
<!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请求的数据，下面也准备的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
