ExtJs整合Echarts的示例代码


Posted in Javascript onFebruary 27, 2018

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

ExtJs整合Echarts

从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;
}

以上就可完成数据的联动,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript插入样式实现代码
Feb 22 Javascript
jquery struts 验证唯一标识(公用方法)
Mar 27 Javascript
Jquery带搜索框的下拉菜单
May 06 Javascript
JS防止用户多次提交的简单代码
Aug 01 Javascript
js 金额格式化来回转换示例
Feb 23 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
jQuery animate easing使用方法图文详解
Jun 17 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
Sep 13 Javascript
JavaScript中的遍历详解(多种遍历)
Apr 07 Javascript
Vue动态生成表格的行和列
Jul 18 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 Javascript
jQuery实现视频展示效果
May 30 jQuery
angularJS实现动态添加,删除div方法
Feb 27 #Javascript
浅谈React中的元素、组件、实例和节点
Feb 27 #Javascript
AngularJS动态添加数据并删除的实例
Feb 27 #Javascript
JS严格模式知识点总结
Feb 27 #Javascript
总结js函数相关知识点
Feb 27 #Javascript
详解jQuery中的isPlainObject()使用方法
Feb 27 #jQuery
详解Vue Elememt-UI构建管理后台
Feb 27 #Javascript
You might like
关于文本留言本的分页代码
2006/10/09 PHP
给初学者的30条PHP最佳实践(荒野无灯)
2011/08/02 PHP
解析左右值无限分类的实现算法
2013/06/20 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
Jquery 常用方法经典总结
2010/01/28 Javascript
jquery 可拖拽的窗体控件实现代码
2010/03/21 Javascript
javascript中的一些注意事项 更新中
2010/12/06 Javascript
jquery操作cookie插件分享
2014/01/14 Javascript
对JavaScript中this指针的新理解分享
2015/01/31 Javascript
在JavaScript中操作时间之setYear()方法的使用
2015/06/12 Javascript
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
JavaScript获取图片像素颜色并转换为box-shadow显示
2016/03/11 Javascript
深入解析JavaScript中的arguments对象
2016/06/12 Javascript
vue组件学习教程
2017/09/09 Javascript
AngularJS下$http服务Post方法传递json参数的实例
2018/03/29 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
2020/08/05 Javascript
python实现的简单猜数字游戏
2015/04/04 Python
简单介绍Python的Tornado框架中的协程异步实现原理
2015/04/23 Python
python中requests小技巧
2017/05/10 Python
Python表示矩阵的方法分析
2017/05/26 Python
在python win系统下 打开TXT文件的实例
2018/04/29 Python
python xlsxwriter创建excel图表的方法
2018/06/11 Python
Pytorch Tensor的统计属性实例讲解
2019/12/30 Python
Python操作Excel工作簿的示例代码(\*.xlsx)
2020/03/23 Python
python 实现任务管理清单案例
2020/04/25 Python
opencv-python的RGB与BGR互转方式
2020/06/02 Python
Python如何发送与接收大型数组
2020/08/07 Python
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
美国最大的珠宝商之一:Littman Jewelers
2016/11/13 全球购物
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
前台接待员岗位职责
2014/01/02 职场文书
就业协议书的作用
2014/04/11 职场文书
无罪辩护词范文
2015/05/21 职场文书
毛主席纪念堂观后感
2015/06/17 职场文书
Python中非常使用的6种基本变量的操作与技巧
2022/03/22 Python