echarts做飞线图

 先上图，要不感觉没有说服力：

飞线图应该是大屏中很常见的一种了，通常你可以很轻易的用datav做一个飞线图，而且datav做的大屏逼格真的很高，本身也是开源免费的项目，开箱即用，上手简单……行了回归正题，我们使用echarts自己配置一个飞线图。当然echarts配置起来也不复杂，只要查看下面对应几个属性的配置就ok了

• geo
• serise 里的effectScatter
• serise 里的lines 

　　三个配置，geo画地图，effectScatter在地图上画散点图，lines画线集，熟悉echarts配置项的看到这里基本就不用看了，自己看下配置文档马上就能撸一个出来，接下来我们按部就班把上面那个例子撸出来。

    1、基础环境准备

　　

 

这里为了简便处理，直接引用cdn上的echarts和datav官方的地图json文件，当然地图json文件也可以从http://geojson.io/#map=12/30.2275/120.1777获得；

好了，上面代码已经初始化了chart容器，然后请求获取了云南省地图json数据

 2、画地图

          echarts.registerMap('yns', data);
            const option ={
                title: {
                    text: '云南省',
                },
                geo: {
                    map: 'yns',
                    zlevel: 10,
                    show:true,
                    layoutCenter: ['50%', '50%'],
                    roam: false,
                    layoutSize: "90%",
                    zoom: 1,
                    label: {
                        normal: {
                            show: true,
                            textStyle:{
                                fontSize:12,
                                color: '#43D0D6'
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#062031',
                            borderWidth: 1.1,
                            borderColor: '#43D0D6'
                        }
                    },
                    emphasis: {
                            areaColor: '#FFB800',
                            label:{
                                show:false
                            }
                        }
                }
            }
            chart.setOption(option);

好了，这个geo配置已经能画出一个完整的云南地图了，这里因为要在地图上画线集和散点，所画地图要用geo而不是serise的map

3、配置散点和线集，具体的配置项的含义请参考echarts官网，下面附上完整代码，此代码直接复制粘在html，在有网络的环境下打开就能运行