文档章节

ECharts初使用,从后台得到数据源

another_yu
 another_yu
发布于 2015/11/26 18:06
字数 520
阅读 530
收藏 11

首先,这是国产的,百度出品,大家支持下国产软件!!!

github:https://github.com/ecomfe/echarts

官网:http://echarts.baidu.com/


我今天用echarts插件显示商品的预定情况,数据是用ajax从后台拿的,贴下代码记录下:

jsp代码:

<%@ 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>

下面是效果图:


顺便贴下后台对应的action:

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();
	}


© 著作权归作者所有

共有 人打赏支持
another_yu
粉丝 4
博文 17
码字总数 4285
作品 0
杭州
程序员
Echarts视频教程从入门到实战

Echarts视频教程从入门到实战 网盘地址:https://pan.baidu.com/s/1p-G9UbKmXFtnuJEdiLSw2w 密码:0e9u 备用地址(腾讯微云):https://share.weiyun.com/5sKBF8E 密码:4ms8rp 有这样一款制...

放风筝好不
04/16
0
0
Echarts使用心得总结(二)

Echarts使用心得总结(二) 前言: 前一段时间一直都挺忙的,各种事,也没来得及每周的总结,趁着晚上的一点时间把项目中用的Echart中常用的各种图表给抽象总结了一下,趁着周末跟大家分享一...

双月通天
2014/07/14
0
0
响应式 React Native Echarts 组件

一种在 React Native 中封装的响应式 Echarts 组件,使用与示例请参见:react-native-echarts-demo 近年来,随着移动端对数据可视化的要求越来越高,类似 MPAndroidChart 这样的传统图表库已...

entronad
07/12
0
0
Echarts-地图扩展-标准geoJson格式扩展地图-例子

本人菜鸟一枚,最近搞echarts地图。看到官方给的“标准geoJson格式扩展地图-全国主要城市”的例子,瞬间就蒙逼了。(http://echarts.baidu.com/echarts2/doc/example/map20.html ,2016年8月...

夜辰
2015/07/17
0
13
【react自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目

前言 一、React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源。出身名门的React也不负众望,成功成为当前最火热...

漂泊的雾
07/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

咕泡-Factory设计模式笔记

个人感悟: 设计模式都是处理复杂问题的,如果问题本身很简单,使用设计模式反而累赘,增加了开发的复杂性 遇到最简单的情况,直接 new 如果创建对象的过程简单,但是需要匹配不同情况,返回...

职业搬砖20年
18分钟前
0
0
Java中的锁分类

在读很多并发文章中,会提及各种各样锁如公平锁,乐观锁等等,这篇文章介绍各种锁的分类。介绍的内容如下: 公平锁/非公平锁 可重入锁 独享锁/共享锁 互斥锁/读写锁 乐观锁/悲观锁 分段锁 偏...

Funcy1122
26分钟前
0
0
Ansible随机数

想为你的Ansible剧本取一个随机数?还想在接下来的运行中保持系统的等幂性?这里有一个答案。 假如,你要为一大批服务器设置cron任务,却不想让它们同时启动,你可以这样设置分钟数: minute...

大别阿郎
35分钟前
0
0
SpringCloud之服务注册中心Eureka

本系列介绍的配置均基于 Spring Boot 2.0.1.RELEASE 版本和 Spring Cloud Finchley.SR1 服务注册中心 Spring Cloud 已经帮我们实现了服务注册中心,我们只需要很简单的几个步骤就可以完成。 ...

熊小飞呀
今天
9
1
“Comparison method violates ...”异常的再现方法

前提条件:JDK8 代码: import java.util.ArrayList;import java.util.Collections;import java.util.Comparator;import java.util.List;public class Test { public stat......

hunterli
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部