JavaScript高德地图中绘制echarts图表随地图移动

最新推荐文章于 2023-10-20 11:25:59 发布

VIP文章 weixin_42786237

最新推荐文章于 2023-10-20 11:25:59 发布

阅读量1.4k

点赞数 2

分类专栏：高德地图与echarts 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42786237/article/details/106623546

版权

JavaScript高德地图中绘制echarts图表随地图移动**

先上效果图
图表随地图移动
实现方法如下：
使用高德地图“信息窗体”，信息窗体AMap.InfoWindow的属性content，在content中创建一个div元素，在此div元素中绘制echarts图表。
content内容如下

infoWindow = new AMap.InfoWindow({
   
     content: "<div id='echartBox'></div>"  //使用默认信息窗体框样式，显示信息内容
});

注意在样式中定义宽高，否则图表渲染看不到

#echartBox{
   
      width: 400px;
      height: 400px;
}

完整代码如下

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>自定义样式信息窗体</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <style>
        html, body, #container {
   
            height: 100%;
            width: 100%;
        }

        .custom-input-card{
   
            width: 18rem;
        }

        .custom-input-card

最低0.47元/天解锁文章

weixin_42786237

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
JavaScript高德地图中绘制echarts图表随地图移动

JavaScript高德地图中绘制echarts图表随地图移动**先上效果图实现方法如下：使用高德地图“信息窗体”，信息窗体AMap.InfoWindow的属性content，在content中创建一个div元素，在此div元素中绘制echarts图表。content内容如下infoWindow = new AMap.InfoWindow({ content: "<div id='echartBox'></div>" //使用默认信息窗体框样式，显示信息内容
复制链接

扫一扫