datav可视化大屏调整及面临问题解决，以及改正！

首先要对上一篇最后的那个实现地图叠加做一下说明，其实那只是在geo地图上加的一层对geo的装饰（先这样说一下，后面我再进行补充），然后在series里我们可以进行多种比如lines这些来修饰geo地图。然后说一下我的标题修改，如图

可以注意到，在我的模块2的飞线图这，我把它做了一个样式，样式的代码如下

<div style="width: 100%;display: flex;">
  <div style="width: 33%;text-align: left;flex: auto;">
    <dv-decoration3 style="width:200px;height:50px;" />
  </div>
  <div style="width: 33%;text-align: center;font-size: 20px;vertical-align: bottom;color: #7acaec;padding-top: 10px;">
    在线设备3/11
  </div>
  <div style="width: 33%;flex: auto;text-align: right;">
    <dv-decoration3 style="width:200px;height:50px;float: right;" />
  </div>
</div>
<div style="height: 100%;">
  <div style="height: 90%;width: 100%;" class="map">
    <div ref="chart" style="width: 100%;height: 65vh;"></div>
  </div>

应该能清晰的知道代表什么意思，这里有一点以前我没有注意到，就是使用flex时，一定要进行display：flex，不然flex的效果显示不了。然后这里还需要注意text-align这个东西，效果就看上面的图就行。

今天我面临4个问题

1.在不同分辨率屏幕里，大屏里组件显示不一致，且可能不能完全显示大屏

2.解决地图跟随问题，

3.解决地图标点问题，

4.如何在标点的地图上实现飞线功能。

首先进行解决1问题，我们直接把组件里的高度，宽度换成百分比或百分比的单位即可，这样它就会自适应屏幕大小，百分比单位直接搜索css单位即可（大概吧），这里我列出几个常用的vh高度百分比，vw宽度，rpx等……

然后解决问题2，这里你去网上搜，一堆，基本都是推荐在geo里加上roam：true即可。这里有点小问题，我还在解决。

问题3，我使用的方法描述如下：

我使用的是svg路径数据法（这里我本来想要使用base64方法的，但是可能是我引入的图片有问题，它不能正确显示在我的飞线上，所以我抛弃了它，如果我后面方法有问题，你们可以去看看这个方法好用不），这是是什么方法呢？就是在svg文件里找到 <path> 或 <polygon>, <polyline>, <circle>, <ellipse>, <rect> 等元素的 d 属性。这个属性包含了路径数据。这里我的做法是去找到自己想要的图片，然后把它的svg数据直接给al读取，让al告诉你svg的路径数据，然后你直接引入即可，代码如下

let option = {
    series: [
        {
            type: 'scatter',
            data: [/* 你的数据点 */],
            symbol: 'path://M511.988 511.984C405.943314 511.984 319.994 440.30624 319.994 351.989S405.943314 191.994 511.988 191.994s191.994 71.67776 191.994001 159.995S618.032686 511.984 511.988 511.984m0-511.984C299.898628 0 128 152.827224 128 341.301334c0 140.667604 213.689322 490.736664 322.22993 651.499641 28.031124 41.5987 95.485016 41.5987 123.51614 0C682.222681 832.037999 895.976001 481.968938 895.976001 341.301334 895.976001 152.827224 724.013375 0 511.988 0',
            symbolSize: 50 // 根据需要调整大小
        }
    ]
};

这样就解决了自定义图标问题。

问题四，解决飞线我们采用的是echarts自带的lines，这里介绍一下它（详情去官网查配置手册）

路径图

用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线，路线的可视化。

ECharts 2.x 里会用地图上的 markLine 去绘制迁徙效果，在 ECharts 3 里建议使用单独的 lines 类型图表

具体代码如下

{
        name: '飞线',
        type: 'lines',
        coordinateSystem: 'geo',
        zlevel: 2,//单独放一个层
        effect: {
          show: true,
          period: 5,
          trailLength: 0.5,
          color: '#298093',
          symbol: 'arrow',
          symbolSize: 8
        },
        lineStyle: {
          normal: {
            color: '#6ad3ea',
            width: 1,
            opacity: 0.6,
            curveness: 0.2
          }
        },
        data: linesData
      }

这里我来介绍一下都有什么用，name，type不用多说，coordinateSystem是用于指定我飞线的坐标系统的，为我设置的geo地图坐标系统；zlevel是层级，这里设为2是为了防止设置的位于同个层的其它系列的图形，和动画的标签也会产生不必要的残影。effect设置飞线上的图标样式arrow是箭头样式。trailLength是设置特效尾际长度。lineStyle设置飞线样式，opacity设置透明度，curveness设置边的曲度，支持从 0 到 1 的值，值越大曲度越大。当然这里最主要的还是data数据的输入，下面是linesData的数据，代码如下

const centerPoint = [{name:'',value:[112.9000,28.112]}];

  const linesData = pointData.map(point => ({
    fromName: point.name,
    toName: centerPoint[0].name, // 修改这里
    coords: [point.value, centerPoint[0].value] // 修改这里
  }));

这里最最主要的是coords这句，默认为 false，只能用于绘制只有两个端点的线段，线段可以通过 lineStyle.curveness 配置为曲线。记住名字不重要，重要的coords里的内容，设置了两点的坐标。

OK，这里结束datav的学习。