文章目录
代码结构搭建小型服务器前端代码效果参考文档代码结构
搭建小型服务器
npm init -ynpm install --save-dev express
// server.jsconst express = require("express");const server = express();server.use(express.static("src"));server.listen(3000,function(){console.log("listening on *:3000");})
node server.js启动该服务器
前端代码
<!-- index.html --><!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo</title><script src="/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>
// index.jswindow.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实现地图散点图
如果觉得《【ECharts】ECharts实现世界地图》对你有帮助，请点赞、收藏，并留下你的观点哦！
