1. 程式人生 > >項目整理--Echarts前端後臺的貫通寫法

項目整理--Echarts前端後臺的貫通寫法

百分比 date_time sdn dcl 表數據 position property .com 功能

項目整理–Echarts前端後臺的貫通寫法

註:下面所有內容建立在FH admin開源框架和eharts插件基礎上,建議觀看本案例者進行了解。

業務邏輯

繪制兩張圖表。分別顯示城市空間庫和其它數據倉庫的信息(城市空間庫單獨繪制)。要求:城市空間庫顯示數據庫的實際使用量和剩余用量。其它庫顯示百分比。

效果展示

默認顯示狀態
技術分享
鼠標指向狀態
技術分享


實現過程

1.後臺數據處理
表結構設計
技術分享

數據庫數據
註:此處數據為顯示數據,並不是項目使用數據,僅作測試使用。


技術分享

Mapper文件寫法

註1:此處在前端頁面須要繪制兩個圖表,因此用兩條sql語句。差別為提供查詢的type字段不同。此字段也可由傳參帶入。使用一條sql分別實現查詢,此次為了展示直觀,採用第一種做法。

註2:因為採用框架,此處數據為採用實體類封裝,而是採用HashMap封裝。能夠依據自己習慣。創建實體類來存儲數據庫中數據。

<?

xml version="1.0" encoding="UTF-8"?

> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="SjkyxMapper"> <!-- 列表(無實際意義,為以後擴展功能用) --> <select

id="datalist" parameterType="page" resultType="pd">
SELECT a.id, a.dept, a.order, a.score FROM cms_yw_fwxl AS a ORDER BY a.order </select> <!-- 獲取城市空間庫的信息 --> <select id
="getcskjcharts" parameterType="page" resultType="pd">
SELECT c.type, c.id, c.`name`, c.volume_total, c.volume_total_unit, c.volume_use, c.volume_use_unit, c.create_time, c.creator, c.update_time, c.updater, c.remark FROM cms_yw_sjkyx AS c WHERE type = 1 </select> <!-- 獲取其它庫的信息 --> <select id="getothercharts" parameterType="page" resultType="pd"> SELECT c.type, c.id, c.`name`, c.volume_total, c.volume_total_unit, c.volume_use, c.volume_use_unit, c.create_time, c.creator, c.update_time, c.updater, c.remark FROM cms_yw_sjkyx AS c WHERE type = 2 </select> </mapper>

Service中寫法

註1:此處採用的已有框架,使用已經提供的統一的Dao。假設使用傳統的SSM寫法。能夠自己稍加改動,在此不做贅述。

註2:依據業務邏輯理解代碼,當中封裝了createData方法來實現不同的業務邏輯。

@Service("sjkyxService")
public class SjkyxService {

    @Resource(name = "daoSupport")
    private DaoSupport dao;

    /*
    *數據資源列表
    */
    public List<PageData> list(Page page)throws Exception{
        return (List<PageData>)dao.findForList("SjkyxMapper.datalist", page);
    }


    /*
     * 用來返回城市空間庫使用信息
     */
    public Map<String, Object> getcskjcharts(int type)throws Exception{
        List<PageData> list = (List<PageData>)dao.findForList("SjkyxMapper.getcskjcharts", null);
        return createData(list,type);
    }

    /*
     * 用來返回其它庫所用信息
     */
    public Map<String, Object> getothercharts(int type)throws Exception{
        List<PageData> list = (List<PageData>)dao.findForList("SjkyxMapper.getothercharts", null);
        return createData(list,type);
    }

