碼上快樂

相關內容    簡體    繁體

JSP使用Echarts的最簡單的例子

本文轉載自   查看原文   2018-06-25 09:49   2080    Echarts(轉載)

Echarts是百度的頁面圖表框架，使用其稍作配置就能在web上整出漂亮的圖表。

本篇文章簡單的介紹一下“JSP使用Echarts的最簡單的例子“，例子圖如下

關於echarts詳細資料可以看這里：http://echarts.baidu.com/index.html

 

圖表顯示是需要數據的，但是其官網教程中為了演示方便直接在頁面js中填入數據，如下面鏈接所示，周一、周二等數據都是在頁面直接寫好：

http://echarts.baidu.com/doc/example/line1.html

 xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ]

而我們更經常的要做的操作是從遠程服務器將數據取出，放入圖表。熟悉ajax的人，自然可以將上面的代碼少做修改，但網上的例子太少，我這邊簡單貼一下

頁面端參考代碼：

 

[html]  view plain  copy
 
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <!DOCTYPE html>  
  4. <html>  
  5. <head>  
  6. <meta charset="utf-8">  
  7. <!-- 引入 ECharts 文件 -->  
  8. <script src="js/echarts3/echarts.common.min.js"></script>  
  9. <script type="text/javascript"  
  10.     src="${pageContext.request.contextPath}/js/jquery-3.2.1.js"></script>  
  11. </head>  
  12.   
  13. <body>  
  14.     <!-- 為 ECharts 准備一個具備大小（寬高）的 DOM -->  
  15.     <div id="main" style="width: 600px; height: 400px;"></div>  
  16.     <script type="text/javascript">  
  17.         // 基於准備好的dom，初始化echarts實例  
  18.         var myChart = echarts.init(document.getElementById('main'));  
  19.         var url = '${pageContext.request.contextPath}/GetAllDataServlet';  
  20.         $.getJSON(url).done(function(json) {  
  21.             // 2.獲取數據  
  22.             salesVolume = json.salesVolume;//銷量  
  23.             bussinessVolume = json.bussinessVolume;//營業額  
  24.             months = json.months;//月份  
  25.   
  26.             // 3.更新圖表myChart的數據  
  27.             var option = {  
  28.                 title : {  
  29.                     text : 'ECharts 入門示例'  
  30.                 },  
  31.                 tooltip : {},  
  32.                 legend : {  
  33.                     data : [ '銷量' ],  
  34.                     data : [ '營業額' ]  
  35.                 },  
  36.                 xAxis : {  
  37.                     data : months  
  38.                 },  
  39.                 yAxis : {},  
  40.                 series : [ {  
  41.                     name : '銷量',  
  42.                     type : 'bar',  
  43.                     data : salesVolume  
  44.                 }, {  
  45.                     name : '營業額',  
  46.                     type : 'line',  
  47.                     data : bussinessVolume  
  48.                 } ],  
  49.                 toolbox : {  
  50.                     show : true,  
  51.                     feature : {  
  52.                         mark : {  
  53.                             show : true  
  54.                         },  
  55.                         dataView : {  
  56.                             show : true,  
  57.                             readOnly : false  
  58.                         },  
  59.                         magicType : {  
  60.                             show : true,  
  61.                             type : [ 'line', 'bar' ]  
  62.                         },  
  63.                         restore : {  
  64.                             show : true  
  65.                         },  
  66.                         saveAsImage : {  
  67.                             show : true  
  68.                         }  
  69.                     }  
  70.                 },  
  71.             }  
  72.             myChart.setOption(option);  
  73.         })  
  74.     </script>  
  75.   
  76. </body>  
  77.   
  78. </html>  

服務器端參考代碼：

 

 

[java]  view plain  copy
 
  1. @WebServlet("/GetAllDataServlet")  
  2. public class GetAllDataServlet extends HttpServlet {  
  3.     private static final long serialVersionUID = 1L;  
  4.   
  5.     public GetAllDataServlet() {  
  6.         super();  
  7.     }  
  8.   
  9.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
  10.         /*銷量*/  
  11.         Integer[] salesVolume = {10,100,20,56,35,80};  
  12.         /*營業額*/  
  13.         double[] bussinessVolume = {10*10,100*8.5,20*9.5,56*9,35*9.5,80*9};  
  14.         /*橫軸, 月份數據*/  
  15.         String[] months = {"1","2","3","4","5","6"};  
  16.           
  17.         Map<String, Object> map = new HashMap<>();  
  18.         map.put("salesVolume", salesVolume);  
  19.         map.put("bussinessVolume",bussinessVolume);  
  20.         map.put("months", months);  
  21.           
  22.         response.getWriter().println(JSON.toJSONString(map));  
  23.           
  24.     }  
  25.   
  26.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
  27.         doGet(request, response);  
  28.     }  
  29.   
  30. }  

 


使用了FastJson生成json字符串，格式形如：

[html]  view plain  copy
 
  1. {"bussinessVolume":[100.0,850.0,190.0,504.0,332.5,720.0],"months":["1","2","3","4","5","6"],"salesVolume":[10,100,20,56,35,80]}  

 

其他：

實際上你也可以不用json工具，完全自己手寫得到上述格式化字符串。

 

項目參考代碼：

有一個EclipseJEE的參考代碼似乎傳不上來,只好傳到資源哪里了：

http://download.csdn.net/detail/zhrubin/9837529

 

項目相關Git地址：

https://git.coding.net/zhrb/echartsdemo.git

 

 

轉載自https://blog.csdn.net/zhrubin/article/details/46123771


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 CSharpGL(1)從最簡單的例子開始使用CSharpGL 這就是使用ReportBuilder最簡單的例子 jsp中使用javabean簡單例子 Heka 最簡單例子 ECharts簡單運行例子 drools7 (一、最簡單的例子) nodejs入門最簡單例子 一個最簡單的JStorm例子 jsp調用javaBean的簡單例子 【Echarts】百度Echarts的使用入門+兩個簡單的小例子+心得
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM