乡下人产国偷v产偷v自拍,国产午夜片在线观看,婷婷成人亚洲综合国产麻豆,久久综合给合久久狠狠狠9

    • <output id="e9wm2"></output>
    <s id="e9wm2"><nobr id="e9wm2"><ins id="e9wm2"></ins></nobr></s> 
    

    • 
    
    
      



    
      
        
      
            
        
      
        
      
    
      
    
      
        
      
        
      
            
            
      
                
      
                    
                
      
                搜索
            
      

            分享
                
            

            
            
            
            
            
            
            
            

            
        
      
    
      
    
      

    
      

    
      
        
      
        
      
        
      
        
      
            
      
                
      
                    
      ECharts系列
      
                    
                    
                    
                    
      
                         imelee
                        
                        
                        2017-02-16
                        
                            
                        
                    
      
                    
      
                        
                        
      
                    
      
                    
                    
      
                        
      
                            
                        
      
                        
      
                            
                                
      
                                    
                                        
      

                                        
                                        

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

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

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

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

      
ECharts系列 - 柱狀圖（條形圖）實(shí)例一
      

      
1、項(xiàng)目結(jié)構(gòu)
      

      

      

      

      
js文件夾： 下載了ECharts之后，解壓縮，如解壓后的根目錄是echarts-2.1.8，則到echarts-2.1.8\doc\example\www路徑下，把里面的js文件夾直接復(fù)制粘貼到項(xiàng)目的 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實(shí)例</title>  
      12. 
  </head>  
      13. 
  <body>  
      14. 
    <!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->  
      15. 
    <!--Step:1 為ECharts準(zhǔn)備一個(gè)具備大?。▽捀撸┑腄om-->  
      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的路徑，從當(dāng)前頁面鏈接到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 動態(tài)加載echarts然后在回調(diào)函數(shù)中開始使用，注意保持按需加載結(jié)構(gòu)定義圖表路徑  
      33. 
    require(  
      34. 
        [  
      35. 
            //這里的'echarts'相當(dāng)于'./js'  
      36. 
            'echarts',  
      37. 
            'echarts/chart/bar',  
      38. 
            'echarts/chart/line',  
      39. 
        ],  
      40. 
        //創(chuàng)建ECharts圖表方法  
      41. 
        function (ec) {  
      42. 
            //--- 折柱 ---  
      43. 
                //基于準(zhǔn)備好的dom,初始化echart圖表  
      44. 
            var myChart = ec.init(document.getElementById('mainBar'));  
      45. 
            //定義圖表option  
      46. 
            var option = {  
      47. 
                //標(biāo)題，每個(gè)圖表最多僅有一個(gè)標(biāo)題控件，每個(gè)標(biāo)題控件可設(shè)主副標(biāo)題  
      48. 
                title: {  
      49. 
                    //主標(biāo)題文本，'\n'指定換行  
      50. 
                    text: '2013年廣州降水量與蒸發(fā)量統(tǒng)計(jì)報(bào)表',  
      51. 
                    //主標(biāo)題文本超鏈接  
      52. 
                    link: 'http://www./weatherLive/climateForecast/2014-01-26/157.html',  
      53. 
                    //副標(biāo)題文本，'\n'指定換行  
      54. 
                    subtext: 'www.',  
      55. 
                    //副標(biāo)題文本超鏈接  
      56. 
                    sublink: 'http://www./myblog/?Echarts',  
      57. 
                    //水平安放位置，默認(rèn)為左側(cè)，可選為：'center' | 'left' | 'right' | {number}（x坐標(biāo)，單位px）  
      58. 
                    x: 'left',  
      59. 
                    //垂直安放位置，默認(rèn)為全圖頂端，可選為：'top' | 'bottom' | 'center' | {number}（y坐標(biāo)，單位px）  
      60. 
                    y: 'top'  
      61. 
                },  
      62. 
                //提示框，鼠標(biāo)懸浮交互時(shí)的信息提示  
      63. 
                tooltip: {  
      64. 
                    //觸發(fā)類型，默認(rèn)（'item'）數(shù)據(jù)觸發(fā)，可選為：'item' | 'axis'  
      65. 
                    trigger: 'axis'  
      66. 
                },  
      67. 
                //圖例，每個(gè)圖表最多僅有一個(gè)圖例  
      68. 
                legend: {  
      69. 
                    //顯示策略，可選為：true（顯示） | false（隱藏），默認(rèn)值為true  
      70. 
                    show: true,  
      71. 
                    //水平安放位置，默認(rèn)為全圖居中，可選為：'center' | 'left' | 'right' | {number}（x坐標(biāo)，單位px）  
      72. 
                    x: 'center',  
      73. 
                    //垂直安放位置，默認(rèn)為全圖頂端，可選為：'top' | 'bottom' | 'center' | {number}（y坐標(biāo)，單位px）  
      74. 
                    y: 'top',  
      75. 
                    //legend的data: 用于設(shè)置圖例，data內(nèi)的字符串?dāng)?shù)組需要與sereis數(shù)組內(nèi)每一個(gè)series的name值對應(yīng)  
      76. 
                    data: ['蒸發(fā)量','降水量']  
      77. 
                },  
      78. 
                //工具箱，每個(gè)圖表最多僅有一個(gè)工具箱  
      79. 
                toolbox: {  
      80. 
                    //顯示策略，可選為：true（顯示） | false（隱藏），默認(rèn)值為false  
      81. 
                    show: true,  
      82. 
                    //啟用功能，目前支持feature，工具箱自定義功能回調(diào)處理  
      83. 
                    feature: {  
      84. 
                        //輔助線標(biāo)志  
      85. 
                        mark: {show: true},  
      86. 
                        //dataZoom，框選區(qū)域縮放，自動與存在的dataZoom控件同步，分別是啟用，縮放后退  
      87. 
                        dataZoom: {  
      88. 
                            show: true,  
      89. 
                             title: {  
      90. 
                                dataZoom: '區(qū)域縮放',  
      91. 
                                dataZoomReset: '區(qū)域縮放后退'  
      92. 
                            }  
      93. 
                        },  
      94. 
                        //數(shù)據(jù)視圖，打開數(shù)據(jù)視圖，可設(shè)置更多屬性,readOnly 默認(rèn)數(shù)據(jù)視圖為只讀(即值為true)，可指定readOnly為false打開編輯功能  
      95. 
                        dataView: {show: true, readOnly: true},  
      96. 
                        //magicType，動態(tài)類型切換，支持直角系下的折線圖、柱狀圖、堆積、平鋪轉(zhuǎn)換  
      97. 
                        magicType: {show: true, type: ['line', 'bar']},  
      98. 
                        //restore，還原，復(fù)位原始圖表  
      99. 
                        restore: {show: true},  
      100. 
                        //saveAsImage，保存圖片（IE8-不支持）,圖片類型默認(rèn)為'png'  
      101. 
                        saveAsImage: {show: true}  
      102. 
                    }  
      103. 
                },  
      104. 
                //是否啟用拖拽重計(jì)算特性，默認(rèn)關(guān)閉(即值為false)  
      105. 
                calculable: true,  
      106. 
                //直角坐標(biāo)系中橫軸數(shù)組，數(shù)組中每一項(xiàng)代表一條橫軸坐標(biāo)軸，僅有一條時(shí)可省略數(shù)值  
      107. 
                //橫軸通常為類目型，但條形圖時(shí)則橫軸為數(shù)值型，散點(diǎn)圖時(shí)則橫縱均為數(shù)值型  
      108. 
                xAxis: [  
      109. 
                    {  
      110. 
                        //顯示策略，可選為：true（顯示） | false（隱藏），默認(rèn)值為true  
      111. 
                        show: true,  
      112. 
                        //坐標(biāo)軸類型，橫軸默認(rèn)為類目型'category'  
      113. 
                        type: 'category',  
      114. 
                        //類目型坐標(biāo)軸文本標(biāo)簽數(shù)組，指定label內(nèi)容。 數(shù)組項(xiàng)通常為文本，'\n'指定換行  
      115. 
                        data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']  
      116. 
                    }  
      117. 
                ],  
      118. 
                //直角坐標(biāo)系中縱軸數(shù)組，數(shù)組中每一項(xiàng)代表一條縱軸坐標(biāo)軸，僅有一條時(shí)可省略數(shù)值  
      119. 
                //縱軸通常為數(shù)值型，但條形圖時(shí)則縱軸為類目型  
      120. 
                yAxis: [  
      121. 
                    {  
      122. 
                        //顯示策略，可選為：true（顯示） | false（隱藏），默認(rèn)值為true  
      123. 
                        show: true,  
      124. 
                        //坐標(biāo)軸類型，縱軸默認(rèn)為數(shù)值型'value'  
      125. 
                        type: 'value',  
      126. 
                        //分隔區(qū)域，默認(rèn)不顯示  
      127. 
                        splitArea: {show: true}  
      128. 
                    }  
      129. 
                ],  
      130. 
                  
      131. 
                //sereis的數(shù)據(jù): 用于設(shè)置圖表數(shù)據(jù)之用。series是一個(gè)對象嵌套的結(jié)構(gòu)；對象內(nèi)包含對象  
      132. 
                series: [  
      133. 
                    {  
      134. 
                        //系列名稱，如果啟用legend，該值將被legend.data索引相關(guān)  
      135. 
                        name: '蒸發(fā)量',  
      136. 
                        //圖表類型，必要參數(shù)！如為空或不支持類型，則該系列數(shù)據(jù)不被顯示。  
      137. 
                        type: 'bar',  
      138. 
                        //系列中的數(shù)據(jù)內(nèi)容數(shù)組，折線圖以及柱狀圖時(shí)數(shù)組長度等于所使用類目軸文本標(biāo)簽數(shù)組axis.data的長度，并且他們間是一一對應(yīng)的。數(shù)組項(xiàng)通常為數(shù)值  
      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. 
                        //系列中的數(shù)據(jù)標(biāo)注內(nèi)容  
      141. 
                        markPoint: {  
      142. 
                            data: [  
      143. 
                                {type: 'max', name: '最大值'},  
      144. 
                                {type: 'min', name: '最小值'}  
      145. 
                            ]  
      146. 
                        },  
      147. 
                        //系列中的數(shù)據(jù)標(biāo)線內(nèi)容  
      148. 
                        markLine: {  
      149. 
                            data: [  
      150. 
                                {type: 'average', name: '平均值'}  
      151. 
                            ]  
      152. 
                        }  
      153. 
                    },  
      154. 
                    {  
      155. 
                        //系列名稱，如果啟用legend，該值將被legend.data索引相關(guān)  
      156. 
                        name: '降水量',  
      157. 
                        //圖表類型，必要參數(shù)！如為空或不支持類型，則該系列數(shù)據(jù)不被顯示。  
      158. 
                        type: 'bar',  
      159. 
                        //系列中的數(shù)據(jù)內(nèi)容數(shù)組，折線圖以及柱狀圖時(shí)數(shù)組長度等于所使用類目軸文本標(biāo)簽數(shù)組axis.data的長度，并且他們間是一一對應(yīng)的。數(shù)組項(xiàng)通常為數(shù)值  
      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. 
                        //系列中的數(shù)據(jù)標(biāo)注內(nèi)容  
      162. 
                        markPoint: {  
      163. 
                            data: [  
      164. 
                                {type: 'max', name: '最大值'},  
      165. 
                                {type: 'min', name: '最小值'}  
      166. 
                            ]  
      167. 
                        },  
      168. 
                        //系列中的數(shù)據(jù)標(biāo)線內(nèi)容  
      169. 
                        markLine: {  
      170. 
                            data: [  
      171. 
                                {type: 'average', name: '平均值'}  
      172. 
                            ]  
      173. 
                        }  
      174. 
                    }  
      175. 
                ]  
      176. 
            };  
      177. 
                  
      178. 
            //為echarts對象加載數(shù)據(jù)              
      179. 
            myChart.setOption(option);  
      180. 
        }  
      181. 
    );  
      182. 
    </script>  
      183. 
  </body>  
      184. 
</html>  
      

      

      

      

      

      

      

      
完成以上的步驟后，把項(xiàng)目發(fā)布到服務(wù)器，在瀏覽器上訪問echarts.jsp(由于本實(shí)例還沒有跟后臺進(jìn)行交互，只是先做一個(gè)前臺用法介紹，所以可以把echart.jsp直接修改成echarts.html文件,把它跟js文件夾放在同一級目錄下，然后直接用瀏覽器打開echarts.html)，即可看到下面的效果
      

      

      

      

      

      

      

      
圖片中的右上角有個(gè)工具箱，點(diǎn)擊“折線圖切換”按鈕后，效果如下
      

      

      

      

      

      

      

      
更多的圖表樣式設(shè)置，可以查看ECharts的官方API文檔
      
                                          		
                                
      
                                  
                        
      
                    
      



                
      
                
      
                    
                    
                        
      
                            
                                
        
                                    		
                        
        
                            
                
        
                
        
                
                
                
        
                
        


                

                
        本站是提供個(gè)人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊一鍵舉報(bào)。
        
                
                

                
        
                    轉(zhuǎn)藏
                    
                    
                    
                    
                    
                    
                        分享
                        
                        
                    
                    獻(xiàn)花（0）
                            
                
        
                
                
                
        
                    
        
                        
                        
                    
        
                
        

            
        

            
        

            
        
                
                
                
        
                
        
                    
        
                        
        0條評論
        
                        
                        
                        
        
                            
                            
        
                                發(fā)表
                            
        
                        
        
                        
                    
        
                    
                    
        請遵守用戶 評論公約
        
                    
                    
          
                    
        
                    
        
                    
        
                    
                
        
               
                
        
                    
        
                        類似文章
                        更多