echarts地图嵌入到java代码中

最新推荐文章于 2024-04-06 09:28:48 发布

guofanggang

最新推荐文章于 2024-04-06 09:28:48 发布

阅读量522

点赞数

分类专栏： java 文章标签： echarts java 地图

本文链接：https://blog.csdn.net/guofanggang/article/details/103306202

版权

java 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

已如下地图为例：
https://gallery.echartsjs.com/editor.html?c=xbxUJPSiG9

引入 ECharts，和高德地图js

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.11&key=35a871e5905ecfd749bd998448b9cd03'></script>
       <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=35a871e5905ecfd749bd998448b9cd03&plugin=AMap.DistrictSearch"></script>
       <!-- UI组件库 1.0 -->
       <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
    
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
</head>
</html>

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

然后将地图代码粘贴到js中

js地图代码

 <script type="text/javascript"> 
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    /* ------------ */
粘贴代码的地方
    /* ------------ */
    if (option && typeof option === "object") {
        myChart.setOption(option, true);    
        } 
    </script>

为地图设置自适应屏幕

<style type="text/css">
 html, body {
height: 100%;
} 
#container {
width: 100%;
min-height: 100%;
}  
</style>

有不懂得可以给我留言

guofanggang

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
echarts地图嵌入到java代码中

已如下地图为例：https://gallery.echartsjs.com/editor.html?c=xbxUJPSiG9引入 ECharts，和高德地图js<!DOCTYPE html><html><head> <meta charset="utf-8">  ...
复制链接

扫一扫