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 相关文章推荐
jQuery EasyUI API 中文文档 - Documentation 文档
Sep 29 Javascript
Jquery中ajax方法data参数的用法小结
Feb 12 Javascript
node.js中的buffer.toString方法使用说明
Dec 14 Javascript
Backbone.js的Hello World程序实例
Jun 19 Javascript
用javascript实现自动输出网页文本
Jul 30 Javascript
jQuery Ajax File Upload实例源码
Dec 12 Javascript
JavaScript实现快速排序的方法分析
Jan 10 Javascript
使用async-validator编写Form组件的方法
Jan 10 Javascript
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 Javascript
Vue数字输入框组件的使用方法
Oct 19 Javascript
原生JS实现烟花效果
Mar 10 Javascript
uniapp微信小程序实现一个页面多个倒计时
Nov 01 Javascript
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
将兴奋、喜悦和坎加斯带到戴安娜:亚马逊公主
2020/03/03 欧美动漫
TMDPHP 模板引擎使用教程
2012/03/13 PHP
DOM XPATH获取img src值的query
2013/09/23 PHP
PHP URL参数获取方式的四种例子
2014/02/28 PHP
php获取文件类型和文件信息的方法
2015/07/10 PHP
PHP处理会话函数大总结
2015/08/05 PHP
利用PHP判断文件是否为图片的方法总结
2017/01/06 PHP
jValidate 基于jQuery的表单验证插件
2009/12/12 Javascript
js中AppendChild与insertBefore的用法详细解析
2013/12/16 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
JS烟花背景效果实现方法
2015/03/03 Javascript
jQuery晃动层特效实现方法
2015/03/09 Javascript
js简单判断flash是否加载完成的方法
2016/06/21 Javascript
javascript 解决浏览器不支持的问题
2016/09/24 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
Openlayers学习之地图比例尺控件
2020/09/28 Javascript
Python中dictionary items()系列函数的用法实例
2014/08/21 Python
python 时间戳与格式化时间的转化实现代码
2016/03/23 Python
Python 迭代器工具包【推荐】
2016/05/06 Python
Python 实现删除某路径下文件及文件夹的实例讲解
2018/04/24 Python
Python I/O与进程的详细讲解
2019/03/08 Python
使用pytorch搭建AlexNet操作(微调预训练模型及手动搭建)
2020/01/18 Python
最简单的matplotlib安装教程(小白)
2020/07/28 Python
Pycharm如何自动生成头文件注释
2020/11/14 Python
美国孕妇装品牌:Destination Maternity
2018/02/04 全球购物
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
新西兰最大的天然保健及护肤品网站:HealthPost(直邮中国)
2021/02/13 全球购物
易程科技软件测试笔试
2013/03/24 面试题
行政助理的职责
2013/11/14 职场文书
工作鉴定评语
2014/05/04 职场文书
法定代表人授权委托书范文
2014/08/02 职场文书
群众路线教育实践活动思想汇报(2014特荐篇)
2014/09/16 职场文书
2014办公室年度工作总结
2014/12/09 职场文书
python异常中else的实例用法
2021/06/15 Python
WINDOWS 64位 下安装配置mysql8.0.25最详细的教程
2022/03/22 MySQL