<%@ page contentType="text/html; charset=UTF-8"%> <%@ taglib prefix="e" uri="/firefly-theme-taglib" %> <%@ taglib prefix="s" uri="/struts-tags" %> <!DOCTYPE html> <html lang="zh-cn"> <head> //TODO 引入jquery <script src="${pageContext.request.contextPath}/system/script/echarts3/echarts.min.js"></script> <style type="text/css"> #main{margin:0 auto;border:0px solid #000;width:700px;height:500px} </style> <script type="text/javascript"> $(function() { var myChart = echarts.init(document.getElementById('main ' )); // the specified configurations and graph data myChart.setOption ({ ToolTip: { Trigger: ' Axis ' , axisPointer: { type: ' Cross ' , crossStyle: { Color: ' # 999 ' } } }, Toolbox: { Feature: { DataView: {Show: to true , readOnly: to false }, magicType: {Show: to true , type: [ ' Line ' , ' bar ' ]}, Restore: {Show: to true }, saveAsImage: {Show: to true } } }, Legend: { Data: [ ' approve funding ' , ' reimbursement of expenses ' , ' remaining funds ' ] }, XAXIS: [ { type: ' category' , Data: [], axisPointer: { type: ' Shadow ' } } ], YAXIS: [ { type: ' value ' , min: 0 , name: ' (ten thousand yuan) ' , } ], Series: [ { name : ' approval of funds ', Type: ' bar ' , Data: [] }, { name: ' reimbursement of expenses ' , type: ' bar ' , Data: [] }, { name: ' surplus funds ' , type: ' bar ' , Data: [ ] } ] }); myChart.showLoading (); // first display data is loaded before loading a simple piece of animation var names = []; // budget account type of the array (for holding the actual X-axis coordinate value) var numsOne = []; // approved funds array (actually used to bloom Y coordinate value) var numsTwo = []; // claims provision array (for holding the actual Y coordinate value) var numsThree = []; // remaining funds array (for holding the actual Y coordinate value) $ .ajax ({ of the type: " POST " , the async: to true , // asynchronous request (synchronous request will lock the browser, the user must wait for the request to complete other operations can perform) url: "! talentProjectAction do_selectDate.action " , // request to the action Data: {}, // the transmission request data dataType: " JSON " , // return data in the form of JSON : Success function (Data) { // perform a successful request the function contents, result that is returned from the server objects json IF (Data) { for ( var I = 0 ; I < data.length; I ++ ) { names.push (Data [I] .name); // in turn remove the category type of the array and fills numsOne.push (Data [I] .approvalFee); // one by one taken out and filled into categories category array numsTwo.push (Data [I] .expendedFee); // one by one taken out and filled into categories category array numsThree.push (data [ I] .surplusFee); // in turn extracted category type of the array and fills } myChart.hideLoading (); // hides loading animation myChart.setOption ({ // load data table XAXIS: [ { type: ' category ' , data: names, axisPointer: { type: ' Shadow ' } } ], Series: [ { name: ' approve funding ' , type: ' bar ' , Data: numsOne }, { name: ' reimbursement of expenses ' , Type: ' bar ' , Data: numsTwo }, { name: ' surplus funds ' , type: ' bar ' , : Data numsThree } ] ;}) } }, : error function (errorMsg) { // execute the request fails the function ep.alert ( " Chart request data fails! " ); myChart.hideLoading (); } }) }); </ Script > </ head > < body class = "EP-nopadding popOperate-body" > < div ID = "main" > </ div > </ body > </ HTML >