持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情

前言

之前说过最近开始做官网了，在评审页面的时候有一张业务覆盖图，原型如下：

本来产品经理是想直接放张图的，怪我自己多嘴问了一句

“地图需要动吗？”

“可以啊，如果你用代码做当然更好了！”

然后这个活就给了我，让我弄成动态的地图，我真是服了我自己这个老六，净给自己增加工作量！

其实之前做过echarts的地图，小程序里或者web端都做过，只是没做过飞线，应该问题不大，毕竟网上demo一大把，随便cv一点就行。

开始

首先引入echarts 和 China.js

import * as echarts from 'echarts';
import geo from '../../static/js/china.js'

如果你还没有安装echarts，请先安装echarts

npm install echarts --save

如果你还没有安装nodejs，那就就当我没问。当然如果你是html页面，那你也可以去官网把echarts的sdk下载下来再引入

可以简单的把这个分为四个部分：geo 、lines 、effectScatter、map

geo

geo 是 ECharts 图表的地理坐标系组件。可以用于地图的绘制，它支持在地理坐标系上绘制散点图，线集。

就是说它是后续操作的基础，没有他就不能进行绘制飞线了。

lines

这就是飞线了，设置好效果和样式的参数，data赋值

这里重点讲一下数据的获取。前提：定义好全国各省经纬度数据，然后定义好连线的数据，从哪到哪，如图 chinaCoordDatas 中的第一条就是从天津到北京。

送你全国各省经纬度数据：

            chinaGeoCoordMap: {
                '黑龙江': [127.9688, 45.368],
                '内蒙古': [110.3467, 41.4899],
                "吉林": [125.8154, 44.2584],
                '北京': [116.4551, 40.2539],
                "辽宁": [123.1238, 42.1216],
                "河北": [114.4995, 38.1006],
                "天津": [117.4219, 39.4189],
                "山西": [112.3352, 37.9413],
                "陕西": [109.1162, 34.2004],
                "甘肃": [103.5901, 36.3043],
                "宁夏": [106.3586, 38.1775],
                "青海": [101.4038, 36.8207],
                "新疆": [87.9236, 43.5883],
                "西藏": [91.11, 29.97],
                "四川": [103.9526, 30.7617],
                "重庆": [108.384366, 30.439702],
                "山东": [117.1582, 36.8701],
                "河南": [113.4668, 34.6234],
                "江苏": [118.8062, 31.9208],
                "安徽": [117.29, 32.0581],
                "湖北": [114.3896, 30.6628],
                "浙江": [119.5313, 29.8773],
                "福建": [119.4543, 25.9222],
                "江西": [116.0046, 28.6633],
                "湖南": [113.0823, 28.2568],
                "贵州": [106.6992, 26.7682],
                "云南": [102.9199, 25.4663],
                "广东": [113.12244, 23.009505],
                "广西": [108.479, 23.1152],
                "海南": [110.3893, 19.8516],
                '上海': [121.4648, 31.2891]
            },