《SoloBug - bug管理系统》-Echarts+Ajax实现图表数据异步加载

2017年中国大学生计算机设计大赛参赛作品《SoloBug - bug管理系统》
【redis-demo】使用Jedis api 实现后端缓存优化
项目组内各模块BUG类型占比（饼状图）：

项目组内各模块BUG处理状态（柱状图/折线图）：

项目组各成员处理BUG情况（柱状图/折线图）：

柱状图/折线图前端JS代码：

        <script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'), 'dark');// 指定图表的配置项和数据function toShow() {$.ajax({type: 'POST',data: {fromDate: $("#plan").val(), //获取条件搜索处-起始日期值toDate: $("#last").val() //获取条件搜索处-截止日期值},url: "<%=path%>/statisticsCtrl/showStatisticsProduceLine",async: false,success: function(data) {JSON.stringify(data);myChart.setOption({tooltip: {trigger: 'axis'},legend: {data: ['未解决', '已拒绝', '待审核', '已解决', '已延期', '已关闭']},toolbox: {show: true,feature: {mark: {show: true},dataView: {show: true,readOnly: false},magicType: {show: true,type: ['line', 'bar', 'stack', 'tiled']},restore: {show: true},saveAsImage: {show: true}}},calculable: true,xAxis: [{type: 'category',boundaryGap: false,data: data.name}],yAxis: [{type: 'value'}],series: [{name: '未解决',type: 'line',smooth: true,label: {normal: {show: true,position: 'top'}},data: data.create1},{name: '已拒绝',type: 'line',smooth: true,label: {normal: {show: true,position: 'top'}},data: data.create2},{name: '待审核',type: 'line',smooth: true,label: {normal: {show: true,position: 'top'}},data: data.create3},{name: '已解决',type: 'line',smooth: true,label: {normal: {show: true,position: 'top'}},data: data.update1},{name: '已延期',type: 'line',smooth: true,label: {normal: {show: true,position: 'top'}},data: data.update2},{name: '已关闭',type: 'line',smooth: true,label: {normal: {show: true,position: 'top'}},data: data.update3}]});}});}</script>

饼状图前端JS代码：

        <script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'), 'dark');// 指定图表的配置项和数据// 指定图表的配置项和数据function toShow() {var names = [];var values = [];$.ajax({type: 'POST',data: {fromDate: $("#plan").val(), //获取条件搜索处-起始日期值toDate: $("#last").val() //获取条件搜索处-截止日期值},url: "<%=path%>/statisticsCtrl/showStatisticsProducePie",async: false,success: function(data) {JSON.stringify(data);var array = [];for(i = 0; i < data.length; i++) {var map = {};map.name = data[i].name;map.value = data[i].value;names.push(data[i].name);array[i] = map;}myChart.setOption({tooltip: {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {orient: 'vertical',x: 'left',data: names},toolbox: {show: true,feature: {mark: {show: true},dataView: {show: true,readOnly: false},magicType: {show: true,type: ['pie', 'funnel'],option: {funnel: {x: '25%',width: '50%',funnelAlign: 'left',max: 1548}}},restore: {show: true},saveAsImage: {show: true}}},calculable: true,series: [{name: '访问来源',type: 'pie',radius: '55%',center: ['50%', '60%'],data: array}]});}});}</script>

controller代码：

package bug.frontstage.statistics.controller;
import java.util.ArrayList;
import javax.servlet.http.HttpServletRequest;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import bug.frontstage.statistics.dto.PieUtil;
import bug.frontstage.statistics.dto.StaUtil;
import bug.frontstage.statistics.service.StatisticsService;@RequestMapping("statisticsCtrl")
@Controller
public class StatisticsController {@Autowiredprivate StatisticsService StatisticsService;@RequestMapping("/showStatistics")@ResponseBodypublic StaUtil showStatistics(HttpServletRequest req,String fromDate,String toDate){String id= req.getSession().getAttribute("pid")+"";StaUtil dataLine=StatisticsService.queryStatistics(id,fromDate,fromDate);return dataLine;}@RequestMapping("/showStatisticsProduceLine")@ResponseBodypublic StaUtil showStatisticsProduceLine(HttpServletRequest req,String fromDate,String toDate){String id= req.getSession().getAttribute("pid")+"";StaUtil dataLine=StatisticsService.queryStatisticsProduceLine(id,fromDate,toDate);return dataLine;}@RequestMapping("/showStatisticsProducePie")@ResponseBodypublic ArrayList<PieUtil> showStatisticsProducePie(HttpServletRequest req,String fromDate,String toDate){String id= req.getSession().getAttribute("pid")+"";ArrayList<PieUtil> list=StatisticsService.queryStatisticsPie(id,fromDate,toDate);return list;}
}

（柱状图/折线图）在这里我通过创建一个StaUtil 来封装传递从后台传到前台web端的数据：

package bug.frontstage.statistics.dto;public class StaUtil {private Object[] name; private Object[] create1;private Object[] create2;private Object[] create3;private Object[] update1;private Object[] update2;private Object[] update3;private Object[] delay;public Object[] getName() {return name;}public void setName(Object[] name) {this.name = name;}.......}

（饼状图）再创建了一个PieUtil来封装传递从后台传到前台web端的数据：

