ECharts SSH+JQueryAjax+Json+JSP将数据库中数据填充到ECharts中

本文引用自:http://blog.csdn.net/ArcticFoxHan/article/details/38071641
 

1.导入包,搭建SSH框架

导入Jquery的JS包,<script src="JS/jquery.1.7.1.js"></script>

导入ECharts的包。<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>

前提你的SSH已经搭好了,数据已经传递到了Struts层。

2.在Action层,将数据封装成JSON对象,并通过ServletResponse对象输出

我的实际功能是讲实际电量数据和计划电量数据显示的Echarts图表上。将实际电量和计划电量均放在ArrayList中,然后将这两个ArrayList放到一个ArrayList中,比如叫merge。之后将merge对象封装到JSONArray中,这时的JSONArray其实存的是两个一位数组,然后将这个JSONArray对象通过Servlet的Response对象输出,请求这个方法的JSP会获得这个对象。

 1 public String getAllPower() {
 2         HttpServletRequest request = ServletActionContext.getRequest();
 3         HttpServletResponse response = ServletActionContext.getResponse();
 4         try {
 5             request.setCharacterEncoding("utf-8");
 6             response.setCharacterEncoding("utf-8");
 7         } catch (UnsupportedEncodingException e) {
 8             // TODO Auto-generated catch block
 9             e.printStackTrace();
10         }
11         List<Power> powers = powerCompareService.getAllPower();
12         // 获取实际电量和计划电量
13         List actualPowerList = new ArrayList();
14         List expectedPowerList = new ArrayList();
15         for (Power power : powers) {
16             actualPowerList.add(power.getActualPower());
17             expectedPowerList.add(power.getExpectedPower());
18         }
19         List<List> merge = new ArrayList();
20         merge.add(actualPowerList);
21         merge.add(expectedPowerList);
22         JSONArray jsonArray = JSONArray.fromObject(merge);
23         try {
24             response.setHeader("Cache-Control", "no-cache");
25             response.setContentType("aplication/json;charset=UTF-8");
26             response.getWriter().print(jsonArray);
27         } catch (IOException e) {
28             // TODO Auto-generated catch block
29             e.printStackTrace();
30         }
31         // request.setAttribute("list_powers", powers);
32         // return "success";
33         return null;
34     }  

注意需要return null;因为不希望struts导航到其他的地方,而是通过JQuery Ajax来请求。

