Echarts 后台交互

来源：互联网发布：维生素抑郁症知乎编辑：程序博客网时间：2024/06/05 04:42

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 : "图表数据正在努力加载..."});//定义图表optionsvar 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", //返回数据形式为jsonsuccess : 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")@ResponseBodypublic 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;}}

6 2