Echarts 后台交互(折线图)

最新推荐文章于 2024-05-02 09:33:51 发布

Sky786905664

最新推荐文章于 2024-05-02 09:33:51 发布

阅读量8.3k

点赞数 1

分类专栏： js 前端

前端同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

30 篇文章 0 订阅

订阅专栏

jsp页面

[html]view plaincopy 
    
 <%@ 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

[java]view plaincopy 
     
 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 类

[java]view plaincopy 
     
 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 类

[java]view plaincopy 
     
 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;  
     }  
   
 }

Sky786905664

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
Echarts 后台交互(折线图)

jsp页面[html] view plain copy %@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> > html> head> title>linetitle> script type="text/javascript" sr
复制链接

扫一扫