通过echarts，使表格组件轮播

非产品功能只提供参考，无法对代码进行说明，和解决代码产生的其他的问题

版本

v1.2：可以使单页面所有表格轮播

v1.3: 可以使单个首个报表滚动并且自动调整高度

v1.4: 可以使全局所有报表滚动并且自动调整高度

功能

通过echart图表中的js代码，使同页面的表格内容滚动轮播

用法

1.1 新建表格

页面内新建任意数里的表格后

1.2 新增echart图表

将js代码复制到echart图表中

这是一个空白的图表，通过该图表使同页面的所有表格生成轮播效果，建议隐藏在底部。

v1.2代码

// 向右侧数据面板中拖入字段，可在代码中引用dataSet字段获取二维数组数据
var doc = window.parent.document;
var tables = doc.querySelectorAll('.m-dashbox-table .tbody table');

function startmarquee(lh, speed, delay, o) {
 var p = true;
 var t;

 function start() {
   t = setInterval(scrolling, speed);
   if (p) o.style.marginTop = parseInt(o.style.marginTop || 0) - 1 + 'px';
 }
 function scrolling() {
   if (parseInt(o.style.marginTop) % lh != 0) {
     o.style.marginTop = parseInt(o.style.marginTop || 0) - 1 + 'px';
     if (Math.abs(parseInt(o.style.marginTop || 0)) >= o.scrollHeight / 2) o.style.marginTop = 0;
   }
   else {
     clearInterval(t);
     setTimeout(start, delay);
   }
 }
 setTimeout(function() {
   var tbodys = o.querySelectorAll('tbody');
   if (tbodys.length === 1) {
       o.innerHTML += tbodys[0].innerHTML;
   }

   o.style.marginTop = 0;
   start();
 }, delay);
}
for (var i = 0; i < tables.length; i++) {
  startmarquee(48, 20, 2000, tables[i]);
}

v1.3代码

// 向右侧数据面板中拖入字段，可在代码中引用dataSet字段获取二维数组数据
var doc = window.parent.document;
var tables = doc.querySelectorAll('.m-dashbox-table .tbody table');

function startmarquee(speed, delay, o) {
 var p = true;
 var t;
 var lh;

 function start() {
   t = setInterval(scrolling, speed);
   if (p) o.style.marginTop = parseInt(o.style.marginTop || 0) - 1 + 'px';
 }
 function scrolling() {
   if (parseInt(o.style.marginTop) % lh !== 0) {
     o.style.marginTop = parseInt(o.style.marginTop || 0) - 1 + 'px';
     if (Math.abs(parseInt(o.style.marginTop || 0)) >= o.scrollHeight / 2) o.style.marginTop = 0;
   }
   else {
     clearInterval(t);
     setTimeout(start, delay);
   }
 }
 setTimeout(function() {
   var tbodys = o.querySelectorAll('tbody');
   var tr = tbodys[0].querySelector('tr');
   lh = tr ? tr.offsetHeight : 32;
   if (tbodys.length === 1) {
       o.innerHTML += tbodys[0].innerHTML;
   }
   o.style.marginTop = 0;
   start();
 }, delay);
}
startmarquee(20, 2000, tables[0]);

v1.4

// 向右侧数据面板中拖入字段，可在代码中引用dataSet字段获取二维数组数据
var doc = window.parent.document;
var tables = doc.querySelectorAll('.m-dashbox-table .tbody table');

function startmarquee(speed, delay, o) {
 var p = true;
 var t;
 var lh;

 function start() {
   t = setInterval(scrolling, speed);
   if (p) o.style.marginTop = parseInt(o.style.marginTop || 0) - 1 + 'px';
 }
 function scrolling() {
   if (parseInt(o.style.marginTop) % lh !== 0) {
     o.style.marginTop = parseInt(o.style.marginTop || 0) - 1 + 'px';
     if (Math.abs(parseInt(o.style.marginTop || 0)) >= o.scrollHeight / 2) o.style.marginTop = 0;
   }
   else {
     clearInterval(t);
     setTimeout(start, delay);
   }
 }
 setTimeout(function() {
   var tbodys = o.querySelectorAll('tbody');
   var tr = tbodys[0].querySelector('tr');
   lh = tr ? tr.offsetHeight : 32;
   if (tbodys.length === 1) {
       o.innerHTML += tbodys[0].innerHTML;
   }
   o.style.marginTop = 0;
   start();
 }, delay);
}
for (var i = 0; i < tables.length; i++) {
  startmarquee(20, 2000, tables[i]);
}