package bug.frontstage.statistics.dto;public class PieUtil {private String name;private String value;public String getName() {return name;}public void setName(String name) {this.name = name;}public String getValue() {return value;}public void setValue(String value) {this.value = value;}public PieUtil(String name, String value) {super();this.name = name;this.value = value;}}

然后剩下的就是在Service层/Dao层实现自己的业务逻辑，获取对应的数据，因为不同功能所对应的业务逻辑不同，所以我这块就不贴出来献丑了（那块代码确实写的比较乱….. sql也写得贼简陋…..）

柱状图/折线图实现特别简单，直接看上面代码就行，然后我这里再说一些在做饼状图时，个人的想法吧。

                var names = [];var values = [];$.ajax({type: 'POST',data: {fromDate: $("#plan").val(), //获取条件搜索处-起始日期值toDate: $("#last").val() //获取条件搜索处-截止日期值},url: "<%=path%>/statisticsCtrl/showStatisticsProducePie",async: false,success: function(data) {JSON.stringify(data);var array = [];for(i = 0; i < data.length; i++) {var map = {};map.name = data[i].name;map.value = data[i].value;names.push(data[i].name);array[i] = map;}......

在前面我创建了一个PieUtil类，来封装name属性与value属性。
name属性对应着：预算报告模块-缺陷bug 这类名称
value属性对应着：14 数值

然后通过Controller层返回来的 ArrayList<PieUtil> 在前台web端利用js遍历

                        for(i = 0; i < data.length; i++) {var map = {};map.name = data[i].name;map.value = data[i].value;names.push(data[i].name);array[i] = map;}

用map来接收一个个的PieUtil，然后装进array数组里。
也就得到Echarts饼状图所需要的数据格式：

            data:[{value:X, name:'XX'},{value:X, name:'XX'},{value:X, name:'XX'},{value:X, name:'XX'},{value:X, name:'XX'}],

这样饼状图也就能展现出来了

扩展
也可以在图表上添加点击事件，实现点击某块跳转到相应的数据上

myChart.on('click', function (params) {alert(params.name)window.open('http://116.196.66.192:8080/Bug/tologin');
});

以上仅为个人想法，如果您有能好能简单的实现方法，欢迎您在留言区指出，感谢！！！

《SoloBug - bug管理系统》-Echarts+Ajax实现图表数据异步加载相关推荐

js如何将数据放在一个内置窗口里面_Java 爬虫遇上数据异步加载，试试这两种办法！...
这是 Java 爬虫系列博文的第三篇,在上一篇 Java 爬虫遇到需要登录的网站,该怎么办? 中,我们简单的讲解了爬虫时遇到登录问题的解决办法,在这篇文章中我们一起来聊一聊爬虫时遇到数据异步加载的问题 ...
java 爬虫异步_Java 爬虫遇上数据异步加载，试试这两种办法！
这是 Java 爬虫系列博文的第三篇,在上一篇 Java 爬虫遇到需要登录的网站,该怎么办? 中,我们简单的讲解了爬虫时遇到登录问题的解决办法,在这篇文章中我们一起来聊一聊爬虫时遇到数据异步加载的问题 ...
JAVA异步爬虫_Java 爬虫遇上数据异步加载，试试这两种办法！
这是 Java 爬虫系列博文的第三篇,在上一篇 Java 爬虫遇到需要登录的网站,该怎么办? 中,我们简单的讲解了爬虫时遇到登录问题的解决办法,在这篇文章中我们一起来聊一聊爬虫时遇到数据异步加载的问题 ...
Flask + Ajax + Mysql 实现网页异步加载（一）
滚动条滑到底部时候,在当前页面加载下一页数据: 滚动条到达顶部时候,刷新当前页面. 一.flask 实现的服务器端 @app.route('/',methods=['GET','POST']) def ...
android学习笔记---64_ListView数据异步加载与AsyncTask
2013/5/26 Java技术qq交流群:JavaDream:251572072 64_ListView数据异步加载与AsyncTask ------------------------------ ...
Echarts 图表在异步加载数据时，增加loading动画，提升用户体验感
文章目录一.简介二.增加loading加载动效 2.1 实现原理 2.2 实现步骤 2.3 实现效果图三.完整源代码及解析一.简介 Echarts 图表在异步请求数据时,如果加载时间较长,一个 ...
jq ajax 点击按钮异步加载更多
挺简单的异步加载代码都有备注! 流程挺简单的:查询数据库查出内容,写分页,前台输出,js异步请求服务器,控制器处理返回! 然后是按分页请求!每次请求几页这样.具体大伙去研究研究吧! // info/ ...
android的progressDialog 的使用。android数据异步加载对话框提示
在调用的Activity中定义一个全局的 progressDialog 点击按钮的时候调用下面这句 progressDialog = ProgressDialog.show(SearchActivit ...
vue+echarts实现动态绘制图表及异步加载数据的方法
前言背景:vue写的后台管理,需要将表格数据绘制成图表(折线图,柱状图),图表数据都是通过接口请求回来的. 安装 cnpm install echarts --s (我这里用了淘宝镜像,不知道同 ...

《SoloBug - bug管理系统》-Echarts+Ajax实现图表数据异步加载

《SoloBug - bug管理系统》-Echarts+Ajax实现图表数据异步加载相关推荐

最新文章

热门文章