標籤：echarts 柱狀圖橫條圖 bar
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
ECharts系列 - 柱狀圖（橫條圖）執行個體一1、項目結構js檔案夾： 下載了ECharts之後，解壓縮，如解壓後的根目錄是echarts-2.1.8，則到echarts-2.1.8\doc\example\www路徑下，把裡面的js檔案夾直接複製粘貼到項目的 WebRoot根目錄下即可
echarts.jsp： 在WebRoot根目錄下建立echarts.jsp
echarts.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>ECharts執行個體</title> </head> <body> <!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)--> <!--Step:1 為ECharts準備一個具備大小（寬高）的Dom--> <div id="mainBar" style="height:500px;border:1px solid #ccc;padding:10px;"></div> <!--Step:2 Import echarts.js--> <!--Step:2 引入echarts.js--> <script src="js/echarts.js"></script> <script type="text/javascript"> // Step:3 conifg ECharts's path, link to echarts.js from current page. // Step:3 為模組載入器配置echarts的路徑，從當前頁面連結到echarts.js，定義所需圖表路徑 require.config({ paths: { echarts: './js' } }); // Step:4 require echarts and use it in the callback. // Step:4 動態載入echarts然後在回呼函數中開始使用，注意保持按需載入結構定義圖表路徑 require( [ //這裡的'echarts'相當於'./js' 'echarts', 'echarts/chart/bar', 'echarts/chart/line', ], //建立ECharts圖表方法 function (ec) { //--- 折柱 --- //基於準備好的dom,初始化echart圖表 var myChart = ec.init(document.getElementById('mainBar')); //定義圖表option var option = { //標題，每個圖表最多僅有一個標題控制項，每個標題控制項可設主副標題 title: { //主標題文本，'\n'指定換行 text: '2013年廣州降水量與蒸發量統計報表', //主標題文本超連結 link: 'http://www.tqyb.com.cn/weatherLive/climateForecast/2014-01-26/157.html',//副標題文本，'\n'指定換行subtext: 'www.stepday.com',//副標題文本超連結sublink: 'http://www.stepday.com/myblog/?Echarts',//水平安放位置，預設為左側，可選為：'center' | 'left' | 'right' | {number}（x座標，單位px）x: 'left',//垂直安放位置，預設為全圖頂端，可選為：'top' | 'bottom' | 'center' | {number}（y座標，單位px）y: 'top'},//提示框，滑鼠懸浮互動時的資訊提示 tooltip: { //觸發類型，預設（'item'）資料觸發，可選為：'item' | 'axis' trigger: 'axis' }, //圖例，每個圖表最多僅有一個圖例 legend: { //顯示策略，可選為：true（顯示） | false（隱藏），預設值為true show: true, //水平安放位置，預設為全圖置中，可選為：'center' | 'left' | 'right' | {number}（x座標，單位px） x: 'center', //垂直安放位置，預設為全圖頂端，可選為：'top' | 'bottom' | 'center' | {number}（y座標，單位px） y: 'top', //legend的data: 用於設定圖例，data內的字串數組需要與sereis數組內每一個series的name值對應 data: ['蒸發量','降水量'] }, //工具箱，每個圖表最多僅有一個工具箱 toolbox: { //顯示策略，可選為：true（顯示） | false（隱藏），預設值為false show: true, //啟用功能，目前支援feature，工具箱自訂功能回調處理 feature: { //輔助線標誌 mark: {show: true}, //dataZoom，框選地區縮放，自動與存在的dataZoom控制項同步，分別是啟用，縮放後退 dataZoom: { show: true, title: { dataZoom: '地區縮放', dataZoomReset: '地區縮放後退' } }, //資料檢視，開啟資料檢視，可設定更多屬性,readOnly 預設資料檢視為唯讀(即值為true)，可指定readOnly為false開啟編輯功能 dataView: {show: true, readOnly: true}, //magicType，動態類型切換，支援直角系下的折線圖、柱狀圖、堆積、平鋪轉換 magicType: {show: true, type: ['line', 'bar']}, //restore，還原，複位原始圖表 restore: {show: true}, //saveAsImage，儲存圖片（IE8-不支援）,圖片類型預設為'png' saveAsImage: {show: true} } }, //是否啟用拖拽重計算特性，預設關閉(即值為false) calculable: true, //直角座標系中橫軸數組，數組中每一項代表一條橫軸座標軸，僅有一條時可省略數值 //橫軸通常為類目型，但橫條圖時則橫軸為數值型，散佈圖時則橫縱均為數值型 xAxis: [ { //顯示策略，可選為：true（顯示） | false（隱藏），預設值為true show: true, //座標軸類型，橫軸預設為類目型'category' type: 'category', //類目型座標軸文字標籤數組，指定label內容。 數組項通常為文本，'\n'指定換行 data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'] } ], //直角座標系中縱軸數組，數組中每一項代表一條縱軸座標軸，僅有一條時可省略數值 //縱軸通常為數值型，但橫條圖時則縱軸為類目型 yAxis: [ { //顯示策略，可選為：true（顯示） | false（隱藏），預設值為true show: true, //座標軸類型，縱軸預設為數值型'value' type: 'value', //分隔地區，預設不顯示 splitArea: {show: true} } ], //sereis的資料: 用於設定圖表資料之用。series是一個對象嵌套的結構；對象內包含對象 series: [ { //系列名稱，如果啟用legend，該值將被legend.data索引相關 name: '蒸發量', //圖表類型，必要參數！如為空白或不支援類型，則該系列資料不被顯示。 type: 'bar', //系列中的資料內容數組，折線圖以及柱狀圖時數組長度等於所使用類目軸文字標籤數組axis.data的長度，並且他們間是一一對應的。數組項通常為數值 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], //系列中的資料標註內容 markPoint: { data: [ {type: 'max', name: '最大值'}, {type: 'min', name: '最小值'} ] }, //系列中的資料標線內容 markLine: { data: [ {type: 'average', name: '平均值'} ] } }, { //系列名稱，如果啟用legend，該值將被legend.data索引相關 name: '降水量', //圖表類型，必要參數！如為空白或不支援類型，則該系列資料不被顯示。 type: 'bar', //系列中的資料內容數組，折線圖以及柱狀圖時數組長度等於所使用類目軸文字標籤數組axis.data的長度，並且他們間是一一對應的。數組項通常為數值 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], //系列中的資料標註內容 markPoint: { data: [ {type: 'max', name: '最大值'}, {type: 'min', name: '最小值'} ] }, //系列中的資料標線內容 markLine: { data: [ {type: 'average', name: '平均值'} ] } } ] }; //為echarts對象載入資料 myChart.setOption(option); } ); </script> </body></html>
完成以上的步驟後，把項目發布到伺服器，在瀏覽器上訪問echarts.jsp(由於本執行個體還沒有跟後台進行互動，只是先做一個前台用法介紹，所以可以把echart.jsp直接修改成echarts.html檔案,把它跟js檔案夾放在同一級目錄下，然後直接用瀏覽器開啟echarts.html)，即可看到下面的效果
圖片中的右上方有個工具箱，點擊“折線圖切換”按鈕後，效果如下
更多的圖表樣式設定，可以查看ECharts的官方API文檔
ECharts系列 - 柱狀圖（橫條圖）執行個體一
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
