Java前端引入echart插件

前端HTML文件中引入插件：

 <div class="row"><div class="col-md-5 col-md-offset-1"><div class="float-e-margins"><div class="echarts" id="proGrade"></div></div></div><div class="col-md-5 "><div class="ibox float-e-margins"><div class="echarts" id="backup"></div></div></div></div>

因为引入了echart插件，所以要引入echart

<script src="/js/plugins/echarts/echarts-all.js"></script>

还要引入成各种图的js文件

var prefix = "/nsmp/dept";
$(function () {$('#myTab li:eq(0) a').tab('show');pie("sysCount","各单位系统总数情况","/nsmp/analysis/info_sys/count_dept");bar("deptTime","系统等保评估时间","/nsmp/analysis/info_sys/count_create_date");pie("proGrade","系统等级分布情况","/nsmp/analysis/info_sys/pro_grade");pie("backup","系统是否备案情况","/nsmp/analysis/info_sys/backup");pie("revise","系统是否整改情况","/nsmp/analysis/info_sys/revise");pie("dept_result","系统是否测评情况","/nsmp/analysis/info_sys/dept_result");load();
});function pie(id,title,url){var allData=[];var legendData=[];$.ajax({type : "post",url : url,contentType: "application/json; charset=utf-8",async : false,dataType: 'json',success : function(datas) {$.each(datas, function(index,value) {var data = {value:value.cnt, name:value.name}allData.push(data);legendData.push(value.name);})}});var pieChart = echarts.init(document.getElementById(id));var pieoption = {title : {text: title,x:'center'},tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},toolbox: {show : true,feature : {restore : {show: true},saveAsImage : {show: true}}},legend: {orient : 'vertical',x : 'left',data: legendData},calculable : true,series : [{name:title,type:'pie',radius : '55%',center: ['50%', '60%'],data:allData}]};pieChart.setOption(pieoption);// window.onresize = barChart.resize;  写在外面
}
function bar(id,title,url){var seriesData =[];var x_Data =[];$.ajax({type : "post",url : url,contentType: "application/json; charset=utf-8",async : false,dataType: 'json',success : function(datas) {$.each(datas, function(index,value) {x_Data.push(value.createDate);seriesData.push(value.cnt);})}});var barChart = echarts.init(document.getElementById(id));var baroption = {title : {text: title,x:'center'},tooltip : {trigger: 'axis'},toolbox: {show : true,feature : {restore : {show: true},magicType: {show: true, type: ['line', 'bar']},saveAsImage : {show: true}}},grid:{x:30,x2:40,y2:24},calculable : true,xAxis : [{type : 'category',//data : ['1月','2月','3月','4月','4月','6月','7月','8月','9月','10月','11月','12月']data :x_Data}],yAxis : [{type : 'value'}],series : [{name:title,type:'bar',//data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],data:seriesData,markPoint : {//最大值最小值标识data : [{type : 'max', name: '最大值'},{type : 'min', name: '最小值'}]},markLine : {//平均值data : [{type : 'average', name: '平均值'}]}}]};barChart.setOption(baroption);
}

在js层中往后端controller层里边发送请求

有一段代码不知道有没有用，文件中注掉了，所以我就单独拿出来放到这里了。

/*function load() {$('#departTable').bootstrapTable({method : 'get', // 服务器数据的请求方式 get or posturl : prefix + "/list", // 服务器数据的加载地址striped : true, // 设置为true会有隔行变色效果dataType : "json", // 服务器返回的数据类型pagination : true, // 设置为true会在底部显示分页条// queryParamsType : "limit",// //设置为limit则会发送符合RESTFull格式的参数singleSelect : false, // 设置为true将禁止多选iconSize : 'outline',pageSize : 10, // 如果设置了分页，每页数据条数pageNumber : 1, // 如果设置了分布，首页页码search : true, // 是否显示搜索框showColumns : true, // 是否显示内容下拉框（选择显示的列）sidePagination : "server",// 设置在哪里进行分页，可选值为"client" 或者// "server"// queryParams : queryParams,// //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果// queryParamsType = 'limit' ,返回参数必须包含// limit, offset, search, sort, order 否则, 需要包含:// pageSize, pageNumber, searchText, sortName,// sortOrder.// 返回false将会终止请求columns : [{field : 'id', // 列字段名title : '序号' // 列标题},{field : 'deptNamee',title : '单位名称'},{field : 'detailAddress',title : '单位地址'},{field : 'postalcode',title : '邮政编码'},{field : 'adminDivision',title : '行政区划代码'},{field : 'principalName',title : '单位负责人'},{field : 'principalJob',title : '职务'},{field : 'principalPhone',title : '办公电话'},{field : 'principalCellPhone',title : '移动电话'},{field : 'principalEmail',title : '电子邮件'},{field : 'subjection',title : '隶属关系'},{field : 'unitType',title : '单位类型'},{field : 'industryType',title : '行业类别'},{field : 'count',title : '信息系统总数总数'}]});
}
function reLoad() {$('#departTable').bootstrapTable('refresh');
}*/

然后是去controller层里边去写接口：

/*** 统计图按照时间查询信息系统个数* @return*/@Log("统计图单位下的信息系统个数")@PostMapping("/info_sys/pro_grade")@ResponseBodypublic List<Map<String,Object>> getInfoSysByProGrade() {List<Map<String,Object>> analysisList = analysisService.getInfoSysByProGrade();return analysisList;}/*** 统计图按照备案民警查询备案审核情况* @return*/@Log("统计图单位下的备案审核情况")@PostMapping("/info_sys/backup")@ResponseBodypublic List<Map<String,Object>> getInfoSysByBackup() {List<Map<String,Object>> analysisList = analysisService.getInfoSysByBackup();return analysisList;}

这是controller层里边对应的两个接口

后边就是service层了：

 List<Map<String,Object>> getInfoSysByProGrade();/*** 备案审核情况分析* @return*/
List<Map<String,Object>> getInfoSysByBackup();

接着是service层的实现类：

@Overridepublic List<Map<String, Object>> getInfoSysByProGrade() {return analysisDao.getInfoSysByProGrade();}/*** 备案审核情况分析* @return*/@Overridepublic List<Map<String, Object>> getInfoSysByBackup() {return analysisDao.getInfoSysByBackup();}

dao层，因为要调取后端的xml层去操作数据库：

 List<Map<String,Object>> getInfoSysByProGrade();/*** 备案审核情况分分析* @return*/List<Map<String,Object>> getInfoSysByBackup();

最后边了，就是xml层了。

第一个xml文件的SQL语句：

<!--getInfoSysByProGrade--><select id="getInfoSysByProGrade" resultType="java.util.Map">SELECTcount(g.id) AS cnt,CONCAT(g.pro_grade,'级')   AS nameFROMinfo_sys AS infoLEFT JOIN grade g ON info.id = g.info_sys_idWHEREg.pro_grade != ""GROUP BYg.pro_grade;</select>

第二个文件的xml文件的SQL语句：

<!--getInfoSysByPolicName备案审核情况分析--><select id="getInfoSysByBackup" resultType="java.util.Map">SELECTcount(g.id) AS cnt,IF(g.`backup`=1,'是','否') AS nameFROMgrade gGROUP BYg. BACKUP;</select>

好了，大概就是这样子，让我们回忆一下这个过程。

首先是HTML文件——>其次是引用echart的插件和自己本身的js文件（用于和后端进行交互的）——>controller层开始写接口——>service 层写接口——>serviceImpl写接口的实现类——>dao层需要和后端进行交互——>最后了，就是xml文件中的SQL语句了。

告成。。。

Java前端引入echart插件相关推荐

java前端的日期插件_几个前端时间插件总结
几个前端时间插件总结总结一下几款时间插件,分别是 - [ ] jeDate 手册http://www.jemui.com/jedate/ - [ ] bootstrap-datetimepicker ...
java 前端导出exvel_使用纯前端做的Excel导出了解一下
该楼层疑似违规已被系统折叠隐藏此楼查看此楼这是我改造的前端Excel导出,需要引入jQuery插件[复制粘贴即可使用],各位不懂可以试一下.纯属练习使用JS标签方式将页面数据信息导出xlsx文件 ...
canvas画条形图微信小程序_小程序-引入 echart 图表画圆饼图
前言在 web 中引入echart可视化图表是很常见的操作,那在小程序当中又如何引入使用呢示例效果完整示例效果-可以点击此处查看下载使用 ec-canvas 在github上下载echarts ...
【泛微系统】OA系统集成echart插件，自定义图表demo实例
OA系统集成echart插件,自定义图表demo实例前言在公司有时候需要做一些自定义报表,因为系统自带的报表工具很low,这时候可以使用echart插件: 第一步:下载相关jar包首先下载一下m ...
java spi 扩展_【扩展和解耦】JAVA原生SPI实现插件扩展
Java极客 | 作者 / 铿然一叶这是Java极客的第 81 篇原创文章相关阅读: 1. 什么是插件通俗的讲插件有以下特征: 1.增加或者替换已有能力 2.不影响原有功能 3.对原有系 ...
前端使用XLSX插件实现导出功能，包含隐藏英文表头字段
前端使用XLSX插件实现导出功能,具体代码实现: 1.npm install xlsx --save 下载安装xlsx插件依赖包 2.在使用得地方引入import XLSX, { utils } fr ...
【Java前端】HTML(上)
Java前端(上) ①.HTML简介 - 网页 - 常用浏览器 - Web标准 ②.HTML标签 - HTML语法规范 - HTML基本结构标签 - 开发工具 - HTML常用标签标题标签文本格式 ...
MVC web项目中引入jquery插件
MVC web项目中引入jquery插件 1.下载jquery [https://jquery.com/] 看到这样的文档,直接CTRL+S保存到自己的文件夹 2.将文件夹中的js文件直接拖拽导入到项 ...
java前端编程用什么软件_java前端开发的工具
1 java前端开发的工具在实际开发中,Java也有多个应用方向,手机开发.桌面开发.企业级应用开发.嵌入式开发等.所以学好Java,无疑多了一把通往成功大门的钥匙.下面小编给大家说说java前端开 ...

Java前端引入echart插件

Java前端引入echart插件相关推荐

最新文章

热门文章