原地址http://blog.csdn.net/gaogaoshan/article/details/38037849
jsp页面
- <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <title>line</title>
- <script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts2.0/esl.js"></script>
- <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
- </head>
- <body>
- <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
- <div id="main" style="height:400px"></div>
- <script type="text/javascript" language="javascript">
- var myChart;
- var eCharts;
- require.config({
- paths : {
- 'echarts' : '${pageContext.request.contextPath}/js/echarts2.0/echarts' ,
- 'echarts/chart/line' : '${pageContext.request.contextPath}/js/echarts2.0/echarts' //需要的组件
- }
- });
- require(
- [ 'echarts',
- 'echarts/chart/line'
- ], DrawEChart //异步加载的回调函数绘制图表
- );
- //创建ECharts图表方法
- function DrawEChart(ec) {
- eCharts = ec;
- myChart = eCharts.init(document.getElementById('main'));
- myChart.showLoading({
- text : "图表数据正在努力加载..."
- });
- //定义图表options
- var options = {
- title : {
- text : "未来一周气温变化",
- subtext : "纯属虚构",
- sublink : "http://www.baidu.com"
- },
- 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',
- boundaryGap : false,
- data : [ '1', '2', '3', '4', '5', '6', '7' ]
- } ],
- yAxis : [ {
- type : 'value',
- axisLabel : {
- formatter : '{value} °C'
- },
- splitArea : {
- show : true
- }
- } ],
- grid : {
- width : '90%'
- },
- series : [ {
- name : '最高气温',
- type : 'line',
- data : [ 11, 22, 33, 44, 55, 33, 44 ],//必须是Integer类型的,String计算平均值会出错
- markPoint : {
- data : [ {
- type : 'max',
- name : '最大值'
- }, {
- type : 'min',
- name : '最小值'
- } ]
- },
- markLine : {
- data : [ {
- type : 'average',
- name : '平均值'
- } ]
- }
- } ]
- };
- myChart.setOption(options); //先把可选项注入myChart中
- myChart.hideLoading();
- getChartData();//aja后台交互
- }
- </script>
- <script type="text/javascript">
- function getChartData() {
- //获得图表的options对象
- var options = myChart.getOption();
- //通过Ajax获取数据
- $.ajax({
- type : "post",
- async : false, //同步执行
- url : "${pageContext.request.contextPath}/echarts/line_data",
- data : {},
- dataType : "json", //返回数据形式为json
- success : function(result) {
- if (result) {
- options.legend.data = result.legend;
- options.xAxis[0].data = result.category;
- options.series[0].data = result.series[0].data;
- myChart.hideLoading();
- myChart.setOption(options);
- }
- },
- error : function(errorMsg) {
- alert("不好意思,大爷,图表请求数据失败啦!");
- myChart.hideLoading();
- }
- });
- }
- </script>
- </body>
- </html>
controller
- package com.ffcs.wlan.controller;
- import java.util.ArrayList;
- import java.util.Arrays;
- import java.util.List;
- import org.slf4j.Logger;
- import org.slf4j.LoggerFactory;
- import org.springframework.stereotype.Controller;
- import org.springframework.web.bind.annotation.RequestMapping;
- import org.springframework.web.bind.annotation.ResponseBody;
- import com.ffcs.wlan.model.EchartData;
- import com.ffcs.wlan.model.Series;
- @Controller
- @RequestMapping("/echarts")
- public class EntityController {
- private static final Logger logger = LoggerFactory.getLogger(EntityController.class);
- @RequestMapping("/line_data")
- @ResponseBody
- public EchartData lineData() {
- logger.info("lineData....");
- List<String> legend = new ArrayList<String>(Arrays.asList(new String[]{"最高气温"}));//数据分组
- List<String> category = new ArrayList<String>(Arrays.asList(new String []{"周一","周二","周三","周四","周五","周六","周日"}));//横坐标
- List<Series> series = new ArrayList<Series>();//纵坐标
- series.add(new Series("最高气温", "line",
- new ArrayList<Integer>(Arrays.asList(
- 21,23,28,26,21,33,44))));
- EchartData data=new EchartData(legend, category, series);
- return data;
- }
- @RequestMapping("/line_page")
- public String linePage() {
- logger.info("linePage....");
- return "report/line";
- }
- }
Echarts 类
- package com.ffcs.wlan.model;
- import java.util.ArrayList;
- import java.util.List;
- public class EchartData {
- public List<String> legend = new ArrayList<String>();//数据分组
- public List<String> category = new ArrayList<String>();//横坐标
- public List<Series> series = new ArrayList<Series>();//纵坐标
- public EchartData(List<String> legendList, List<String> categoryList, List<Series> seriesList) {
- super();
- this.legend = legendList;
- this.category = categoryList;
- this.series = seriesList;
- }
- }
Series 类
- package com.ffcs.wlan.model;
- import java.util.List;
- public class Series {
- public String name;
- public String type;
- public List<Integer> data;//这里要用int 不能用String 不然前台显示不正常(特别是在做数学运算的时候)
- public Series( String name, String type, List<Integer> data) {
- super();
- this.name = name;
- this.type = type;
- this.data = data;
- }
- }