    /*
     * 內部設計的方法。用於封裝查詢數據
     */
    private Map<String, Object> createData(List<PageData> list,int type)throws Exception{
        Map<String,Object> resultMap = new HashMap<String,Object>();
        //x軸現實的信息
        String[] xAxisArr = new String[list.size()];
        //總量信息
        Integer[] restArr = new Integer[list.size()];
        //已使用信息
        Integer[] usedArr = new Integer[list.size()];
        if(1==type){
            for(int i=0;i<list.size();i++){
                xAxisArr[i] =(String) list.get(i).get("name");
                usedArr[i] = Integer.parseInt(new java.text.DecimalFormat("0").format((Double) list.get(i).get("volume_use")));
                double restData = (Double)list.get(i).get("volume_total")-(Double) list.get(i).get("volume_use");
                restArr[i] = Integer.parseInt(new java.text.DecimalFormat("0").format(restData));
            }
        }else if(2==type){
            for(int i=0;i<list.size();i++){
                xAxisArr[i] =(String) list.get(i).get("name");
                double perData = (Double) list.get(i).get("volume_use")/(Double) list.get(i).get("volume_total")*100;
                usedArr[i] = Integer.parseInt(new java.text.DecimalFormat("0").format(perData));
                double restData = ((Double)list.get(i).get("volume_total")-(Double) list.get(i).get("volume_use"))/(Double) list.get(i).get("volume_total")*100;
                restArr[i] = Integer.parseInt(new java.text.DecimalFormat("0").format(restData));
            }
        }
        resultMap.put("xAxisArr", xAxisArr);
        resultMap.put("restArr", restArr);
        resultMap.put("usedArr", usedArr);
        return resultMap;
    }
}

Controller中寫法
主要用於跳轉頁面和Ajax傳遞數據,涉及權限管理的部分能夠不用看。

package com.bonc.dgioc.portal.web.controller.portal.operate;

import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.annotation.Resource;

import org.apache.shiro.SecurityUtils;
import org.apache.shiro.session.Session;
import org.apache.shiro.subject.Subject;
import org.springframework.beans.propertyeditors.CustomDateEditor;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.WebDataBinder;
import org.springframework.web.bind.annotation.InitBinder;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import com.bonc.dgioc.portal.common.utils.Const;
import com.bonc.dgioc.portal.common.utils.PageData;
import com.bonc.dgioc.portal.domain.entity.Page;
import com.bonc.dgioc.portal.service.portal.operate.FwxlService;
import com.bonc.dgioc.portal.service.portal.operate.SjkyxService;
import com.bonc.dgioc.portal.service.portal.operate.SjzyService;
import com.bonc.dgioc.portal.web.controller.base.BaseController;



/** 
 * 功    能:運維首頁數據庫執行情況
 * 類名稱:SjkyxController
 * 創建人:@author Xiaoqi
 * 創建時間:2016-03-29
 */

@Controller
@RequestMapping(value="/operate/sjkyx")
public class SjkyxController extends BaseController {

    @Resource(name="sjkyxService")
    private SjkyxService sjkyxService;


    /**
     * 獲取sjkyx列表
     * @author Xiaoqi
     * @date 2016-03-30
     */
    @RequestMapping(value="/getsjkyxlist")
    public ModelAndView list(Page page){
        logBefore(logger, "列表sjkyx信息");
        ModelAndView mv = this.getModelAndView();
        PageData pd = new PageData();
        try{
            pd = this.getPageData();
            page.setPd(pd);
            List<PageData>  varList = sjkyxService.list(page);  //列出sjkyx列表
            mv.setViewName("portal/operate/sjkyx_list");
            mv.addObject("varList", varList);
            mv.addObject("pd", pd);
            mv.addObject(Const.SESSION_QX,this.getHC());    //button權限
        } catch(Exception e){
            logger.error(e.toString(), e);
        }
        return mv;
    }


    /**
     * 返回城市空間庫的圖表信息
     * @return 返回城市空間庫的圖表信息
     * @date 2016-04-11
     */
    @ResponseBody
    @RequestMapping(value="/getcskjcharts")
    public Map<String,Object> getcskjcharts(){
        logBefore(logger, "獲取城市空間庫圖表信息");
        Map<String,Object> resultMap = new HashMap<String,Object>();
        try{
            resultMap = sjkyxService.getcskjcharts(1);  //獲取其它庫圖表信息
        } catch(Exception e){
            logger.error(e.toString(), e);
        }
        return resultMap;
    }

