您的位置: 首页  >  文章  >  echarts-springmvc+echarts实现图表

echarts-springmvc+echarts实现图表

分类: 文章 • 2024-02-22 21:10:28

感谢分享：http://blog.****.net/u013147600/article/details/48182647

效果图：

两种方法实现的效果都一样，不过针对此图的话，感觉方法2更好。

echarts-springmvc+echarts实现图表

Echarts:参照的例子：  http://echarts.baidu.com/doc/example/radar1.html


下面只是关键代码：具体看源码

该项目源码下载：http://download.****.NET/detail/u013147600/9071341

方法1.直接把所需数据传到jsp页面中的js中;

controller类：

[java] view plain copy
 print?
  1. /** 
  2.      * @param request 
  3.      * @return 
  4.      * 在前端js实现图表 
  5.      */  
  6.     @RequestMapping("/showRadio")  
  7.     public ModelAndView showRadio(HttpServletRequest request)  
  8.     {  
  9.           
  10.       
  11.         List<AllocatedBudget> list = service.addInfo();  
  12.           
  13.           
  14.         String strContext =JSON.toJSONString(list);  
  15.         System.out.println(strContext);  
  16.           
  17.         request.setAttribute("strContext",strContext);  
  18.       
  19.           
  20.         return new ModelAndView("/radio1");  
  21.     }  

jsp页面：

[java] view plain copy
 print?
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%  
  3. String path = request.getContextPath();  
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  5. request.setAttribute("home", path);  
  6. %>  
  7.   
  8. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  9. <html>  
  10.   <head>  
  11.     <base href="<%=basePath%>">  
  12.     <title>雷达图</title>  
  13.     
  14.   </head>  
  15.     
  16.   <body>  
  17.         <h2>雷达图</h2>  
  18.       
  19.     <div id="myRadio"  style="height:400px"></div>  
  20.       
  21.       
  22.     <script type="text/javascript" src="${home }/res/js/echarts.js"></script>  
  23.   <script type="text/javascript" src="${home }/res/js/macarons.js"></script>  
  24.   <script type="text/javascript">  
  25.     var home ="${home}";  
  26.       
  27.     //获取到的数据  
  28.     var context =eval('${strContext}');  
  29.       
  30.     //名称数组  
  31.     var nameArray = new Array();  
  32.     //数据数组  
  33.     var dataArray= new Array();  
  34.       
  35.       
  36.     //将数据进行处理  
  37.     for(var i=0;i<context.length;i++)  
  38.     {     
  39.         nameArray.push(context[i].planName);  
  40.           
  41.         //二维数组- 保存数据  
  42.         dataArray[i]= new Array();  
  43.         dataArray[i].push(context[i].sales);  
  44.           
  45.         dataArray[i].push(context[i].administration);  
  46.         dataArray[i].push(context[i].informationTechology);  
  47.         dataArray[i].push(context[i].customerSupport);  
  48.         dataArray[i].push(context[i].development);  
  49.         dataArray[i].push(context[i].marketing);   
  50.           
  51.     }    
  52.       
  53.     require.config(  
  54.     {  
  55.         paths:{  
  56.         echarts:'res/js'  
  57.         }  
  58.     });  
  59.     require(  
  60.         [  
  61.         'echarts',  
  62.         'echarts/chart/radar',  
  63.         'echarts/chart/line'  
  64.         ]  
  65.         , function(ec)  
  66.         {  
  67.             var myChart =ec.init(document.getElementById("myRadio"));  
  68.               
  69.               
  70.             option = {  
  71.                 title : {  
  72.                     text: '预算 vs 开销 vs我的开销（Budget vs spending）',  
  73.                     subtext: '纯属虚构'  
  74.                 },  
  75.                 tooltip : {  
  76.                     trigger: 'axis'  
  77.                 },  
  78.                 legend: {  
  79.                     orient : 'vertical',  
  80.                     x : 'right',  
  81.                     y : 'bottom',  
  82.                     data:nameArray//['预算分配（Allocated Budget）','实际开销（Actual Spending）']  
  83.                 },  
  84.                 toolbox: {  
  85.                     show : true,  
  86.                     feature : {  
  87.                         mark : {show: true},  
  88.                         dataView : {show: true, readOnly: false},  
  89.                         restore : {show: true},  
  90.                         saveAsImage : {show: true}  
  91.                     }  
  92.                 },  
  93.                 polar : [  
  94.                    {  
  95.                        indicator :                       
  96.                        [                     
  97.                            { text: '销售（sales）', max: 6000},  
  98.                            { text: '管理（Administration）', max: 16000},  
  99.                            { text: '信息技术（Information Techology）', max: 30000},  
  100.                            { text: '客服（Customer Support）', max: 38000},  
  101.                            { text: '研发（Development）', max: 52000},  
  102.                            { text: '市场（Marketing）', max: 25000}    
  103.                         ]  
  104.                     }  
  105.                 ],  
  106.                 calculable : true,  
  107.                 series : [  
  108.                     {  
  109.                         name: '预算 vs 开销（Budget vs spending）',  
  110.                         type: 'radar',  
  111.                         data : [                         
  112.                         {  
  113.                             value:dataArray[0],  
  114.                             name:nameArray[0]  
  115.                         } ,  
  116.                         {  
  117.                             value:dataArray[1],  
  118.                             name:nameArray[1]  
  119.                         },  
  120.                         {  
  121.                             value:dataArray[2],  
  122.                             name:nameArray[2]  
  123.                         }  
  124.                         ]  
  125.                           
  126.                     }  
  127.                 ]  
  128.             };  
  129.               
  130.               
  131.             myChart.setOption(option);  
  132.         }  
  133.       
  134.     );  
  135.       
  136.       
  137.       
  138.   </script>  
  139.       
  140.   <script type="text/javascript" src="${home }/res/js/jquery.1.7.2.min.js"></script>  
  141.    <script type="text/javascript" src="${home }/res/js/jquery-1.11.3.min.js"></script>  
  142.   </body>  
  143. </html>  




