【ECharts】ECharts实现世界地图

文章目录

代码结构
搭建小型服务器
前端代码
效果
参考文档

代码结构

搭建小型服务器

npm init -y
npm install --save-dev express

// server.js
const 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="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>

// index.js
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实现地图散点图

【ECharts】ECharts实现世界地图相关推荐

echarts中的世界地图
echarts中的世界地图:https://blog.csdn.net/mm_hello11/article/details/82989883
echarts 中国地图世界地图
最近项目中用到了echarts 中国地图世界地图,特在这记录一下. world.js 下载链接(world_new.js带有中国地区名称,另一个只是用来显示中国地图) 链接:https://pan. ...
echarts实现2D世界地图
效果图代码 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8 ...
在一个html加载多个echarts,Echarts一个页面加载多个图表及图表自适应
Echarts一个页面加载多个图表及图表自适应模块化加载 //入口 require.config({ paths: { echarts: 'http://echarts.baidu.com/buil ...
[ECharts]echarts/config is not exists
今天在给Echarts折线图中的数据点增加点击事件的时候总是出现一个 Uncaught Error: [MODULE_MISS]"echarts/config" is not ex ...
数据可视化ECharts:ECharts使用
Echarts-介绍常见的数据可视化库: - D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难) - ECharts.js 百度出品的一个开源 Javasc ...
关于echarts绘制的世界地图中英文对应表（Echarts-4.1.0版本）
近期在做新冠肺炎疫情的境外数据显示,世界地图上都是使用英文进行识别,那么echarts的中英对照很重要: {"Somalia": "索马里","Lie ...
【Echarts】绘制世界地图和中国省份
文章目录部分代码截图地图经纬度资源下载部分代码 # 参数设置 lineOptions: {backgroundColor: 'transparent',title: {text: this.t ...
ECharts百度地图世界地图隐藏区县、乡镇和村庄
在百度地图个性化编辑器中找到区县.乡镇和村庄的配置如下: // 区县{featureType: 'district',elementType: 'labels',stylers: {visibilit ...
echarts实现离线世界地图（国内）展示
1.首先引入需要的资源 <script src="echarts.min (1).js"></script> <script src="wo ...

【ECharts】ECharts实现世界地图

文章目录

代码结构

搭建小型服务器

前端代码

效果

参考文档

【ECharts】ECharts实现世界地图相关推荐

最新文章

热门文章