大屏项目开发中遇到的问题以及解决方案

最近公司在做大屏可视化开发，在开发过程中，用到了各种各样的插件，从一开始的不熟练到现在项目即将开发完毕的熟练运用，在这其中遇到了很多的问题，灵光一现的那一刻还是十分激动的，下面就来详细的说一下这些问题以及解决方案。

1、Datav轮播表的插件复用以及代码优化及修改

在Datav插件中整页轮播是下图所示的样式

而且其配置也只有下图这些属性，只能设置奇偶行的背景色 ，但在实际项目中我们却需要根据实际情况设置不同类型的背景色或者颜色，又或者我们在项目中的个性化定制中会有点击某一行出现向两边延伸的动画，又或者表格每一行下面都有一个间距，这个时候Datav插件就比较局限了。

比如说， 在项目中我们想要一个根据条件判断某一行的背景色或者字体颜色，这个时候判断条件在插件中是没有的，我们首先 要把轮播表的核心文件放在我们的项目中，直接在源码中修改成们需要的判断样式。

首先，如果我们要实现两条线向两边延伸的功能，就需要使用position+transform，如果直接加动画，动画会从起点开始至最后，而不会从中心向两边延伸，直接上代码：

@keyframes stretch{
  100% {
    width: 100%;
  }
}
.line-item {
      background: linear-gradient(to right,rgba(45,110,135,0) 0%,rgba(60,138,161,.25) 50%,rgba(45,110,135,0) 100%)!important;
      &::before {
          content: '';
          width: 0;
          height: 1PX;
          margin: 0 auto;
          position: absolute;
          top: 0px;
          left: 50%;
          background: linear-gradient(
              to right,
              rgba(23, 37, 47, 0),
              rgba(103, 233, 234, 0.8) 50%,
              rgba(23, 37, 47, 0)
          );
          transform: translate(-50%);
          animation: stretch 1s linear forwards;
      }
      &::after {
          content: '';
          width: 0;
          height: 1PX;
          margin: 0 auto;
          position: absolute;
          bottom: 0;
          left: 50%;
          background: linear-gradient(
              to right,
              rgba(23, 37, 47, 0),
              rgba(103, 233, 234, 0.8) 50%,
              rgba(23, 37, 47, 0)
          );
          transform: translate(-50%);
          animation: stretch 1s linear forwards;
      }
    }

 第二个难点就在于Datav插件使用到的index下标在第二页之后每一页都是一样的，但是在实际的