如何使用Echarts 绘制某省地图,并绘制飞线图

先贴个图把，效果一样就看，不一样咱就跑

1、绘制地图时需要用于展示地图的地理数据，地理数据是一个 geoJSON 格式的数据，本质上是一个 json 数据

--打开地图选择器 DataV.GeoAtlas地理小工具系列

引用组件----------
<template>
    <div class="middle"><mapChart /></div>
</template>
 
<script setup>
import mapChart from "../mapChart.vue";
</script>
 
<style lang="scss" scoped>
  .middle {
       width: 60%;
       height: 100%;
   }
</style>
 
-----------组件 mapChart.vue------
 
<template>
    <div id="chart-box" style="height: 100%; width: 100%;"></div>
</template>
 
<script>
import * as echarts from 'echarts';
import yls_json from '@/utils/32.json' ///江苏省的json数据
export default {
    data() {
        return { data: {}, yls_json };
    },
    methods: {
        refresh() {
            var myChart = echarts.getInstanceByDom(
                document.getElementById('chart-box')
            );
            if (myChart !== null && myChart !== undefined) {
                myChart.resize();
            }
        },
 
 
    },
    mounted() {
        let data = yls_json;
        echarts.registerMap("yls", data);
        const chart = echarts.init(document.getElementById("chart-box"));
 
        let coord = yls_json.features.map((item, index) => {
            return {
                name: item.properties.name,
                value: item.properties.center,
                symbolSize: 8
            }
        })
        let lines_coord = coord.map(item => {
            return {
                coords: [
                    [114.691663, 31.574729],
                    item.value
                ]
            }
        })
        const option = {
            geo: {
                map: "yls",
                roam: true, // 允许地图缩放和平移
                right: '2%',
                left: 'auto',
                label: {
                    show: false, // 隐藏地理坐标系的标签
                },
                silent: true, // 设置为 true 以禁用地图上的所有鼠标事件
                itemStyle: {
                    normal: {
                        borderColor: "rgb(0,255,255)", //区域边框颜色
                        areaColor: "rgb(92,161,255)", //区域颜色
                        borderWidth: 0.5, //区域边框宽度
                        shadowBlur: 5,
                        shadowColor: "rgba(0,255,255,.5)",
                    },
                },
            },
 
            series: [
                {
                    name: '江苏省内点',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: coord,
                    label: {
                        show: true, formatter: "{b}",
                        color: "#fff",
                        fontSize: 8,
                    },
                    emphasis: {
                        itemStyle: {
                            borderColor: 'transparent', // 高亮时的边框颜色设置为透明
                            borderWidth: 0, // 高亮时的边框宽度设置为 0
                        }
                    },
                    itemStyle: {
                        color: 'rgb(0,255,255)',
                        iconType: 'roundRect ', // 使用内置的pin图标
                        iconSize: 20,
                        position: 'right',
                    }
                },
                {
                    name: '地图外的点',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: [
                        {
                            name: '省公司',
                            value: [114.401663, 31.574729],
                            symbolSize: 40,
                            z: 20,
                            symbol: "path://M512,0c282.76800537109375,0,512,229.23199462890625,512,512c0,282.76800537109375,-229.23199462890625,512,-512,512C229.23199462890625,1024,0,794.7680053710938,0,512C0,229.23199462890625,229.23199462890625,0,512,0Zm9.3759765625,272L341.1839904785156,272a29.984,29.984,0,0,0,-29.91998291015625,30.032012939453125L311.2640075683594,752l399.9999694824219,0L711.2639770507812,432c0,-16.496002197265625,-13.4239501953125,-30,-29.98394775390625,-30l-130,0l0,-100.09600830078125A29.904,29.904,0,0,0,521.3599853515625,272ZM481.2799987792969,562l2.048004150390625,0.09600830078125a20,20,0,0,1,-2.048004150390625,39.90399169921875l-90.0159912109375,0a20,20,0,1,1,0,-40l90.0159912109375,0Zm0,-100l2.032012939453125,0.09600830078125a20,20,0,0,1,-2.032012939453125,39.90399169921875l-90,0a20,20,0,1,1,0,-40l90,0Zm-5.00799560546875,-100l2.048004150390625,0.09600830078125a20,20,0,0,1,-2.048004150390625,39.90399169921875l-90,0l-2.048004150390625,-0.11199951171875a20,20,0,0,1,2.048004150390625,-39.88800048828125l90,0Z",//省公司位置的图标
                        }
                    ],
                    symbolSize: 8,
                    itemStyle: {
                        normal: {
                            color: '#0079fe', // 江苏省外点的颜色
                        },
                    },
                    label: {
                        show: true, formatter: "{b}",
                        color: "#000",
                        position: "bottom",
 
                    },
                },
                {
                    type: "lines",
                    coordinateSystem: "geo",
                    effect: {
                        show: true,
                        constantSpeed: 30,
                        symbol: "pin",
                        symbolSize: 3,
                        trailLength: 0,
                    },
                    symbol: ['none', 'arrow'], // 起点无图形，终点为箭头
                    symbolSize: [0, 8],
                    lineStyle: {
                        color: 'rgb(149,242,4)',
                        width: 2,
                        opacity: 0.4,
                        curveness: 0.2 // 线条曲直度
                    },
                    data: lines_coord,
                },
 
            ],
        };
 
        chart.setOption(option);
        window.addEventListener('resize', this.refresh);
    },
    unmounted() {
        window.removeEventListener('resize', this.refresh);
    },
 
};
</script>
 
<style lang="scss" scoped>
#chart-box {
    div {
        width: 100%;
        height: 100%;
    }
}
</style>复制