<!DOCTYPE html>
|
<html lang="zh-cn">
|
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<title>浙江地图</title>
|
|
|
</head>
|
|
<body>
|
<div id="zhejiangmap"></div>
|
|
|
</body>
|
|
</html>
|
<script src="js/jquery.min.js"></script>
|
<script src='js/echarts.min.js'></script>
|
<script>
|
$("#zhejiangmap").height($(window).height() - 0);
|
$(function () {
|
|
|
var myChart = echarts.init(document.getElementById('chinamap'));
|
chinadatas(myChart);
|
//根据窗口的大小变动图表 --- 重点
|
window.onresize = function () {
|
myChart.resize();
|
}
|
})
|
function chinadatas(myChart) {
|
let mapJsonPath = "";
|
mapJsonPath = "./json/浙江省.geoJson";
|
$.get(mapJsonPath, function (mapJson) {
|
echarts.registerMap("chosenMap", mapJson);
|
let option = {
|
series: [
|
{
|
name: this.selCity,
|
type: "map",
|
mapType: "chosenMap", // 自定义扩展图表类型
|
label: {
|
show: true,
|
},
|
},
|
],
|
};
|
console.log(that);//问什么此处为that，之前的文章中有写过
|
that.mychart.setOption(option);
|
});
|
|
}
|
|
|
|
|
</script>
|
