当前位置： 移动技术网 > IT编程>开发语言>JavaScript > ExtJs整合Echarts的示例代码

ExtJs整合Echarts的示例代码

2018年04月20日  | 移动技术网IT编程  | 我要评论

由于echarts不提供表格功能，想要实现上图下表，需要自己增加一个table标签。

extjs整合echarts

从下载js文件通过import引用 新建一个页面，通过竖直放置的两个div排版，上方预留给echarts，下方预留给table标签

initpanel : function() {
 if (this.panel) {
  return
 }
 
 var panel = new ext.panel({
  id : 'echart',
  html :   '<div id="mainechart" style="height:50%;border:1px solid #ccc;padding:10px;"></div>'
        + '<div id="maintable" style="position:relative;text-align:center;padding:10px;">'
        +'<label for="maintable"><h1>档案调用次数表</h1></label>'
        +'<table id="content-table" border="1" style="width:100%;text-align:center;">'
        + '<tr><th>月份</th><th>调用次数</th></tr>',
  buttonalign : 'center',
  autoscroll : true,//允许滚动
  bodystyle : 'overflow-x:hidden; overflow-y:scroll'
  //开启竖直滚动条，关闭水平滚动条
 });
 
 this.panel = panel;
 return this.panel; 
}

echarts初始化和数据加载

官方声明一次性只能生成一个echarts，定义相关的样式，并且从后台查询数据提供给echarts

initdata : function(id, personname, year) {
 this.id = id;
 var div = document.getelementbyid("mainechart");
 var mychart = echarts.init(div);
 // mychart.showloading({
 // text: "图表数据正在努力加载..."
 // });
 this.mychart = mychart;
 // 初始化数据
 var data = [];
 var yearstr = "";
 var flag = false;
 var monthdata = [];
 
 var res = querydata();//调用数据查询，涉及项目名，略
 
 for (var i = 0; i < res.json.body.length; i++) {
  var map = res.json.body[i];
  monthdata.push(map.mm);//月份
  data.push(map.dycs);//调用次数
 }
 var options = {
  arg : {
   id : this.id
  },
  nodataloadingoption : {
   text : '暂无数据',
   effect : 'bubble',
   effectoption : {
    effect : {
     n : 0
    }
   }
  },
  title : {
   text : personname + "的档案调用情况",
   x : 'west'
  },
  tooltip : {
   trigger : 'axis'
  },
  legend : {
   data : ['调用次数']
  },
  toolbox : {
   show : true,
   feature : {
    mark : {
     show : true
    },
    dataview : {
    //重写dataview
    //在切换视图的时候能够以<table>的形式显示
     show : true,
     readonly : true,
     optiontocontent : function(opt) {
      var axisdata = opt.xaxis[0].data;
      var series = opt.series;
      var table = '<table style="width:100%;text-align:center" border="1"><tbody><tr>'
        + '<td>时间</td>'
        + '<td>'
        + series[0].name + '</td>'
        // + '<td>'
        // + series[1].name
        // + '</td>'
        + '</tr>';
      for (var i = 0, l = axisdata.length; i < l; i++) {
       table += '<tr>' + '<td>' + axisdata[i]
         + '</td>' + '<td>'
         + series[0].data[i] + '</td>'
         // + '<td>' + series[1].data[i]
         // + '</td>'
         + '</tr>';
      }
      table += '</tbody></table>';
      return table;
     }
    },
    magictype : {
     show : true,
     type : ['line', 'bar']
    },
    restore : {
     show : true
    },
    saveasimage : {
     show : true
    }
   }
  },
  calculable : true,
  xaxis : [{
     type : 'category',
     data : monthdata
    }],
  yaxis : [{
     type : 'value',
     splitarea : {
      show : true
     }
    }],
  series : [{
   name : '调用次数',
   type : 'bar',
   barwidth : 35,
   data : data,
   itemstyle : {//修改柱状图的颜色并在顶部显示数值
    normal : {
     color : '#3575a8', 
     label : {
      show : true,
      position : 'top',
      formatter : '{c}'//'{b}\n{c}'
     }
    }
   }
  }]
 };
 mychart.setoption(options, true);
 mychart.on('click', function econsole(param) {
   });
 this.tabledata(personname, monthdata, data)
 //表格的加载
}

表格数据的赋值

表格部分就是简单的html赋值，没什么好多讲的，注意拼接完后刷新一下html即可。 代码如下：

tabledata : function(personname, monthdata, data) {
 // 表格部分
 var html = '<div id="maintable" style="position:relative;text-align:center;padding:10px;">'
   +'<label for="maintable"><h1>'
   + personname
   + '档案调用情况表</h1></label>'
   +'<table id="content-table" border="1" style="width: 100%;text-align: center;">'
   + '<tr style="height: 30px;text-align:center;"><th>月份</th><th>调用次数</th></tr>';
 // if(monthdata.length != data.length)
 // throw new error("数据条数不对，请检查！");
 for (var i = 0; i < data.length; i++) {
  html += '<tr style="height: 30px;text-align: center;">'
     +'<td id="data-month-'+i+'">'
     + monthdata[i]
     + '</td><td id="data-value-'+i+'">'
     + data[i]
     + '</td></tr>'
 }
 html += '</table></div>';
 document.getelementbyid('maintable').innerhtml = html;
}

以上就可完成数据的联动，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网