echarts地图闪烁点

最新推荐文章于 2024-09-07 17:06:52 发布

小陈不秃头

最新推荐文章于 2024-09-07 17:06:52 发布

阅读量988

点赞数 8

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_56388885/article/details/137119070

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts China Map Continuous Flashing Point</title>
    <!-- 引入 ECharts -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
    <!-- 引入中国地图数据 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
</head>
<body>
<!-- ECharts 容器 -->
<div id="map" style="width: 800px; height: 600px;"></div>

<script>
    // 初始化 ECharts 实例
    var myChart = echarts.init(document.getElementById('map'));

    // ECharts 配置项
    var option = {
        // 地图配置
        series: [{
            type: 'scatter',
            coordinateSystem: 'geo',
            data: [{ name: '闪烁点', value: [104.06, 30.67] }], // 闪烁点的位置，经纬度坐标
            symbolSize: 12,
            itemStyle: { color: 'red' }, // 闪烁点的颜色
            // 标记闪烁
            markPoint: {
                symbol: 'circle',
                symbolSize: 20,
                itemStyle: { color: 'red' }, // 闪烁点的颜色
                // 标记闪烁动画
                animation: true,
                animationDuration: 1000,
                animationEasing: 'linear',
                label: { show: false }
            }
        }],
        // 地图配置
        geo: {
            map: 'china',
            roam: true // 开启漫游
        }
    };

    // 使用配置项设置 ECharts 实例
    myChart.setOption(option);

    // 设置持续闪烁定时器
    var flashInterval = setInterval(function() {
        myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: 0
        });

        setTimeout(function() {
            myChart.dispatchAction({
                type: 'downplay',
                seriesIndex: 0,
                dataIndex: 0
            });
        }, 500); // 闪烁持续时间（单位：毫秒）
    }, 1000); // 设置闪烁频率（单位：毫秒）

    // 停止闪烁的方法（可选）
    // clearInterval(flashInterval);
</script>
</body>
</html>