echarts雷达图实现动态扫描效果用经度纬度控制

要实现雷达图的动态扫描效果，可以使用 echarts 中的动画效果，结合经纬度控制雷达图扫描的起点和终点。

首先，需要定义一个雷达图的模板，包含需要展示的维度和初始数据。例如：

option = {
    radar: {
        indicator: [
            { name: '维度1', max: 100 },
            { name: '维度2', max: 100 },
            { name: '维度3', max: 100 },
            { name: '维度4', max: 100 },
            { name: '维度5', max: 100 }
        ],
        center: ['50%', '50%'],
        radius: '60%',
        startAngle: 90,
        splitNumber: 4,
        shape: 'circle',
        name: {
            formatter: '{value}',
            textStyle: {
                color: '#fff',
                backgroundColor: '#999',
                borderRadius: 3,
                padding: [3, 5]
            }
        },
        splitArea: {
            areaStyle: {
                color: ['rgba(114, 172, 209, 0.2)',
                       'rgba(114, 172, 209, 0.4)',
                       'rgba(114, 172, 209, 0.6)',
                       'rgba(114, 172, 209, 0.8)',
                       'rgba(114, 172, 209, 1)'],
                shadowColor: 'rgba(0, 0, 0, 0.3)',
                shadowBlur: 10
            }
        },
        axisLine: {
            lineStyle: {
                color: 'rgba(255, 255, 255, 0.5)'
            }
        },
        splitLine: {
            lineStyle: {
                color: 'rgba(255, 255, 255, 0.5)'
            }
        }
    },
    series: [
        {
            name: '雷达图',
            type: 'radar',
            data: [
                {
                    value: [60, 73, 85, 40, 90],
                    name: '数据1',
                    areaStyle: {
                        normal: {
                            opacity: 0.9,
                            color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                                {
                                    color: '#B8D3E4',
                                    offset: 0
                                },
                                {
                                    color: '#72ACD1',
                                    offset: 1
                                }
                            ])
                        }
                    },
                    lineStyle: {
                        normal: {
                            width: 1,
                            opacity: 0.5,
                            color: '#B8D3E4'
                        }
                    }
                }
            ]
        }
    ]
};

然后，可以通过 echarts 提供的动画效果实现雷达图的扫描。具体实现方式如下：

var myChart = echarts.init(document.getElementById('chart'));

// 设置雷达图的起点和终点经纬度
var startPoint = [120.1293, 30.2581];
var endPoint = [116.4551, 40.2539];

// 定义一个动画函数，每隔一段时间更新雷达图的起点和终点，实现扫描效果
function animation() {
    // 计算当前扫描位置的经纬度
    var currentPoint = [
        startPoint[0] + (endPoint[0] - startPoint[0]) / 10,
        startPoint[1] + (endPoint[1] - startPoint[1]) / 10
    ];
    // 更新雷达图的起点和终点
    myChart.setOption({
        series: [
            {
                data: [
                    {
                        value: [60, 73, 85, 40, 90],
                        name: '数据1',
                        areaStyle: {
                            normal: {
                                opacity: 0.9,
                                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                                    {
                                        color: '#B8D3E4',
                                        offset: 0
                                    },
                                    {
                                        color: '#72ACD1',
                                        offset: 1
                                    }
                                ])
                            }
                        },
                        lineStyle: {
                            normal: {
                                width: 1,
                                opacity: 0.5,
                                color: '#B8D3E4'
                            }
                        }
                    }
                ],
                // 设置雷达图扫描的起点和终点
                markPoint: {
                    symbol: 'circle',
                    symbolSize: 5,
                    itemStyle: {
                        normal: {
                            color: '#FFF'
                        }
                    },
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    data: [
                        {
                            coord: currentPoint,
                            name: '扫描点'
                        }
                    ]
                },
                // 设置动画效果
                animationDurationUpdate: 2000,
                animationEasingUpdate: 'linear'
            }
        ]
    });
    // 每隔一段时间执行一次动画函数
    setTimeout(animation, 200);
}

// 执行动画函数
animation();

在动画函数中，计算当前扫描位置的经纬度，并通过 setOption 方法更新雷达图的起点和终点。在每次更新雷达图时，都设置一个扫描点的 markPoint，表示当前扫描位置。同时，设置动画效果，让扫描点在雷达图上平滑移动。最后，通过 setTimeout 方法每隔一段时间执行一次动画函数，实现连续的扫描效果。