No.16可视化大屏--vite+vue3 地图的优化

一、地图上添加动画及箭头

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import chinaMap from '../../assets/china1.json';

let chart = ref();

onMounted(() => {
    chartInit();
});

function chartInit() {
    var myChart = echarts.init(chart.value);
    echarts.registerMap('china', chinaMap);

    // 城市经纬度
    const geoCoordMap = {
        '甘肃': [103.8343, 36.0611],
        '北京': [116.4053, 39.9042],
        '青岛': [120.3552, 36.0820],
        '桂林': [110.2991, 25.2742],
        '海口': [110.3893, 19.8516],
        '西安': [108.9398, 34.3416],
    };

    // 飞线数据（以甘肃为起点）
    const moveLines = [
        [{ name: '甘肃' }, { name: '北京' }],
        [{ name: '甘肃' }, { name: '青岛' }],
        [{ name: '甘肃' }, { name: '桂林' }],
        [{ name: '甘肃' }, { name: '海口' }],
        [{ name: '甘肃' }, { name: '西安' }],
    ];

    // 转换飞线数据
    function convertData(data) {
        const res = [];
        for (let i = 0; i < data.length; i++) {
            const fromCoord = geoCoordMap[data[i][0].name];
            const toCoord = geoCoordMap[data[i][1].name];
            if (fromCoord && toCoord) {
                res.push({
                    fromName: data[i][0].name,
                    toName: data[i][1].name,
                    coords: [fromCoord, toCoord]
                });
            }
        }
        return res;
    }

    const option = {
        geo: {
            map: 'china',
            roam: false,
            zoom: 1.5,
            center: [104.0, 35.0],
            label: {
                show: true,
                color: '#fff',
                fontSize: 8
            },
            itemStyle: {
                areaColor: '#4D98FB',
                borderColor: '#fff'
            },
            emphasis: {
                label: {
                    color: 'black',
                    fontSize: 12
                },
                itemStyle: {
                    areaColor: '#18C1AD'
                }
            }
        },
        series: [
            // 飞线效果
            {
                type: 'lines',
                zlevel: 2,
                effect: {
                    show: true,
                    period: 4,  // 飞行速度
                    trailLength: 0.7, // 尾巴长度
                    color: '#fff',
                    symbolSize: 6
                },
                lineStyle: {
                    color: '#18C1AD',
                    width: 2,
                    curveness: 0.2
                },
                data: convertData(moveLines)
            },
            // 城市点位
            {
                type: 'effectScatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                rippleEffect: {
                    brushType: 'stroke' // 波纹效果
                },
                label: {
                    show: true,
                    position: 'right',
                    formatter: '{b}',
                    color: '#fff',
                    fontSize: 10
                },
                symbolSize: 8,
                itemStyle: {
                    color: '#FF6B6B'
                },
                data: Object.keys(geoCoordMap).map(name => ({
                    name,
                    value: geoCoordMap[name]
                }))
            }
        ]
    };

    myChart.setOption(option);
}
</script>

<template>
    <div ref="chart" class="barchart" style="width: 100%; height: 450px;"></div>
</template>

<style scoped>
.barchart {
    margin-top: 40px;
}
</style>

　　效果