ExtJs整合Echarts的示例代码

由于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;
}

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

您可能感兴趣的文章:

  • ExtJs使用总结(非常详细)
  • ExtJS 学习专题(一) 如何应用ExtJS(附实例)
  • ExtJS Ext.MessageBox.alert()弹出对话框详解
  • 学习ExtJS Window常用方法
  • Extjs Ext.MessageBox.confirm 确认对话框详解
  • ExtJs 学习笔记 Ext.Panle Ext.TabPanel Ext.Viewport
  • 学习ExtJS Panel常用方法
(0)

相关推荐

  • Extjs Ext.MessageBox.confirm 确认对话框详解

    Ext.MessageBox.confirm()详解 显示一个确认对话框,用来代替JavaScript标准的confirm()方法,具有两个按钮"是"和"否"如果为其提供一个回调函数,则该函数将在单击按钮后被调用(包括右上角的推出按钮),所单击按钮的id将被作为唯一的参数传递到回调函数中. 调用格式: confirm(String title,String msg,[function fn],[Object scope]) 参数说明: Ext.MessageBox.

  • ExtJs 学习笔记 Ext.Panle Ext.TabPanel Ext.Viewport第1/3页

    通过此文能学习到如下内容 1.创建一个简单的面板 Ext.Panel 2.制作一个可以拖动的面板 Ext.Panel 3 .使用选项卡面板 3.使用Ext.Viewport搭一个简单布局(用一个小例子来总结本文所有内容) 面板是ExtJs控件的基础,很多控件都是在面板的基础上扩展的,或者他会与其他控件之间有关系. 面板由一个工具栏.一个底部工具栏.面板头部.面板尾部和面板主区域几个部分组成.面本类中还提供了面板展开.关闭等功能.并提供了一些可重用的工具按钮让我们灵活的控制面板.面板可以放入其他任

  • ExtJS Ext.MessageBox.alert()弹出对话框详解

    复制代码 代码如下: Ext.onReady(function() { Ext.Msg.alert('提示', '逗号分隔参数列表'); //这种方式非常常见的 }); 效果图: 复制代码 代码如下: Ext.onReady(function() { //定义 JSON(配置对象) var config = { title:'提示', msg: 'JSON配置方式,简单吧' } Ext.Msg.show(config); }); 效果图: 上边我只是简单举例,好了看到了漂亮的界面了吧!接下来认识

  • 学习ExtJS Window常用方法

    一.属性 plain:布尔类型,true表示强制与背景色保持协调,默认值为false. resizable:布尔类型,用户是否可以调整窗体大小,默认值为true表示可以调整大小. maxinizable:布尔类型,true表示显示最大化按钮,默认值为false. maximized:布尔类型,true表示显示窗体时将窗体最大化,默认值为false. closable:布尔类型,true表示显示关闭按钮,默认值为true. bodyStyle:与边框的间距,如:bodyStyle:"padding

  • ExtJs使用总结(非常详细)

    一.获取元素(Getting Elements) 1.Ext.get var el = Ext.get('myElementId');//获取元素,等同于document.getElementById('myElementId');//会缓存 2. Ext.fly var el = Ext.fly('myElementId')//不需要缓存. 注:享元模式(Flyweight Design Pattern)是一种节省内存的模式,该模式的大概原理是建立单个全体对象然后不断反复使用它. 3.Ext.

  • ExtJS 学习专题(一) 如何应用ExtJS(附实例)

    要使用ExtJS,先要得到ExtJS库文件,ExtJS库文件可以到ExtJS官网下载,地址是www.extjs.com/products/gxt/download.php,把下载得到的ZIP压缩文件解压缩到[D:\ExtCode]目录下,可以得到以下内容. adapter:负责将里面提供第三方底层库(包括Ext自带的底层库)映射为Ext所支持的底层库.  build:  压缩后的ext全部源码(里面分类存放).   docs:  API帮助文档.  exmaples:提供使用ExtJs技术做出的

  • 学习ExtJS Panel常用方法

    一.属性 frame:布尔类型true 或 false ,为true时表示边框为圆角且具有背景色,取false则反之. xtype:在EXTJS的可视化组件部署中的一种机制,即通过指定xtype的值,来告诉容量如何初始化所包含的级件,如xtype:"textfiled",表示使用Ext.form.TextFile来进行初始化当前组件. xtype Class ------------- ------------------ box Ext.BoxComponent button Ext

  • ExtJs整合Echarts的示例代码

    由于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="ma

  • spring boot整合Swagger2的示例代码

    Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化RESTful风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样的速度来更新.文件的方法,参数和模型紧密集成到服务器端的代码,允许API来始终保持同步.Swagger 让部署管理和使用功能强大的API从未如此简单. 1.代码示例 1).在pom.xml文件中引入Swagger2 <dependency> <groupId>io.springfox</groupId> <artifa

  • SpringBoot 整合 JMSTemplate的示例代码

    1.1 添加依赖   可以手动在 SpringBoot 项目添加依赖,也可以在项目创建时选择使用 ActiveMQ 5 自动添加依赖.高版本 SpringBoot (2.0 以上) 在添加 activemq 连接池依赖启动时会报 Error creating bean with name 'xxx': Unsatisfied dependency expressed through field 'jmsTemplate'; 可以将 activemq 连接池换成 jms 连接池解决. <depen

  • Springboot实现Shiro整合JWT的示例代码

    写在前面 之前想尝试把JWT和Shiro结合到一起,但是在网上查了些博客,也没太有看懂,所以就自己重新研究了一下Shiro的工作机制,然后自己想了个(傻逼)办法把JWT和Shiro整合到一起了 另外接下来还会涉及到JWT相关的内容,我之前写过一篇博客,可以看这里:Springboot实现JWT认证 Shiro的Session机制 由于我的方法是改变了Shiro的默认的Session机制,所以这里先简单讲一下Shiro的机制,简单了解Shiro是怎么确定每次访问的是哪个用户的 Servlet的Se

  • SpringBoot整合SpringDataRedis的示例代码

      本文介绍下SpringBoot如何整合SpringDataRedis框架的,SpringDataRedis具体的内容在前面已经介绍过了,可自行参考. 1.创建项目添加依赖   创建SpringBoot项目,并添加如下依赖: <dependencies> <!-- springBoot 的启动器 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId

  • SpringBoot整合ShardingSphere的示例代码

    目录 一.相关依赖 二.Nacos数据源配置 三.项目配置 四.验证 概要: ShardingSphere是一套开源的分布式数据库中间件解决方案组成的生态圈,它由Sharding-JDBC.Sharding-Proxy和Sharding-Sidecar(计划中)这3款相互独立的产品组成. 他们均提供标准化的数据分片.分布式事务和数据库治理功能,可适用于如Java同构.异构语言.云原生等各种多样化的应用场景. 官网地址:https://shardingsphere.apache.org/ 一.相关

  • SpringBoot整合MyBatis-Plus的示例代码

    目录 前言 源码 环境 开发工具 SQL脚本 正文 单工程 POM文件(注意) application.properties(注意) 自定义配置(注意) 实体类(注意) Mapper接口(注意) Service服务实现类(注意) Controller前端控制器(注意) SpringBoot启动类(注意) 启用项目,调用接口(注意) 多工程 commons工程-POM文件 MyBatis-Plus commons工程-system.properties commons工程- 自定义配置 commo

  • springboot 整合sentinel的示例代码

    目录 1. 安装sentinel 2.客户端连接 1. 安装sentinel 下载地址:https://github.com/alibaba/Sentinel/releases/tag/1.7.0 ,由于我无法下载,所以使用docker安装, yuchunfang@yuchunfangdeMacBook-Pro ~ % docker pull bladex/sentinel-dashboard:1.7.0 yuchunfang@yuchunfangdeMacBook-Pro ~ % docker

  • springboot 整合hbase的示例代码

    目录 前言 HBase 定义 HBase 数据模型 物理存储结构 数据模型 1.Name Space 2.Region 3.Row 4.Column 5.Time Stamp 6.Cell 搭建步骤 1.官网下载安装包: 2.配置hadoop环境变量 3.修改 hbase-env.cmd配置文件 4.修改hbase-site.xml 文件 5.启动hbase服务 6.hbase客户端测试 Java API详细使用 1.导入客户端依赖 2.DDL相关操作 3.DML相关操作 插入数据与查询数据 H

  • springboot整合xxl-job的示例代码

    目录 关于xxl-job 调度中心 执行器 关于xxl-job 在我看来,总体可以分为三大块: 调度中心 执行器 配置定时任务 调度中心 简单来讲就是 xxl-job-admin那个模块,配置: 从doc里面取出xxl-job.sql的脚本文件,创建对应的数据库. 进行配置文件的配置,如下图 进行日志存放位置的修改 然后idea打包之后就能当作调度中心运行了 访问地址:ip:port/xxl-job-admin 默认的账号密码:admin/123456 注意:你进去后修改密码,有些浏览器就算你账

随机推荐