通过echarts，使表格组件轮播

版本

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

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

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

功能

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

用法

1.1 新建表格

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

1.2 新增echart图表

将js代码复制到echart图表中

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

v1.2代码

  1. // 向右侧数据面板中拖入字段，可在代码中引用dataSet字段获取二维数组数据
  2. var doc = window.parent.document;
  3. var tables = doc.querySelectorAll('.m-dashbox-table .tbody table');
  5. function startmarquee(lh, speed, delay, o) {
  6.  var p = true;
  7.  var t;
  9.  function start() {
  10.    t = setInterval(scrolling, speed);
  11.    if (p) o.style.marginTop = parseInt(o.style.marginTop || 0) - 1 + 'px';
  12.  }
  13.  function scrolling() {
  14.    if (parseInt(o.style.marginTop) % lh != 0) {
  15.      o.style.marginTop = parseInt(o.style.marginTop || 0) - 1 + 'px';
  16.      if (Math.abs(parseInt(o.style.marginTop || 0)) >= o.scrollHeight / 2) o.style.marginTop = 0;
  17.    }
  18.    else {
  19.      clearInterval(t);
  20.      setTimeout(start, delay);
  21.    }
  22.  }
  23.  setTimeout(function() {
  24.    var tbodys = o.querySelectorAll('tbody');
  25.    if (tbodys.length === 1) {
  26.        o.innerHTML += tbodys[0].innerHTML;
  27.    }
  29.    o.style.marginTop = 0;
  30.    start();
  31.  }, delay);
  32. }
  33. for (var i = 0; i < tables.length; i++) {
  34.   startmarquee(48, 20, 2000, tables[i]);
  35. }

v1.3代码

  1. // 向右侧数据面板中拖入字段，可在代码中引用dataSet字段获取二维数组数据
  2. var doc = window.parent.document;
  3. var tables = doc.querySelectorAll('.m-dashbox-table .tbody table');
  5. function startmarquee(speed, delay, o) {
  6.  var p = true;
  7.  var t;
  8.  var lh;
  10.  function start() {
  11.    t = setInterval(scrolling, speed);
  12.    if (p) o.style.marginTop = parseInt(o.style.marginTop || 0) - 1 + 'px';
  13.  }
  14.  function scrolling() {
  15.    if (parseInt(o.style.marginTop) % lh !== 0) {
  16.      o.style.marginTop = parseInt(o.style.marginTop || 0) - 1 + 'px';
  17.      if (Math.abs(parseInt(o.style.marginTop || 0)) >= o.scrollHeight / 2) o.style.marginTop = 0;
  18.    }
  19.    else {
  20.      clearInterval(t);
  21.      setTimeout(start, delay);
  22.    }
  23.  }
  24.  setTimeout(function() {
  25.    var tbodys = o.querySelectorAll('tbody');
  26.    var tr = tbodys[0].querySelector('tr');
  27.    lh = tr ? tr.offsetHeight : 32;
  28.    if (tbodys.length === 1) {
  29.        o.innerHTML += tbodys[0].innerHTML;
  30.    }
  31.    o.style.marginTop = 0;
  32.    start();
  33.  }, delay);
  34. }
  35. startmarquee(20, 2000, tables[0]);

v1.4

  1. // 向右侧数据面板中拖入字段，可在代码中引用dataSet字段获取二维数组数据
  2. var doc = window.parent.document;
  3. var tables = doc.querySelectorAll('.m-dashbox-table .tbody table');
  5. function startmarquee(speed, delay, o) {
  6.  var p = true;
  7.  var t;
  8.  var lh;
  10.  function start() {
  11.    t = setInterval(scrolling, speed);
  12.    if (p) o.style.marginTop = parseInt(o.style.marginTop || 0) - 1 + 'px';
  13.  }
  14.  function scrolling() {
  15.    if (parseInt(o.style.marginTop) % lh !== 0) {
  16.      o.style.marginTop = parseInt(o.style.marginTop || 0) - 1 + 'px';
  17.      if (Math.abs(parseInt(o.style.marginTop || 0)) >= o.scrollHeight / 2) o.style.marginTop = 0;
  18.    }
  19.    else {
  20.      clearInterval(t);
  21.      setTimeout(start, delay);
  22.    }
  23.  }
  24.  setTimeout(function() {
  25.    var tbodys = o.querySelectorAll('tbody');
  26.    var tr = tbodys[0].querySelector('tr');
  27.    lh = tr ? tr.offsetHeight : 32;
  28.    if (tbodys.length === 1) {
  29.        o.innerHTML += tbodys[0].innerHTML;
  30.    }
  31.    o.style.marginTop = 0;
  32.    start();
  33.  }, delay);
  34. }
  35. for (var i = 0; i < tables.length; i++) {
  36.   startmarquee(20, 2000, tables[i]);
  37. }