echarts 3D地图

duangduang94

已于 2023-04-19 16:30:07 修改

阅读量2.9k

点赞数 1

文章标签： echarts 前端 javascript

于 2023-01-06 14:42:47 首次发布

本文链接：https://blog.csdn.net/duangduang94/article/details/128577774

版权

这篇博客展示了如何利用echarts与echarst-gl.js实现3D地图效果。通过两个简单步骤——准备容器并引入所需文件，以及设置相关属性，可以轻松在项目中创建出3D地图。

摘要由CSDN通过智能技术生成

如何通过echarts实现3D地图效果，话不多说先上图

接下来简单说一下如何具体实现效果

1、首先准备好一个容器，并引入echarts.min.js和echarst-gl.js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="map"></div>
    <script src="echarts.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="echarst-gl.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

2、js文件中进行属性的设置，代码如下

function map() {
    var myChart = echarts.init(document.getElementById('map'));
    var uploadedDataURL = "js/jinan.json";
    $.getJSON(uploadedDataURL, function(geoJson) {
        echarts.registerMap('jinan', geoJson);
        myChart.hideLoading();
		var mapData = [
			{ "value": 653, "name": "