echarts（百度产品）基于Strtus1设计

最新推荐文章于 2023-09-20 20:59:28 发布

Jevonn

最新推荐文章于 2023-09-20 20:59:28 发布

阅读量249

点赞数

分类专栏： Echarts

本文链接：https://blog.csdn.net/cj_0513/article/details/81358318

版权

Echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

相比于其他插件来说，Echarts比较简单。
1.引用echarts js文件。
参考网址：http://echarts.baidu.com/，下载js文件
作图主要还是参考官方文档，根据需求设计图标。
2、推荐使用Ajax获取数据。此处插入jsp前端页面范例（参考）

<%@ page language="java" pageEncoding="GBK"%>
<%@ include file="../../include/commonheader.jsp"%>
<%@ include file="../../include/stylesheet.jsp"%>
<%@ taglib uri="/WEB-INF/tld/kaiyue-jpf.tld" prefix="jpf"%>
<%@ include file="/website/styl/stylesheet.jsp"%>
<%@ taglib uri="/WEB-INF/tld/kaiyue-jpf.tld" prefix="FileUpload"%>
<jsp:directive.page import="com.kaiyue.common.util.DateUtil" />
<jsp:directive.page import="java.util.Date" />
<script src="../../website/js/echarts.js"></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
   <title>项目在建数量</title>
<%
    UserInfoDto loginUser = (UserInfoDto) session.getAttribute(SessionConstants.CURRENT_USER);
        Date dateNow = DateUtil.getNow();
        String year = String.valueOf(DateUtil.getYear(dateNow));
        String month = String.valueOf(DateUtil.getMonth(dateNow));
        if (month.length() == 1) {
            month = "0" + month;
        }
        String currentYearMonth = year + month;
        String annexPath = "pdm/project/" + currentYearMonth;
%> 
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">

  </head>

  <body>
    <form action="/jpf/project/projectAction.do?method="
        method="get">
        <div class="wrapper wrapper-content animated fadeInRight">
        <div class="ibox-title ibox float-e-margins">
            <h5 align="center">项目数量(单位：个)</h5><br/>
                <table >
                    <tr>          
                        <td>
                        <button class="btn btn-primary"
                                    onClick="query();" type="button"
                                    style=" height: 30px;float: right;margin-left: 10px;">项目数量</button>
                        </td>
                     <tr>               
                </table>                
            </div>          
            <div class="ibox-title ibox float-e-margins">
                <div  id="main" style="height:480px;width: 100%;"></div>            
            </div>
        </div>    
    </form>
  </body>

 <script type="text/javascript">
    function query()
    {
    //声明两个数组
        var arr = new Array();
        var art = new Array();
        $.ajax({
    //此处的url指向Action中的Ajax方法
            url:"<%=basePath%>/jpf/project/projectAction.do?method=getProjectCount",
            type : "get",
            data : {},
            dataType: "json",
            //result代表成功后返回的结果
            success : function(result){
            //给数组中添加数据
                arr.push("在建项目");
                arr.push("施工阶段");
                arr.push("验收阶段");
                arr.push("本年开工");
                arr.push("本年竣工");
                //取值方式，后台传递的数据格式：[[26,14,37,4,0]
                art.push(result[0][0]);
                art.push(result[0][1]);
                art.push(result[0][2]);
                art.push(result[0][3]);
                art.push(result[0][4]);
     //第2种取值方式：参考方法2返回的格式[{"get2":0,"get0":2,"get1":2,"size":4}]

                    Arrd.push(result[0].get0) 
                        Arrd.push(result[0].get1);
                        Arrd.push(result[0].get2);
    //还有其他格式比如list格式。Action方法在下边给出。

        //获取到图标添加的位置
            var myChart = echarts.init(document.getElementById('main'));    
//这里参考官方文档
                option = {
                    title: {
                        text: '项目数量',

                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },

                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    //x轴
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    //y轴
                    yAxis: {
                        type: 'category',
                        //注意数据的格式
                        data: arr,
                    },
                    series: [
                            {
                                type: 'bar',
                                data: art
                            },
                    ]
                };
                myChart.setOption(option);
            }
        })
    }

 </script>
</html>

3、数据传递（strtus1）
（1）编制Action方法（Ajax请求的方法）

（1）、第一种方式：返回数据格式：[[26,14,37,4,0]],此结果返回值决定于sql，js取值方式也不用。
    public ActionForward getProjectCount(ActionMapping mapping,
            ActionForm form, HttpServletRequest request,
            HttpServletResponse response) throws Exception {
        List<Integer> list = projectAssembly.getProjectCount();
        JSONArray json = JSONArray.fromObject(list);
        PrintWriter out = response.getWriter();
        out.println(json);
        out.flush();
        out.close();

        return null;
    }
（2）、第2种方式:返回数据格式：[{"get2":0,"get0":2,"get1":2,"size":4}]
    public ActionForward getQualityInspectionqulity(ActionMapping mapping,
            ActionForm form, HttpServletRequest request,
            HttpServletResponse response) throws Exception{
        String projectId = getProjectId(request);
        String creatTime = request.getParameter("creatTime");
        SimpleDateFormat sim = new SimpleDateFormat("yyyy-MM");

        Date date = sim.parse(creatTime);
        String da = sim.format(date);
        Util u = new Util();
        List<TQualityInspection> list = qualityInspectionService
                .getTQualityInspection(projectId, u.getdayFirst(da),
                        u.getdaylast(da));


        int count=0;//正常
        int count1=0;//预警
        int count2=0;//异常
        for(int i=0;i< list.size();i++){
            if(list.get(i).getQiStatus().equals("1")){
                count++;
            }
            if(list.get(i).getQiStatus().equals("2")){
                count1++;
            }
            if(list.get(i).getQiStatus().equals("3")){
                count2++;
            }
        }
        Map<String,Object> map= new HashMap<String, Object>();

        map.put("get0", count);
        map.put("get1", count1);
        map.put("get2", count2);
        map.put("size",list.size());
        JSONArray json = JSONArray.fromObject(map);
    //响应此请求到页面
         PrintWriter out = response.getWriter();  
            out.println(json);  
            out.flush();  
            out.close();
        return null;
    }

Jevonn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
echarts（百度产品）基于Strtus1设计

1.引用echarts js文件。参考网址：http://echarts.baidu.com/，下载js文件作图主要还是参考官方文档，根据需求设计图标。 2、推荐使用Ajax获取数据。此处插入jsp前端页面范例（参考）&amp;lt;%@ page language=&quot;java&quot; pageEncoding=&quot;GBK&quot;%&amp;gt;&amp;lt;%@ include file=&q
复制链接

扫一扫

专栏目录