为smartchart增加表格图形

发表评论
5824 views

为smartchart增加表格图形

Echart 有提供了图形的展示, 但是没有表格, smartchart当然不能少了表格 smartchart 是一个非常灵活的平台, 增加表格功能也是相当容易, 今天就教大家如何增加表格图形, 同时也可以了解自定义图形的使用方法

首先我们点击新建图形, 将默认的code全部删除, 贴入以下code,

  • {{dataset}}--由平台传进来的数据集,请参考上篇文章, dataset格式说明
  • dom_{{name}}--这个是用来唯一标识这个表的, 总之这么写就行了
  • 其它的都是简单的js代码了, 遍历打印出html
var data={{dataset}};
var table = '<table class="table">';
var option_{{name}} ='';

//表头部, 不需要可以去掉
table += "<thead><tr>";
for(var j=0; j<data[0].length;j++){
  table = table + "<td>" + data[0][j] + "</td>";
};
table += "</thead></tr>";

//表主体, 如果有头部, 把i=0改为i=1
table += "<tbody>";
 for(var i=1;i<data.length;i++){
  table += "<tr>";
  for (var j=0; j<data[i].length;j++){
   table = table + "<td>" + data[i][j] + "</td>";
  };
  table += "</tr>";
 };
 table += "</tbody></table>";

dom_{{name}}.innerHTML=table;

小伙伴们, 如果要自定义, 是不是非常简单

大家会发现这个表格,似乎有些简单了, 比如要隔行变色如何. 我们只需要增一个判断就可以了, 将第14行代码改为如下:

if(i%2==0){
  table += "<tr>";}
 else{table += "<tr class='info'>"};
////<tr class="success">,"error","warning","info"可改变颜色

总之只要你稍微了解html, js就有无限可能 期待你的定制