方法2.在类中生成类似js代码，转换成JSON字符串后传入到jsp页面中

关键jar包：ECharts-2.2.6.jar 

下载及介绍地址：http://git.oschina.net/free/ECharts#git-readme （根据百度Echarts的一个开源项目，感谢作者）

RadarServiceImpl.java

[java] view plain copy
 print?
  1. package com.echarts.service.impl;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5.   
  6. import org.springframework.beans.factory.annotation.Autowired;  
  7. import org.springframework.stereotype.Service;  
  8.   
  9. import com.echarts.dao.RadarDao;  
  10. import com.echarts.entity.AllocatedBudget;  
  11. import com.echarts.service.RadarService;  
  12. import com.github.abel533.echarts.Option;  
  13. import com.github.abel533.echarts.Polar;  
  14. import com.github.abel533.echarts.code.Orient;  
  15. import com.github.abel533.echarts.code.Tool;  
  16. import com.github.abel533.echarts.code.Trigger;  
  17. import com.github.abel533.echarts.code.X;  
  18. import com.github.abel533.echarts.code.Y;  
  19. import com.github.abel533.echarts.data.Data;  
  20. import com.github.abel533.echarts.feature.DataView;  
  21. import com.github.abel533.echarts.feature.Mark;  
  22. import com.github.abel533.echarts.feature.Restore;  
  23. import com.github.abel533.echarts.feature.SaveAsImage;  
  24. import com.github.abel533.echarts.json.FsonOption;  
  25. import com.github.abel533.echarts.series.Radar;  
  26.   
  27. /** 
  28.  * @author lyx 
  29.  *   
  30.  * 2015-9-1上午9:04:04 
  31.  * 
  32.  *com.echarts.service.impl.RadarServiceImpl 
  33.  * 
  34.  */  
  35.   
  36. @Service("RadarService")  
  37. public class RadarServiceImpl implements RadarService{  
  38.   
  39.     @Autowired  
  40.     private RadarDao dao;  
  41.       
  42.     public List<AllocatedBudget> addInfo() {  
  43.         // TODO Auto-generated method stub  
  44.       
  45.           
  46.         return dao.addInfo();  
  47.     }  
  48.   
  49.     public FsonOption radarOption() {  
  50.         //获得数据  
  51.         List<AllocatedBudget> list = dao.addInfo();  
  52.           
  53.         //option设置    
  54.           
  55.         FsonOption option =new FsonOption();  
  56.           
  57.         option.title("预算 vs 开销 vs 我的开销（Budget vs spending）", "纯属虚构");  
  58.           
  59.         option.tooltip(Trigger.axis);  
  60.           
  61.         //图例  
  62.         option.legend().orient(Orient.vertical).x(X.right).y(Y.bottom);//.data("预算分配（Allocated Budget）","实际开销（Actual Spending）","我的开销");  
  63.           
  64.         //图例说明  
  65.         for (AllocatedBudget alloc: list) {  
  66.             option.legend().data().add(alloc.getPlanName());  
  67.                   
  68.             }  
  69.               
  70.         //工具栏  
  71.         option.toolbox().show(true).feature(Tool.mark, Tool.dataView, Tool.restore, Tool.saveAsImage);  
  72.         option.calculable(true);  
  73.   
  74.         //极坐标  
  75.         Polar polar = new Polar();  
  76.         polar.indicator(new Data().text("销售（sales）").max(6000),  
  77.                 new Data().text("管理（Administration）").max(16000),  
  78.                 new Data().text("信息技术（Information Techology）").max(30000),  
  79.                 new Data().text("客服（Customer Support）").max(38000),  
  80.                 new Data().text("研发（Development）").max(52000),  
  81.                 new Data().text("市场（Marketing）").max(25000));  
  82.         option.polar(polar);  
  83.           
  84.         //雷达图  
  85.         Radar radar = new Radar("预算 vs 开销（Budget vs spending）");  
  86.           
  87.         //雷达图数据  
  88.         for (AllocatedBudget alloc: list) {  
  89.     <span style="white-space:pre">    </span>radar.data(new Data().name(alloc.getPlanName().toString()).value(alloc.getSales(),alloc.getAdministration(),alloc.getInformationTechology(),alloc.getCustomerSupport(),alloc.getDevelopment(),alloc.getMarketing()));  
  90.         }  
  91.           
  92.          
  93.         option.series(radar);  
  94.           
  95.           
  96.         System.out.println(option);  
  97.         return option;  
  98.     }  
  99.   
  100. }  

