ECharts系列 - 柱狀圖（條形圖）實例

原創 六块腹肌的小牛犊 2020-06-15 12:38

http://blog.csdn.net/zou128865/article/details/42802671


ECharts系列 - 柱狀圖（條形圖）實例

ECharts主頁：  http://echarts.baidu.com/index.html

ECharts-2.1.8下載地址：  http://echarts.baidu.com/build/echarts-2.1.8.zip

ECharts官方實例：  http://echarts.baidu.com/doc/example.html

ECharts官方API文檔：  http://echarts.baidu.com/doc/doc.html



js文件夾： 下載了ECharts之後，解壓縮，如解壓後的根目錄是echarts-2.1.8，則到echarts-2.1.8\doc\example\www路徑下，把裏面的js文件夾直接複製粘貼到項目的 WebRoot根目錄下即可

echarts.jsp： 在WebRoot根目錄下新建echarts.jsp

echarts.jsp

[java] view plaincopy
  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. %>  
  6.   
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  8. <html>  
  9.   <head>  
  10.     <base href="<%=basePath%>">  
  11.     <title>ECharts實例</title>  
  12.   </head>  
  13.   <body>  
  14.     <!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->  
  15.     <!--Step:1 爲ECharts準備一個具備大小（寬高）的Dom-->  
  16.     <div id="mainBar" style="height:500px;border:1px solid #ccc;padding:10px;"></div>  
  17.       
  18.     <!--Step:2 Import echarts.js-->  
  19.     <!--Step:2 引入echarts.js-->  
  20.     <script src="js/echarts.js"></script>  
  21.       
  22.     <script type="text/javascript">  
  23.     // Step:3 conifg ECharts's path, link to echarts.js from current page.  
  24.     // Step:3 爲模塊加載器配置echarts的路徑，從當前頁面鏈接到echarts.js，定義所需圖表路徑  
  25.     require.config({  
  26.         paths: {  
  27.             echarts: './js'  
  28.         }  
  29.     });  
  30.       
  31.     // Step:4 require echarts and use it in the callback.  
  32.     // Step:4 動態加載echarts然後在回調函數中開始使用，注意保持按需加載結構定義圖表路徑  
  33.     require(  
  34.         [  
  35.             //這裏的'echarts'相當於'./js'  
  36.             'echarts',  
  37.             'echarts/chart/bar',  
  38.             'echarts/chart/line',  
  39.         ],  
  40.         //創建ECharts圖表方法  
  41.         function (ec) {  
  42.             //--- 折柱 ---  
  43.                 //基於準備好的dom,初始化echart圖表  
  44.             var myChart = ec.init(document.getElementById('mainBar'));  
  45.             //定義圖表option  
  46.             var option = {  
  47.                 //標題，每個圖表最多僅有一個標題控件，每個標題控件可設主副標題  
  48.                 title: {  
  49.                     //主標題文本，'\n'指定換行  
  50.                     text: '2013年廣州降水量與蒸發量統計報表',  
  51.                     //主標題文本超鏈接  
  52.                     link: 'http://www.tqyb.com.cn/weatherLive/climateForecast/2014-01-26/157.html',  
  53.                     //副標題文本，'\n'指定換行  
  54.                     subtext: 'www.stepday.com',  
  55.                     //副標題文本超鏈接  
  56.                     sublink: 'http://www.stepday.com/myblog/?Echarts',  
  57.                     //水平安放位置，默認爲左側，可選爲：'center' | 'left' | 'right' | {number}（x座標，單位px）  
  58.                     x: 'left',  
  59.                     //垂直安放位置，默認爲全圖頂端，可選爲：'top' | 'bottom' | 'center' | {number}（y座標，單位px）  
  60.                     y: 'top'  
  61.                 },  
  62.                 //提示框，鼠標懸浮交互時的信息提示  
  63.                 tooltip: {  
  64.                     //觸發類型，默認（'item'）數據觸發，可選爲：'item' | 'axis'  
  65.                     trigger: 'axis'  
  66.                 },  
  67.                 //圖例，每個圖表最多僅有一個圖例  
  68.                 legend: {  
  69.                     //顯示策略，可選爲：true（顯示） | false（隱藏），默認值爲true  
  70.                     show: true,  
  71.                     //水平安放位置，默認爲全圖居中，可選爲：'center' | 'left' | 'right' | {number}（x座標，單位px）  
  72.                     x: 'center',  
  73.                     //垂直安放位置，默認爲全圖頂端，可選爲：'top' | 'bottom' | 'center' | {number}（y座標，單位px）  
  74.                     y: 'top',  
  75.                     //legend的data: 用於設置圖例，data內的字符串數組需要與sereis數組內每一個series的name值對應  
  76.                     data: ['蒸發量','降水量']  
  77.                 },  
  78.                 //工具箱，每個圖表最多僅有一個工具箱  
  79.                 toolbox: {  
  80.                     //顯示策略，可選爲：true（顯示） | false（隱藏），默認值爲false  
  81.                     show: true,  
  82.                     //啓用功能，目前支持feature，工具箱自定義功能回調處理  
  83.                     feature: {  
  84.                         //輔助線標誌  
  85.                         mark: {show: true},  
  86.                         //dataZoom，框選區域縮放，自動與存在的dataZoom控件同步，分別是啓用，縮放後退  
  87.                         dataZoom: {  
  88.                             show: true,  
  89.                              title: {  
  90.                                 dataZoom: '區域縮放',  
  91.                                 dataZoomReset: '區域縮放後退'  
  92.                             }  
  93.                         },  
  94.                         //數據視圖，打開數據視圖，可設置更多屬性,readOnly 默認數據視圖爲只讀(即值爲true)，可指定readOnly爲false打開編輯功能  
  95.                         dataView: {show: true, readOnly: true},  
  96.                         //magicType，動態類型切換，支持直角系下的折線圖、柱狀圖、堆積、平鋪轉換  
  97.                         magicType: {show: true, type: ['line', 'bar']},  
  98.                         //restore，還原，復位原始圖表  
  99.                         restore: {show: true},  
  100.                         //saveAsImage，保存圖片（IE8-不支持）,圖片類型默認爲'png'  
  101.                         saveAsImage: {show: true}  
  102.                     }  
  103.                 },  
  104.                 //是否啓用拖拽重計算特性，默認關閉(即值爲false)  
  105.                 calculable: true,  
  106.                 //直角座標系中橫軸數組，數組中每一項代表一條橫軸座標軸，僅有一條時可省略數值  
  107.                 //橫軸通常爲類目型，但條形圖時則橫軸爲數值型，散點圖時則橫縱均爲數值型  
  108.                 xAxis: [  
  109.                     {  
  110.                         //顯示策略，可選爲：true（顯示） | false（隱藏），默認值爲true  
  111.                         show: true,  
  112.                         //座標軸類型，橫軸默認爲類目型'category'  
  113.                         type: 'category',  
  114.                         //類目型座標軸文本標籤數組，指定label內容。 數組項通常爲文本，'\n'指定換行  
  115.                         data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']  
  116.                     }  
  117.                 ],  
  118.                 //直角座標系中縱軸數組，數組中每一項代表一條縱軸座標軸，僅有一條時可省略數值  
  119.                 //縱軸通常爲數值型，但條形圖時則縱軸爲類目型  
  120.                 yAxis: [  
  121.                     {  
  122.                         //顯示策略，可選爲：true（顯示） | false（隱藏），默認值爲true  
  123.                         show: true,  
  124.                         //座標軸類型，縱軸默認爲數值型'value'  
  125.                         type: 'value',  
  126.                         //分隔區域，默認不顯示  
  127.                         splitArea: {show: true}  
  128.                     }  
  129.                 ],  
  130.                   
  131.                 //sereis的數據: 用於設置圖表數據之用。series是一個對象嵌套的結構；對象內包含對象  
  132.                 series: [  
  133.                     {  
  134.                         //系列名稱，如果啓用legend，該值將被legend.data索引相關  
  135.                         name: '蒸發量',  
  136.                         //圖表類型，必要參數！如爲空或不支持類型，則該系列數據不被顯示。  
  137.                         type: 'bar',  
  138.                         //系列中的數據內容數組，折線圖以及柱狀圖時數組長度等於所使用類目軸文本標籤數組axis.data的長度，並且他們間是一一對應的。數組項通常爲數值  
  139.                         data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],  
  140.                         //系列中的數據標註內容  
  141.                         markPoint: {  
  142.                             data: [  
  143.                                 {type: 'max', name: '最大值'},  
  144.                                 {type: 'min', name: '最小值'}  
  145.                             ]  
  146.                         },  
  147.                         //系列中的數據標線內容  
  148.                         markLine: {  
  149.                             data: [  
  150.                                 {type: 'average', name: '平均值'}  
  151.                             ]  
  152.                         }  
  153.                     },  
  154.                     {  
  155.                         //系列名稱，如果啓用legend，該值將被legend.data索引相關  
  156.                         name: '降水量',  
  157.                         //圖表類型，必要參數！如爲空或不支持類型，則該系列數據不被顯示。  
  158.                         type: 'bar',  
  159.                         //系列中的數據內容數組，折線圖以及柱狀圖時數組長度等於所使用類目軸文本標籤數組axis.data的長度，並且他們間是一一對應的。數組項通常爲數值  
  160.                         data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],  
  161.                         //系列中的數據標註內容  
  162.                         markPoint: {  
  163.                             data: [  
  164.                                 {type: 'max', name: '最大值'},  
  165.                                 {type: 'min', name: '最小值'}  
  166.                             ]  
  167.                         },  
  168.                         //系列中的數據標線內容  
  169.                         markLine: {  
  170.                             data: [  
  171.                                 {type: 'average', name: '平均值'}  
  172.                             ]  
  173.                         }  
  174.                     }  
  175.                 ]  
  176.             };  
  177.                   
  178.             //爲echarts對象加載數據              
  179.             myChart.setOption(option);  
  180.         }  
  181.     );  
  182.     </script>  
  183.   </body>  
  184. </html>  


完成以上的步驟後，把項目發佈到服務器，在瀏覽器上訪問echarts.jsp(由於本實例還沒有跟後臺進行交互，只是先做一個前臺用法介紹，所以可以把echart.jsp直接修改成echarts.html文件,把它跟js文件夾放在同一級目錄下，然後直接用瀏覽器打開echarts.html)，即可看到下面的效果



圖片中的右上角有個工具箱，點擊“折線圖切換”按鈕後，效果如下




發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

freemarker的數據格式化

當數據超過3位的時候,freemarker會自動用逗號截取 格式如:2,008 如何解決呢？ 1> 加.toString(),如：${(userId

极杰子 2020-06-27 01:50:52

easy-layout

六块腹肌的小牛犊 2020-02-23 03:02:58

如何解決CSS瀏覽器兼容的問題

六块腹肌的小牛犊 2020-02-23 03:02:58

理解JavaScript的caller,callee,call,apply

六块腹肌的小牛犊 2020-02-23 03:02:58

freemarker的數據格式化

當數據超過3位的時候,freemarker會自動用逗號截取 格式如:2,008 如何解決呢？ 1> 加.toString(),如：${(userId

极杰子 2020-06-27 01:50:52

easy-layout

六块腹肌的小牛犊 2020-02-23 03:02:58

EasyUI表單元素總結

六块腹肌的小牛犊 2020-02-23 03:02:58

如何解決CSS瀏覽器兼容的問題

六块腹肌的小牛犊 2020-02-23 03:02:58

理解JavaScript的caller,callee,call,apply

六块腹肌的小牛犊 2020-02-23 03:02:58

jqweui Toast

CaiL_恋 2018-09-04 09:32:21

jQuery 獲取 checkbox、select、radio值

ruoshui09172104 2018-09-03 18:29:06

eval()函數的作用

ruoshui09172104 2018-09-03 18:28:57

echarts 動態數據交互實例

ruoshui09172104 2018-09-03 18:28:57

springmvc接收ckeditor文本編輯器輸入的內容

姣子是饺子 2018-08-31 12:02:34

js 數組去重5個常用算法

Andseny 2018-08-30 13:52:02