Vue3Echarts5绘制带有立体感流线中国地图，建议收藏

　　本文绘制的地图效果图如下：
　　一、Echarts使用五部曲
　　1、下载并引入echarts
　　Echarts已更新到了5。0版本，安装完记得检查下自己的版本是否是5。0。npminstallechartssave
　　下载地图的json数据
　　可以下载中国以及各个省份地图数据。免费的文件下载地址：
　　http：datav。aliyun。comportalschoolatlasareaselectorlat30。332329214580188lng106。72278672066881zoom3。5
　　记得收藏哦！免得浪费加班时间。
　　引入：importasechartsfromechartsimportchinaJSONfrom。。。。assetsjsonchina。json
　　2、准备容器
　　给元素定义宽高确定的容器用来装地图。templatetemplate
　　3、实例化echarts对象importasechartsfromechartsimportchinaJsonfrom。。。。assetsjsonchina。jsonvarmyChartecharts。init（document。getElementById（chinaMap））创建了一个myChart对象
　　4、指定配置项和数据varoption｛存放需要绘制图片类型，以及样式设置｝
　　5、给echarts对象设置配置项myChart。setOption（option）
　　就这么简单几步还用你告诉我吗？不瞒你说，官网也有这东东。虽然这些你都知道，但是并不影响你还是不知道流线图是怎么绘制出来的。下面我们看看是如何绘制的。二、开始绘制流线中国地图
　　第一步：先绘制一个中国地图
　　importasechartsfromechartsimportchinaJsonfrom。。。。assetsjsonchina。jsonimport｛onMounted，ref｝fromvueconstchinaMapref（）onMounted（（）｛drawChina（）｝）functiondrawChina（）｛varmyChartecharts。init（chinaMap。value）echarts。registerMap（china，chinaJson）注册可用的地图varoption｛geo：｛show：true，设置中心点center：〔105。194115019531，35。582111640625〕，map：china，roam：true，是否允许缩放，拖拽zoom：1，初始化大小缩放大小限制scaleLimit：｛min：0。1，最小max：12，最大｝，各个省份模块样式设置itemStyle：｛normal：｛areaColor：3352c7，背景色color：red，字体颜色borderColor：5e84fd，borderWidth：2，｝，｝，高亮状态emphasis：｛itemStyle：｛areaColor：ffc601，｝，label：｛show：true，color：fff，｝，｝，显示层级z：10，｝，｝myChart。setOption（option）｝
　　一个简单的地图就绘制好了，继续研究如何添加流线。
　　第二步：添加流线
　　通过series属性来设置发色点的样式，接受点的样式，以及线条和线条上的动画。
　　设置series的值：中国地理坐标图varchinaGeoCoordMap：Object｛西安：〔108。906866，34。162109〕，拉萨：〔91。140856，29。645554〕，｝发射点varchinaDatas〔〔｛name：拉萨，value：2，｝，〕，〕投射点constscatterPos〔108。906866，34。162109〕数据转换varconvertDatafunction（data：any）｛varres〔〕for（vari0；idata。length；i）｛vardataItemdata〔i〕varfromCoordchinaGeoCoordMap〔dataItem〔0〕。name〕vartoCoordscatterPosif（fromCoordtoCoord）｛res。push（〔｛coord：fromCoord，value：dataItem〔0〕。value，｝，｛coord：toCoord，｝，〕）｝｝returnres｝varseries：Array〔〕；〔〔西安，chinaDatas〕〕。forEach（function（item，i）｛series。push（设置指向箭头信息｛type：lines，zlevel：2，effect：｛show：true，period：4，箭头指向速度，值越小速度越快trailLength：0。02，特效尾迹长度〔0，1〕值越大，尾迹越长重symbol：arrow，箭头图标symbolSize：8，图标大小｝，lineStyle：｛normal：｛color：adffd0，width：1，尾迹线条宽度opacity：1，尾迹线条透明度curveness：0。3，尾迹线条曲直度｝，｝，data：convertData（item〔1〕），｝，发射点位置涟漪等效果｛type：effectScatter，coordinateSystem：geo，zlevel：2，rippleEffect：｛涟漪特效period：4，动画时间，值越小速度越快brushType：stroke，波纹绘制方式stroke，fillscale：4，波纹圆环最大限制，值越大波纹越大｝，label：｛normal：｛show：true，position：right，显示位置offset：〔5，0〕，偏移设置formatter：function（params）｛圆环显示文字returnparams。data。name｝，fontSize：13，｝，emphasis：｛show：true，｝，｝，symbol：circle，symbolSize：function（val：Array）｛return5val〔2〕5圆环大小｝，itemStyle：｛normal：｛show：false，color：f8f9f5，｝，｝，data：item〔1〕。map（function（dataItem：any）｛return｛name：dataItem〔0〕。name，value：chinaGeoCoordMap〔dataItem〔0〕。name〕。concat（〔dataItem〔0〕。value〕），｝｝），｝，被攻击点｛type：effectScatter，coordinateSystem：geo，zlevel：2，rippleEffect：｛涟漪相关period：2，brushType：stroke，scale：5，｝，label：｛normal：｛show：true，position：right，color：0f0，formatter：｛b｝，textStyle：｛color：fff，fontSize：12，｝，｝，emphasis：｛show：true，color：f60，｝，｝，itemStyle：｛normal：｛color：f00，｝，｝，symbol：circle，symbolSize：10，圆圈大小data：〔｛name：item〔0〕，value：chinaGeoCoordMap〔item〔0〕〕。concat（〔10〕），｝，〕，｝，）｝）
　　给上边的option添加series属性。
　　第三步：添加立体投影
　　添加立体投影的时候，由于并没有这样的属性，所以需要通过设置边框投影，再加一个偏移。
　　实现原理：绘制两个地图，设置中心点是一样的，然后一个设置边框投影偏移，它的层级设置小一点，上边再绘制一个地图不设置投影，这样就能够实现上述效果。series添加一个对象，绘制新地图｛绘制一个新地图type：map，map：china，zoom：1，center：〔105。194115019531，35。582111640625〕，z：1，aspectScale：0。75，itemStyle：｛normal：｛areaColor：f00，borderColor：090438，borderWidth：2，shadowColor：090438，shadowOffsetX：0，shadowOffsetY：15，｝，｝，｝
　　上述效果的完整源码：template首页地图1templatestylescoped。chinaMap｛transform：rotate3d（1，0，0，35deg）；｝style