3.JqueryAjax请求JSON数据

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 来自百度CDN -->
<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
<script src="JS/jquery-1.7.1.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main1" style="height:400px"></div>
    <button type="button" id="button1">显示/隐藏</button>
    <script type="text/javascript">
        $(function() {
            $("#button1").click(function() {
                $("#main1").slideToggle(999);
            });
        });
        var actualPower = new Array();
        var expectedPower = new Array();
        $.ajax({
            url : ‘Power.action‘,
            type : ‘GET‘,
            dataType : ‘json‘,
            async : false,
            success : function(jsonArray) {
                for (x in jsonArray[0]) {
                    actualPower[x] = jsonArray[0][x];
                }
                for (x in jsonArray[0]) {
                    expectedPower[x] = jsonArray[1][x];
                }
            }
        });
        // 路径配置
        require.config({
            paths : {
                ‘echarts‘ : ‘http://echarts.baidu.com/build/echarts‘,
                ‘echarts/chart/bar‘ : ‘http://echarts.baidu.com/build/echarts‘
            }
        });  

        // 使用
        require([ ‘echarts‘, ‘echarts/chart/bar‘ // 使用柱状图就加载bar模块,按需加载
        ], function(ec) {
            // 基于准备好的dom,初始化echarts图表
            var myChart = ec.init(document.getElementById(‘main1‘));  

            var option = {
                title : {
                    text : ‘发电量对比‘,
                    subtext : ‘模拟测试‘
                },
                tooltip : {
                    trigger : ‘axis‘
                },
                legend : {
                    data : [ ‘逆变器‘, ‘汇流箱‘, ‘发电单元1‘, ‘发电单元2‘ ]
                },
                toolbox : {
                    show : true,
                    feature : {
                        mark : {
                            show : true
                        },
                        dataView : {
                            show : true,
                            readOnly : false
                        },
                        magicType : {
                            show : true,
                            type : [ ‘line‘, ‘bar‘ ]
                        },
                        restore : {
                            show : true
                        },
                        saveAsImage : {
                            show : true
                        }
                    }
                },
                calculable : true,
                xAxis : [ {
                    type : ‘category‘,
                    data : [ ‘1月‘, ‘2月‘, ‘3月‘, ‘4月‘, ‘5月‘, ‘6月‘, ‘7月‘, ‘8月‘,
                            ‘9月‘, ‘10月‘, ‘11月‘, ‘12月‘ ]
                } ],
                yAxis : [ {
                    type : ‘value‘
                } ],
                series : [ {
                    name : ‘逆变器‘,
                    type : ‘line‘,
                    data : actualPower,
                    markPoint : {
                        data : [ {
                            type : ‘max‘,
                            name : ‘最大值‘
                        }, {
                            type : ‘min‘,
                            name : ‘最小值‘
                        } ]
                    },
                    markLine : {
                        data : [ {
                            type : ‘average‘,
                            name : ‘平均值‘
                        } ]
                    }
                }, {
                    name : ‘汇流箱‘,
                    type : ‘bar‘,
                    data : actualPower,
                    markPoint : {
                        data : [ {
                            type : ‘max‘,
                            name : ‘最大值‘
                        }, {
                            type : ‘min‘,
                            name : ‘最小值‘
                        } ]
                    },
                    markLine : {
                        data : [ {
                            type : ‘average‘,
                            name : ‘平均值‘
                        } ]
                    }
                }, {
                    name : ‘发电单元1‘,
                    type : ‘bar‘,
                    data : actualPower,
                    markPoint : {
                        data : [ {
                            type : ‘max‘,
                            name : ‘最大值‘
                        }, {
                            type : ‘min‘,
                            name : ‘最小值‘
                        } ]
                    },
                    markLine : {
                        data : [ {
                            type : ‘average‘,
                            name : ‘平均值‘
                        } ]
                    }
                }, {
                    name : ‘发电单元2‘,
                    type : ‘bar‘,
                    data : expectedPower,
                    markPoint : {
                        data : [ {
                            name : ‘年最高‘,
                            value : 182.2,
                            xAxis : 7,
                            yAxis : 183,
                            symbolSize : 18
                        }, {
                            name : ‘年最低‘,
                            value : 2.3,
                            xAxis : 11,
                            yAxis : 3
                        } ]
                    },
                    markLine : {
                        data : [ {
                            type : ‘average‘,
                            name : ‘平均值‘
                        } ]
                    }
                } ]
            };  

            // 为echarts对象加载数据
            myChart.setOption(option);
        });
    </script>
</body>

$.ajax({
            url : ‘Power.action‘,
            type : ‘GET‘,
            dataType : ‘json‘,
            async : false,
            success : function(jsonArray) {
                for (x in jsonArray[0]) {
                    actualPower[x] = jsonArray[0][x];
                }
                for (x in jsonArray[0]) {
                    expectedPower[x] = jsonArray[1][x];
                }
            }
        });

其中 url的参数是请求的action

dataType数据类型选择json

success是请求成功后的返回,jsonArray就是请求成功,上面的Action的方法通过Servlet传递过来的Json对象。二维数组jsonArray[0]直接能获取到第一个封装的ArrayList,而jsonArray[0][x]获取到ArrayList中的第x个数据。4.Echarts

Echarts中的图表数据填充就是Array()对象。

data:actualPower,

这里直接填充了JSON传递过来的数据。

5.显示效果图

时间: 2024-10-04 03:40:56

ECharts SSH+JQueryAjax+Json+JSP将数据库中数据填充到ECharts中的相关文章

【ECharts】SSH+JQueryAjax+Json+JSP将数据库中数据填充到ECharts中

