文章目录
代码结构搭建小型服务器前端代码效果参考文档
代码结构
搭建小型服务器
npm init -y
npm install --save-dev express
const express
= require("express");
const server
= express();
server
.use(express
.static("src"));
server
.listen(3000,function(){
console
.log("listening on *:3000");
})
node server.js启动该服务器
前端代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo
</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
</head>
<body>
<div id="map-wrap" style="height:500px;"></div>
<script src="./index.js"></script>
</body>
</html>
window
.onload = function(){
const XHR = new XMLHttpRequest();
XHR.open("get","./world.json",true);
XHR.onload = function(){
const jsonData
= XHR.response
;
echarts
.registerMap("world",jsonData
);
var mapChart
= echarts
.init(document
.getElementById('map-wrap'));
var option
= {
geo
:{
map
:"world"
}
}
mapChart
.setOption(option
);
}
XHR.send();
}
world.json文件较大，就不直接以代码的形式呈现了，如有需要请到这里或那里下载
效果
参考文档
ECharts实现地图散点图