    /**
     * 返回城市空間庫之外的其它庫的圖表信息
     * @return 返回城市空間庫之外的其它庫的圖表信息
     * @date 2016-04-11
     */
    @ResponseBody
    @RequestMapping(value="/getothercharts")
    public Map<String,Object> getothercharts(){
        logBefore(logger, "獲取其它庫圖表信息");
        Map<String,Object> data = new HashMap<String,Object>();
        try{
            data = sjkyxService.getothercharts(2);  //獲取其它庫圖表信息
        } catch(Exception e){
            logger.error(e.toString(), e);
        }
        return data;
    }



    /* ===============================權限================================== */
    public Map<String, String> getHC(){
        Subject currentUser = SecurityUtils.getSubject();  //shiro管理的session
        Session session = currentUser.getSession();
        return (Map<String, String>)session.getAttribute(Const.SESSION_QX);
    }
    /* ===============================權限================================== */

    @InitBinder
    public void initBinder(WebDataBinder binder){
        DateFormat format = new SimpleDateFormat("yyyy-MM-dd");
        binder.registerCustomEditor(Date.class, new CustomDateEditor(format,true));
    }


}

2.前端頁面處理
下面為分部代碼解讀,最下方有前端頁面所有代碼。


引入echarts和jQuery文件
註:此處bootstrap為前端框架,此處知道當中含有jQuery文件就可以。

<!-- 引入 -->
    <%@ include file="../../common/bootstrap_js.jsp"%> 
    <script type="text/javascript" src="<%=basePath%>/resources/module/echarts/echarts.js"></script><!-- 引入echarts -->

建立div存放不同的圖表
註:echarts中一個div僅僅能繪制一張圖表

<div>
     <div id="chkj" style="height:160px;width:20%;text-align:right;float:left;">
     </div>
     <div id="other" style="height:160px;width:80%;text-align:right;float:right;">
     </div>
  </div>

echarts代碼解讀
引入echarts的主題和各種組件,調用繪制圖表的方法drawotherCharts和drawchkjCharts

 require.config({   
            paths:{   
                echarts:‘<%=basePath%>/resources/module/echarts‘
            } 
         }); 

         require(
                [‘echarts‘,   
                 ‘echarts/theme/macarons‘,
                 ‘echarts/chart/line‘,    //使用折線圖,就須要加載line模塊,按需加載(柱圖:bar;餅圖:pie;地圖:map;) 
                 ‘echarts/chart/bar‘,
                 ‘echarts/chart/pie‘
                ],
                function (ec,theme) {
                    drawotherCharts(ec,theme),
                    drawchkjCharts(ec,theme)
                });

繪制圖表:

function drawotherCharts(ec,theme){
             var myChart = ec.init(document.getElementById("other"),theme);
             option = {
                    tooltip : {
                        trigger: ‘axis‘,
                        axisPointer : {            // 坐標軸指示器,坐標軸觸發有效
                            type : ‘shadow‘        // 默覺得直線,可選為:‘line‘ | ‘shadow‘
                        },
                        formatter: function (params){   //用來編輯鼠標指向時的文字信息
                            return params[0].name + ‘<br/>‘
                                   + params[0].seriesName + ‘ : ‘ + params[0].value + ‘<br/>‘
                                   + params[1].seriesName + ‘ : ‘ + (params[1].value + params[0].value);
                        }
                    },
                    legend: {   //此處為圖例
                        selectedMode:false,
                        data:[‘已使用‘, ‘未使用‘]
                    },
                    grid:{     //此處控制圖表在div中的位置

                            x:20,
                            y:60,
                            x2:0,
                            y2:35
                    },
                    toolbox: {  //此處為控制圖表的工具欄,設置show選項為false,能夠將show的false改為true來查看效果。
                        show : false,
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : false,  //取消加載時的動態效果
                    xAxis : [  //x軸現實信息配置
                        {
                            type : ‘category‘,
                            data : [],
                            splitLine:{ 
                                 show:false 
                               },
                            axisTick:false,
                            axisLine:false,
                            axisLabel:{
                                 rotate:0,
                                 margin:10,
                                 textStyle:{
                                     fontSize : ‘2px‘,
                                     fontFamily : ‘微軟雅黑‘,
                                     color: ‘#00A3D1‘
                                 }
                             },
                        }
                    ],
                    yAxis : [    //y軸數據配置
                        {
                            type : ‘value‘,
                            axisLine:false,
                            splitLine:{ 
                                      show:false 
                               },
                            axisTick:false,
                            boundaryGap: [0, 0.1],
                            axisLabel:{
                                 show:false
                            }
                        }
                    ],
                    series : [
                        {
                            name:‘已使用‘,
                            type:‘bar‘,
                            stack: ‘sum‘,
                            barCategoryGap: ‘50%‘,
                            barWidth:45,
                            itemStyle: {
                                normal: {
                                    color: ‘#00A3D1‘,
                                    barBorderColor: ‘#00A3D1‘,
                                    barBorderWidth: 4,
                                    barBorderRadius:0,
                                    label : {
                                        show: true, position: ‘insideTop‘
                                    }
                                }
                            },
                            data:[]
                        },
                        {
                            name:‘未使用‘,
                            type:‘bar‘,
                            stack: ‘sum‘,
                            itemStyle: {
                                normal: {
                                    color: ‘#fff‘,
                                    barBorderColor: ‘#00A3D1‘,
                                    barBorderWidth: 3,
                                    barBorderRadius:0,
                                    label : {
                                        show: true, 
                                        position: ‘top‘,
                                        textStyle: {
                                            fontSize : ‘10‘,
                                            fontFamily : ‘微軟雅黑‘,
                                            color: ‘#00A3D1‘
                                        }
                                    }
                                }
                            },
                            data:[]
                        }
                    ]
                };

            myChart.showLoading({
                text: "圖表數據正在努力加載..."
            });
            //通過ajax向後臺發送請求。傳遞數據。
            $.ajax({
                type: ‘GET‘,
                url : ‘<%=path %>/operate/sjkyx/getothercharts‘,
                dataType: ‘json‘,
                success:function(data){
                    debugger;
                    option.xAxis[0][‘data‘]=data.xAxisArr;
                    option.series[0][‘data‘]=data.usedArr;
                    option.series[1][‘data‘]=data.restArr;
                    myChart.setOption(option);
                },
                error:function(){
                    debugger;
                },
                complete:function(){     
                    //無論數據接口成功或異常,都最終加載提示      
                    myChart.hideLoading();//停止動畫加載提示 
                }
            })

        }

echarts完整代碼

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Widgets - Ace Admin</title>
    <base href="<%=basePath%>">
    <!-- 引入 -->
    <%@ include file="../../common/bootstrap_js.jsp"%> 
    <script type="text/javascript" src="<%=basePath%>/resources/module/echarts/echarts.js"></script><!-- 引入echarts -->
    <script type="text/javascript">

         require.config({   
            paths:{   
                echarts:‘<%=basePath%>/resources/module/echarts‘
            } 
         }); 

         require(
                [‘echarts‘,   
                 ‘echarts/theme/macarons‘,
                 ‘echarts/chart/line‘,    //使用折線圖,就須要加載line模塊,按需加載(柱圖:bar;餅圖:pie;地圖:map;) 
                 ‘echarts/chart/bar‘,
                 ‘echarts/chart/pie‘
                ],
                function (ec,theme) {
                    drawotherCharts(ec,theme),
                    drawchkjCharts(ec,theme)
                });

        function drawotherCharts(ec,theme){
             var myChart = ec.init(document.getElementById("other"),theme);
             option = {
                    tooltip : {
                        trigger: ‘axis‘,
                        axisPointer : {            // 坐標軸指示器,坐標軸觸發有效
                            type : ‘shadow‘        // 默覺得直線。可選為:‘line‘ | ‘shadow‘
                        },
                        formatter: function (params){   //用來編輯鼠標指向時的文字信息
                            return params[0].name + ‘<br/>‘
                                   + params[0].seriesName + ‘ : ‘ + params[0].value + ‘<br/>‘
                                   + params[1].seriesName + ‘ : ‘ + (params[1].value + params[0].value);
                        }
                    },
                    legend: {   //此處為圖例
                        selectedMode:false,
                        data:[‘已使用‘, ‘未使用‘]
                    },
                    grid:{     //此處控制圖表在div中的位置

                            x:20,
                            y:60,
                            x2:0,
                            y2:35
                    },
                    toolbox: {  //此處為控制圖表的工具欄,設置show選項為false,能夠將show的false改為true來查看效果。
                        show : false,
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : false,  //取消加載時的動態效果
                    xAxis : [  //x軸現實信息配置
                        {
                            type : ‘category‘,
                            data : [],
                            splitLine:{ 
                                 show:false 
                               },
                            axisTick:false,
                            axisLine:false,
                            axisLabel:{
                                 rotate:0,
                                 margin:10,
                                 textStyle:{
                                     fontSize : ‘2px‘,
                                     fontFamily : ‘微軟雅黑‘,
                                     color: ‘#00A3D1‘
                                 }
                             },
                        }
                    ],
                    yAxis : [    //y軸數據配置
                        {
                            type : ‘value‘,
                            axisLine:false,
                            splitLine:{ 
                                      show:false 
                               },
                            axisTick:false,
                            boundaryGap: [0, 0.1],
                            axisLabel:{
                                 show:false
                            }
                        }
                    ],
                    series : [
                        {
                            name:‘已使用‘,
                            type:‘bar‘,
                            stack: ‘sum‘,
                            barCategoryGap: ‘50%‘,
                            barWidth:45,
                            itemStyle: {
                                normal: {
                                    color: ‘#00A3D1‘,
                                    barBorderColor: ‘#00A3D1‘,
                                    barBorderWidth: 4,
                                    barBorderRadius:0,
                                    label : {
                                        show: true, position: ‘insideTop‘
                                    }
                                }
                            },
                            data:[]
                        },
                        {
                            name:‘未使用‘,
                            type:‘bar‘,
                            stack: ‘sum‘,
                            itemStyle: {
                                normal: {
                                    color: ‘#fff‘,
                                    barBorderColor: ‘#00A3D1‘,
                                    barBorderWidth: 3,
                                    barBorderRadius:0,
                                    label : {
                                        show: true, 
                                        position: ‘top‘,
                                        textStyle: {
                                            fontSize : ‘10‘,
                                            fontFamily : ‘微軟雅黑‘,
                                            color: ‘#00A3D1‘
                                        }
                                    }
                                }
                            },
                            data:[]
                        }
                    ]
                };

            myChart.showLoading({
                text: "圖表數據正在努力加載..."
            });
            //通過ajax向後臺發送請求。傳遞數據。
            $.ajax({
                type: ‘GET‘,
                url : ‘<%=path %>/operate/sjkyx/getothercharts‘,
                dataType: ‘json‘,
                success:function(data){
                    debugger;
                    option.xAxis[0][‘data‘]=data.xAxisArr;
                    option.series[0][‘data‘]=data.usedArr;
                    option.series[1][‘data‘]=data.restArr;
                    myChart.setOption(option);
                },
                error:function(){
                    debugger;
                },
                complete:function(){     
                    //無論數據接口成功或異常。都最終加載提示      
                    myChart.hideLoading();//停止動畫加載提示 
                }
            })

        }

        function drawchkjCharts(ec,theme){
             var myChart = ec.init(document.getElementById("chkj"),theme);
             options = {

                    tooltip : {
                        show:false,
                        trigger: ‘axis‘,
                        axisPointer : {            // 坐標軸指示器。坐標軸觸發有效
                            type : ‘shadow‘        // 默覺得直線,可選為:‘line‘ | ‘shadow‘
                        },
                        formatter: function (params){
                            return params[0].name + ‘<br/>‘
                                   + params[0].seriesName + ‘ : ‘ + params[0].value + ‘<br/>‘
                                   + params[1].seriesName + ‘ : ‘ + (params[1].value + params[0].value);
                        }
                    },
                    grid:{

                            x:20,
                            y:50,
                            x2:0,
                            y2:35
                    },
                    toolbox: {
                        show : false,
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : false,
                    xAxis : [
                        {
                            type : ‘category‘,
                            data : [],
                            splitLine:{ 
                                 show:false 
                               },
                            axisTick:false,
                            axisLine:false,
                            axisLabel:{
                                 rotate:0,
                                 margin:10,
                                 textStyle:{
                                     fontSize : ‘2px‘,
                                     fontFamily : ‘微軟雅黑‘,
                                     color: ‘red‘
                                 }
                             },
                        }
                    ],
                    yAxis : [
                        {
                            type : ‘value‘,
                            axisLine:false,
                            splitLine:{ 
                                      show:false 
                               },
                            axisTick:false,
                            boundaryGap: [0, 0.1],
                            axisLabel:{
                                 show:false
                            }
                        }
                    ],
                    series : [
                        {
                            name:‘已使用‘,
                            type:‘bar‘,
                            stack: ‘sum‘,
                            barCategoryGap: ‘50%‘,
                            barWidth:45,
                            itemStyle: {
                                normal: {
                                    color: ‘red‘,
                                    barBorderColor: ‘red‘,
                                    barBorderWidth: 4,
                                    barBorderRadius:0,
                                    label : {
                                        show: true, position: ‘insideTop‘,
                                        formatter:‘{c}‘+‘T‘
                                    }
                                }
                            },
                            data:[]
                        },
                        {
                            name:‘未使用‘,
                            type:‘bar‘,
                            stack: ‘sum‘,
                            itemStyle: {
                                normal: {
                                    color: ‘#fff‘,
                                    barBorderColor: ‘red‘,
                                    barBorderWidth: 3,
                                    barBorderRadius:0,
                                    label : {
                                        show: true, 
                                        position: ‘top‘,
                                        formatter:‘{c}‘+‘T‘,
                                        textStyle: {
                                            fontSize : ‘10‘,
                                            fontFamily : ‘微軟雅黑‘,
                                            color: ‘red‘
                                        }
                                    }
                                }
                            },
                            data:[]
                        }
                    ]
                };

            myChart.showLoading({
                text: "圖表數據正在努力加載..."
            });

            $.ajax({
                type: ‘GET‘,
                url : ‘<%=path %>/operate/sjkyx/getcskjcharts‘,
                dataType: ‘json‘,
                success:function(data){
                    debugger;
                    options.xAxis[0][‘data‘]=data.xAxisArr;
                    options.series[0][‘data‘]=data.usedArr;
                    options.series[1][‘data‘]=data.restArr;
                    myChart.setOption(options);
                },
                error:function(){
                    debugger;
                },
                complete:function(){     
                    //無論數據接口成功或異常,都最終加載提示      
                    myChart.hideLoading();//停止動畫加載提示 
                }
            })

        }



    </script>
</head>

  <body style="height:160px;width:450px;text-align:left;">
  <div>
     <div id="chkj" style="height:160px;width:20%;text-align:right;float:left;">
     </div>
     <div id="other" style="height:160px;width:80%;text-align:right;float:right;">
     </div>
  </div>


  </body>


</html>

項目整理--Echarts前端後臺的貫通寫法