1导入包,搭建SSH框架. 导入JQuery的JS包,<script src="JS/jquery-1.7.1.js"></script> 导入ECharts的包.<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script> 前提你的SSH已经搭好了,数据已经传递到了Struts层. 2在Action层,将数据封装成J

MVC客户端使用 Mustache.js把json数据填充到模版中

使用Mustache的好处是:可以把一些反复用到的html部分定义成Mustache模版,以便多次使用.使用Mustache的大致步骤是: →从后台拿到json数据 →获取前台页面预先定义好Mustache模版(占位符必须和从后台传来的的字段或属性名一致) →遍历每行的json数据,使用Mustache.render(template, row)方法把json数据填充到对应的占位符,得到html内容 →把html内容追加到页面的某个位置 显示一个足球俱乐部的下拉框: 当点击下拉框,显示该俱乐部的

将数据库的数据导出到excel中

这篇文章主要介绍了asp中把数据导出为excel的2种方法:分别用excel组件.文件组件实现,需要的朋友可以参考下.我们在做项目的时候经常要将数据库的数据导出到excel中,很多asp用户并不知道怎么写.这里总结了两种方法来导出excel,希望能帮到大家. 方法一:用excel组件 方法二:使用文件组件 可以看出,第一种方法是直接导出的是excel文件,而第二张方法是到处的是文本文件,只不过后缀名改成了xls. 然后看起来就是excel了. 经过对比第一种方法的效率没有第二种方法的效率高,而且

使用Sqoop1.4.4将MySQL数据库表中数据导入到HDFS中

问题导读:         1.--connect参数作用? 2.使用哪个参数从控制台读取数据库访问密码? 3.Sqoop将关系型数据库表中数据导入HDFS基本参数要求及命令? 4.数据默认导入HDFS文件系统中的路径? 5.--columns参数的作用? 6.--where参数的作用? 一.部分关键参数介绍 参数介绍 --connect <jdbc-uri> 指定关系型数据库JDBC连接字符串 --connection-manager <class-name> 指定数据库使用的管

Java基础知识强化之IO流笔记45:IO流练习之 把文本文件中数据存储到集合中的案例

1.  把文本文件中数据存储到集合中      需求:从文本文件中读取数据(每一行为一个字符串数据)到集合中,并遍历集合. 分析:      通过题目的意思我们可以知道如下的一些内容,      数据源是一个文本文件.      目的地是一个集合.      而且元素是字符串.      数据源:   b.txt -- FileReader -- BufferedReader  目的地:  ArrayList<String> 2. 代码示例: 1 package cn.itcast_02; 2

C# 将Excel里面的数据填充到DataSet中

/// <summary> /// 将Excel表里的数据填充到DataSet中 /// </summary> /// <param name="filenameurl">Excel文件的路径(包含文件名)</param> /// <param name="table">Excel的文件名</param> /// <returns></returns> public st

将datagrid中数据导出到excel中 -------&lt;&lt;工作日志2014-6-6&gt;&gt;

1.下载log4j jar包,放入lib目录, 导入项目中   下载地址 http://logging.apache.org/ 2.创建log4j.properties 文件  目录 Src  下面是一个 log4j.properties的例子(注:来源于网上,非本人所写) ################################################################################ # 其语法:log4j.rootLogger = [ leve

SpringMVC 实现POI读取Excle文件中数据导入数据库(上传)、导出数据库中数据到Excle文件中(下载)

读取Excle表返回一个集合: package com.shiliu.game.utils; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.IOException; import java.io.InputStream; import java.lang.reflect.Field; import java.lang.reflect

Talend 将Oracle中数据导入到hive中,根据系统时间设置hive分区字段

首先,概览下任务图: 流程是,先用tHDFSDelete将hdfs上的文件删除掉,然后将oracle中的机构表中的数据导入到HDFS中:建立hive连接->hive建表->tJava获取系统时间->tHiveLoad将hdfs上的文件导入到hive表中. 下面介绍每一个组件的设置: tHDFSDelete_1: 机构: tHDFSOutput_1: hive: tHiveCreateTable: tJava_1: tHiveLoad_1: 在Context下面建一个内容变量: 这个内容变