<%@ 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‘)); // 指定图表的配置项和数据 myChart.setOption ({ tooltip: { trigger: ‘axis‘, axisPointer: { type: ‘cross‘, crossStyle: { color: ‘#999‘ } } }, toolbox: { feature: { dataView: {show: true, readOnly: false}, magicType: {show: true, type: [‘line‘, ‘bar‘]}, restore: {show: true}, saveAsImage: {show: true} } }, legend: { data:[‘批准经费‘,‘报销经费‘,‘剩余经费‘] }, xAxis: [ { type: ‘category‘, data: [], axisPointer: { type: ‘shadow‘ } } ], yAxis: [ { type : ‘value‘, min: 0, name: ‘（万元）‘, } ], series: [ { name:‘批准经费‘, type:‘bar‘, data:[] }, { name:‘报销经费‘, type:‘bar‘, data:[] }, { name:‘剩余经费‘, type:‘bar‘, data:[] } ] }); myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画 var names=[]; //预算科目类别数组（实际用来盛放X轴坐标值） var numsOne=[]; //批准经费数组（实际用来盛放Y坐标值） var numsTwo=[]; //报销经费数组（实际用来盛放Y坐标值） var numsThree=[]; //剩余经费数组（实际用来盛放Y坐标值） $.ajax({ type : "post", async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行） url : "talentProjectAction!do_selectDate.action", //请求发送到action处 data : {}, //传送请求数据 dataType : "json", //返回数据形式为json success : function(data) { //请求成功时执行该函数内容，result即为服务器返回的json对象 if (data) { for(var i=0;i<data.length;i++){ names.push(data[i].name); //挨个取出类别并填入类别数组 numsOne.push(data[i].approvalFee); //挨个取出类别并填入类别数组 numsTwo.push(data[i].expendedFee); //挨个取出类别并填入类别数组 numsThree.push(data[i].surplusFee); //挨个取出类别并填入类别数组 } myChart.hideLoading(); //隐藏加载动画 myChart.setOption({ //加载数据图表 xAxis: [ { type: ‘category‘, data: names, axisPointer: { type: ‘shadow‘ } } ], series: [ { name:‘批准经费‘, type:‘bar‘, data: numsOne }, { name:‘报销经费‘, type:‘bar‘, data: numsTwo }, { name:‘剩余经费‘, type:‘bar‘, data: numsThree } ] }); } }, error : function(errorMsg) { //请求失败时执行该函数 ep.alert("图表请求数据失败!"); myChart.hideLoading(); } }) }); </script> </head> <body class="ep-nopadding-body popOperate"> <div id="main"></div> </body> </html>
原文：https://www.cnblogs.com/dreamShines/p/11025001.html
