JS实现柱状图、折线图

效果图：

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);
               
        }
    });
}