效果图：
JSP页面：
<div class="canvesbox"><div class="la"><button class="aweek">最近一周</button><select id="myselect"></select></div><div id="chartmain" style="width:100%; height: 400px;margin-top: 15px;"></div><div id="chartweek" style="width:100%; height: 400px;margin-top: 15px;"></div><div class="allNum">年消费总计：<span class="colorNum"> ￥</span><span class="zongjije colorNum fontNum"></span>元</div><div class="weekNum">最近消费总计：<span class="colorNum"> ￥</span><span class="weekje colorNum fontNum"></span>元</div></div>
JS：
<script type="text/javascript" src='<c:url value="/js/echarts.js"></c:url>'></script>$(function() {getData();getOpen();$("#chartmain").hide();$(".allNum").hide();$(".aweek").css({'border':'2px solid #6178EA'});})//获取数据库消费的所有的年份function getOpen(){$.ajax({url: "路径",data: {},dataType: "json",success: function(data){var mliye = eval('data.numye');$("#myselect").append("<option value=''>选择年份</option>");$.each(mliye,function(idx,obj){$("#myselect").append("<option value='"+obj.merchants+"-0-0"+"'>"+obj.merchants+"年"+"</option>");}); }});}//选择年份时获取每一年每个月消费情况$("#myselect").change(function(){$(".aweek").css({'border':''});$("#myselect").css({'border':'2px solid #6178EA'});var time=$("#myselect").val();$("#chartmain").show();$(".allNum").show();$(".weekNum").hide();$("#chartweek").hide();getWeek(time);});//获取交易流水数据、和最近一周每一天的消费总额以及一周的总额function getData(time){$.ajax({url: "路径",data: {time:time},dataType: "json",success: function(data){var htmlStr = template("list",{allList:data.json});$("#allSlist").html(htmlStr);$(".weekje").text(data.weekmoney);var mlist = eval('data.weekjson');var nianArry=[];//年var money=[];//金额$.each(mlist,function(idx,obj){nianArry.push(obj.merchants+"-"+obj.archivesname+"-"+obj.consumtype);money.push(obj.consummoney);});//指定图标的配置和数据var option = {title:{text:'财务汇总'},tooltip:{trigger: 'axis',axisPointer : { // 坐标轴指示器，坐标轴触发有效type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'}},legend:{data:['用户来源']},xAxis:{data:nianArry},yAxis:{},series:[{name:'消费总额',type:'line',//type改成bar为柱状图，改成line为曲线图label: {normal: {show: true,position: 'top'}},itemStyle: {normal: {// 随机显示color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}// 定制显示（按顺序）/* color: function(params) { var colorList = ['#FFC0CB','#EFE42A','#64BD3D','#EE9201','#29AAE3', '#B74AE5','#0AAF9F','#E89589','#16A085','#4A235A','#C39BD3 ','#F9E79F','#BA4A00','#ECF0F1','#616A6B','#EAF2F8','#4A235A','#3498DB' ]; return colorList[params.dataIndex] } */},},data:money}]};//初始化echarts实例var myChart = echarts.init(document.getElementById('chartweek'));//使用制定的配置项和数据显示图表myChart.setOption(option);}});}//选择最近一周显示最近一周的消费情况 $('.aweek').on("click", function() {$("#myselect").empty();$("#myselect").css({'border':''});$("#chartmain").hide();$(".allNum").hide();$("#chartweek").show();$(".weekNum").show();getData();getOpen();})//获取每一年每个月的消费总额function getWeek(time){if(""==time){return;}$.ajax({url: "路径",data: {time:time},dataType: "json",success: function(data){$(".zongjije").text(data.moneyzonge);//获取每一年每个月的消费总额var mlist = eval('data.json2');var yuan = "元 ";var nianfen=[];//年份var mouthArry=[];//月份var moneyNum=[];//金额$.each(mlist,function(idx,obj){mouthArry.push(obj.merchants+"-"+obj.archivesname);moneyNum.push(obj.consummoney);nianfen.push(obj.merchants);});//指定图标的配置和数据var option = {title:{text:'财务汇总'},tooltip:{trigger: 'axis',axisPointer : { // 坐标轴指示器，坐标轴触发有效type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'}},legend:{data:['用户来源']},xAxis:{data:mouthArry},yAxis:{},series:[{name:'消费总额',type:'bar',//type改成bar为柱状图，改成line为曲线图label: {normal: {show: true,position: 'top'}},itemStyle: {normal: {// 随机显示color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}// 定制显示（按顺序）/* color: function(params) { var colorList = ['#FFC0CB','#EFE42A','#64BD3D','#EE9201','#29AAE3', '#B74AE5','#0AAF9F','#E89589','#16A085','#4A235A','#C39BD3 ','#F9E79F','#BA4A00','#ECF0F1','#616A6B','#EAF2F8','#4A235A','#3498DB' ]; return colorList[params.dataIndex] } */},},data:moneyNum}]};//初始化echarts实例var myChart = echarts.init(document.getElementById('chartmain'));//使用制定的配置项和数据显示图表myChart.setOption(option);}});}
