Echarts，map图showTIP自动循环播放，map弹框提示框自动循环播放

最新推荐文章于 2025-06-27 16:15:52 发布

紫薯馍馍

最新推荐文章于 2025-06-27 16:15:52 发布

阅读量4.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Echarts

本文链接：https://blog.youkuaiyun.com/u012972294/article/details/100511360

Echarts 专栏收录该内容

4 篇文章

订阅专栏

本文分享了如何使用ECharts的dispatchAction方法实现地图的动态效果，通过代码示例展示了如何让地图上的数据点随时间变化，达到动态展示的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

看到这篇帖子肯定是找过许多类似的，我当时的目的就是为了让echarts呈现出来的地图效果更佳酷炫，至少不要只是静态的，当时第一版的时候做不出来动态的效果，只能用echarts 地图里面的涟漪效果，固定了几个坐标区域，看上去效果稍微好点，但是效果也不太好，

然后第二版又花了大量的时间来找这种动态的效果，于是就有了下面这篇文章：

其实这个很容易实现，一个 dispatchAction 方法就解决问题；

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           html,
           body {
               width: 100%;
               height: 100%;
               background-color: gray;
           }

           #myChart {
               width: 80%;
               height: 70%;
               position: fixed;
               top: 15%;
               left: 10%;
           }
       </style>
       <script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
       <script src="echarts3.2.2/echarts.js" type="text/javascript" charset="utf-8"></script>
       <script type="text/javascript">
           $(function() {
               var XIdx = [];
               var data = [54, 86, 46, 45, 77, 96, 89, 88, 23, 38,
                   3, 66, 98, 43, 73, 76, 44, 16, 21, 14,
                   71, 8, 61, 65, 1, 68, 33, 69, 49, 24
               ];

               for(var i = 1; i <= data.length; i++) {
                   XIdx.push(i);
               }

               var option = {
                   backgroundColor: 'white',
                   grid: {
                       top: 20,
                       left: 20,
                       right: 20,
                       bottom: 20,
                       containLabel: true //轴上的数值
                   },
                   xAxis: {
                       type: 'category',
                       data: XIdx
                   },
                   yAxis: {
                       type: 'value'
                   },
                   tooltip: {
                       trigger: 'axis'
                   },
                   series: [{
                       name: '人',
                       type: 'line',
                       data: data
                   }]
               };
               var myChart = echarts.init(document.getElementById("myChart"));
               myChart.setOption(option);

               var index = 0; //播放所在下标
               var mTime = setInterval(function() {
                   myChart.dispatchAction({
                       type: 'showTip',
                       seriesIndex: 0,
                       dataIndex: index
                   });
                   index++;
                   if(index > data.length) {
                       index = 0;
                   }
               }, 1000);
           });
       </script>
   </head>

   <body>
       <div id="myChart"></div>
   </body>

</html>