ECharts初使用,從後臺獲得數據源

時間 2019-12-05

標籤 echarts 使用後臺獲得數據简体版

原文原文鏈接

首先，這是國產的，百度出品，你們支持下國產軟件！！！javascript

github：https://github.com/ecomfe/echartshtml

我今天用echarts插件顯示商品的預約狀況，數據是用ajax從後臺拿的，貼下代碼記錄下：jquery

jsp代碼：git

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>預約狀況圖表</title>
<script type="text/javascript" src="js/jquery.min.js"></script>  //由於用到了ajax
<script src="echarts-2.2.7/build/dist/echarts.js"></script>
<script type="text/javascript">
        // 路徑配置
        require.config({
            paths: {
                echarts: 'echarts-2.2.7/build/dist'
            }
        });
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱狀圖就加載bar模塊，按需加載
            ],
            function (ec) {
            	var goodsName=new Array();
            	var goodsReserveNum=new Array();
            	var goodsPrice=new Array();
            	 $.ajax({
			method:'GET',
			async:true,
			url:'ordersAction!Report',   //這裏我是action
			dataType :'json',
			success:function(data){
					for(var i=0;i<data.rows.length;i++){
					    goodsName[i]=data.rows[i].g_name;  //將數據從json中分離出來
					    goodsReserveNum[i]=data.rows[i].total;
					    goodsPrice[i]=data.rows[i].g_price;
					}
				}
                });
                // 基於準備好的dom，初始化echarts圖表
                var myChart = ec.init(document.getElementById('charts')); 
                alert("數據加載中……");
                var date=new Date();
                var time=date.toLocaleDateString();  //拿到當前日期
                var option = {
                	    title : {
                	        text: '商品預約狀況統計:'+time,
                	        subtext: '預約量'
                	    },
                	    tooltip : {
                	        trigger: 'axis'
                	    },
                	    legend: {
                	        data:["預約數量",'價格']
                	    },
                	    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 : goodsName
                	        }
                	    ],
                	    yAxis : [
                	        {
                	            type : 'value'
                	        }
                	    ],
                	    series : [
                	         {
                	            name:'預約數量',
                	            type:'bar',
                	            data:goodsReserveNum,
                	            markPoint : {
                	                data : [
                	                    {type : 'max', name: '最大值'},
                	                    {type : 'min', name: '最小值'}
                	                ]
                	            },
                	           /*  itemStyle: {  //設置是否在柱上顯示具體數值
                	                normal: {
                	           			 label: {
                	           				 	show:true,
                	          			  		position:'top'
                    	      			  		},
                	              		  }
                	            	} */
                	        } ,
                	        {
                	            name:'價格',
                	            type:'bar',
                	            data:goodsPrice,
                	            markPoint : {
                	                data : [
                	                    {type : 'max', name: '最大值'},
                	                    {type : 'min', name: '最小值'}
                	                ]
                	            },
                	        } 
                	    ],
                	};
                
        		/* for(var i=0;i<goodsName.length;i++){
        			option.series.push({     //動態添加數據
        				
        				type:'bar',
        				data:goodsNum
        			})
        		} */
                // 爲echarts對象加載數據 
                myChart.setOption(option); 
            }
        );
    </script>
</head>
<body>
	<div id="charts" style="height:400px;margin-top:100px"></div>
</body>
</html>

下面是效果圖：github

順便貼下後臺對應的action：ajax

public void Report() throws IOException{
		 List<ReserveReport> report=null;
		Map<String, String> map = null;
		try {
			report=ordersService.getReport();
		} catch (Exception e) {
			e.printStackTrace();
		}
		JSONObject json=new JSONObject();
		json.accumulate("rows", report);
		System.out.println(json.toString());
		response.setContentType("application/json;charset=UTF-8");
		PrintWriter out = response.getWriter();
		out.print(json);
		out.flush();
		out.close();
	}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。