controller方法：

[java] view plain copy
 print?
  1. /** 
  2.      * @param request 
  3.      * @return 
  4.      * 在dao层的类中实现Option 
  5.      */  
  6.     @RequestMapping("/radarOption")  
  7.     public ModelAndView radarOption(HttpServletRequest request)  
  8.     {  
  9.           
  10.           
  11.         FsonOption option = service.radarOption();  
  12.           
  13.         request.setAttribute("option", option);  
  14.           
  15.           
  16.         return new ModelAndView("/rect");  
  17.     }  

jsp页面

[java] view plain copy
 print?
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%  
  3. String path = request.getContextPath();  
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  5. request.setAttribute("home", path);  
  6. %>  
  7.   
  8. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  9. <html>  
  10.   <head>  
  11.     <base href="<%=basePath%>">  
  12.     <title>雷达图</title>  
  13.     
  14.   </head>  
  15.     
  16.   <body>  
  17.         <h2>雷达图</h2>  
  18.       
  19.     <div id="myRadio"  style="height:400px"></div>  
  20.       
  21.       
  22.     <script type="text/javascript" src="${home }/res/js/echarts.js"></script>  
  23.   <script type="text/javascript" src="${home }/res/js/macarons.js"></script>  
  24.   <script type="text/javascript">  
  25.     var home ="${home}";  
  26.       
  27.       
  28.       
  29.       
  30.       
  31.     require.config({  
  32.         paths:  
  33.         {  
  34.             echarts:'res/js'  
  35.         }  
  36.     });  
  37.       
  38.       
  39.     var option = ${option};  
  40.     require(  
  41.     [  
  42.         'echarts',  
  43.         'echarts/chart/radar',  
  44.         'echarts/chart/line'  
  45.     ],  
  46.     function(ec)  
  47.     {  
  48.         var myChart =ec.init(document.getElementById("myRadio"));  
  49.           
  50.         myChart.setOption(option);  
  51.     }  
  52.     );  
  53.       
  54.   </script>  
  55.       
  56.   <script type="text/javascript" src="${home }/res/js/jquery.1.7.2.min.js"></script>  
  57.    <script type="text/javascript" src="${home }/res/js/jquery-1.11.3.min.js"></script>  
  58.   </body>  
  59. </html>  

运行成功的后页面源码：

[java] view plain copy
 print?
  1. 运行后的js:  
  2.   
  3.  var home ="/springEcharts001";  
  4.      
  5.    require.config({  
  6.     paths:  
  7.     {  
  8.      echarts:'res/js'  
  9.     }  
  10.    });  
  11.      
  12.    var option = {"calculable":true,  
  13.   
  14.  "legend":{"data":["预算分配","实际开销","我的开销"],"orient":"vertical","x":"right","y":"bottom"},  
  15.   
  16.  "polar":[{"indicator":[{"max":6000,"text":"销售（sales）"},{"max":16000,"text":"管理（Administration）"},  
  17.  {"max":30000,"text":"信息技术（Information Techology）"},{"max":38000,"text":"客服（Customer Support）"},  
  18.  {"max":52000,"text":"研发（Development）"},{"max":25000,"text":"市场（Marketing）"}]}],  
  19.    
  20.  "series":[{"data":[{"name":"预算分配","value":[4300,10000,28000,35000,50000,19000]},  
  21.  {"name":"实际开销","value":[5000,14000,28000,31000,42000,21000]},  
  22.  {"name":"我的开销","value":[1000,4000,8000,8000,20000,10000]}],  
  23.  "name":"预算 vs 开销（Budget vs spending）","type":"radar"}],  
  24.    
  25.  "title":{"subtext":"纯属虚构","text":"预算 vs 开销 vs 我的开销（Budget vs spending）"},  
  26.    
  27.  "toolbox":{"feature":{"mark":{"lineStyle":{"color":"#1e90ff","type":"dashed","width":2},"show":true,  
  28.  "title":{"mark":"辅助线开关","markClear":"清空辅助线","markUndo":"删除辅助线"}},  
  29.  "dataView":{"lang":["数据视图","关闭","刷新"],"readOnly":false,"show":true,"title":"数据视图"},  
  30.  "restore":{"show":true,"title":"还原"},"saveAsImage":{"lang":["点击保存"],"show":true,"title":"保存为图片","type":"png"}},"show":true},  
  31.    
  32.  "tooltip":{"trigger":"axis"}};  
  33.    require(  
  34.    [  
  35.     'echarts',  
  36.     'echarts/chart/radar',  
  37.     'echarts/chart/line'  
  38.    ],  
  39.    function(ec)  
  40.    {  
  41.     var myChart =ec.init(document.getElementById("myRadio"));  
  42.      
  43.     myChart.setOption(option);  
  44.    }  
  45.    );  

相关推荐