1. 程式人生 > >echarts 柱狀圖頁面程式碼(備忘)

echarts 柱狀圖頁面程式碼(備忘)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>發票資料統計</title>
    <!-- 引入 echarts.js -->
    <script src="aceadmin/components/echarts/dist/echarts.js"></script>
    <style type="text/css">
   
.search_panel{
    margin-left : 80px;
    }
    </style>
</head>
<body>
<div class="search_panel">
<form>
<div class="widget-main row">
<div class="search_elm">
<label class="label_search"> 開票時間:</label>
<div class="input-group input-daterange">
<input id = "sTime" name="sTime"  type="text" class="date starttime2" data-date-format="yyyy-mm-dd" placeholder="起始時間">
<span class="input-group-addon ddcont"><i class="fa fa-exchange"></i></span>
<input id = "eTime" name="eTime"  type="text" class="date endtime2" data-date-format="yyyy-mm-dd" placeholder="結束時間">
</div>
</div>
<div class="search_elm">
<button class="btn btn-small btn-base" id = "btnSubmit" type="button" title="搜尋">搜尋</button>
<button class="btn btn-small" type="reset" title="清空">清空</button>
</div>
</div>
</form>
</div>
    <!-- 為ECharts準備一個具備大小(寬高)的Dom -->
    <div id="main" style="width: 1366px;height:600px;"></div>
    <script type="text/javascript">
    $(function(){
$(".starttime2").datetimepicker({
language: 'zh-CN',
autoclose: true,
minView: 2,
todayHighlight: true,
keyboardNavigation:true,
clearBtn: true,
todayBtn:  1,
forceParse:true
}).on('changeDate',function(ev){
var starttime=$('.starttime2').val();
$('.endtime2').datetimepicker('setStartDate',starttime)
$('.starttime2').datetimepicker('hide')
});
$(".endtime2").datetimepicker({
language: 'zh-CN',
autoclose: true,
minView: 2,
todayHighlight: true,
keyboardNavigation:true,
clearBtn: true,
todayBtn:  1,
forceParse:true
}).on('changeDate',function(ev){
var starttime=$('.starttime2').val();
var endtime=$('.endtime2').val();
if(starttime!=""){
$('.starttime2').datetimepicker('setEndDate',endtime)
$('.endtime2').datetimepicker('hide')
}else{
$('.endtime2').val('');
layer.msg("請選擇開始時間");
}
})
})

$(document).ready(function() {
   initEchart(1);
})
   
    $("#btnSubmit").click(function () {
        initEchart(2);
    });
    
    //初始化echarts flag : 1 進入圖表,不選擇時間  2 選擇時間
    function initEchart(flag){
      require.config({
    paths : {
      echarts : 'aceadmin/components/echarts/dist'
       }
   });
 require([ 'echarts',
           'echarts/chart/bar',
           'echarts/chart/line'
         ], function(ec) {
    myChart = ec.init(document.getElementById('main'));
   decideEchart(flag);
      });  
    }
    
    //判斷當選擇日期時,如果時間為空做出判斷
    function decideEchart(flag){
        var beginDate = $('#sTime').val(); 
   var endDate = $('#eTime').val();
   var al = {
     "beginDate" : beginDate,
   "endDate" : endDate
         }
        if(flag == 2){
       if(beginDate==null||endDate==null||beginDate==""||endDate==""){
    layer.alert("日期不能為空 !");
    return false;
  }
        }
  myChart.showLoading({
text : "正在載入..."
   });
  doEcharts(al);
    }
    
    //非同步獲取後臺的資料
    function doEcharts(al){
         $.ajax({
      type : "post",
      async : false, //同步執行  
      url : "invDataCount.do",
      dataType : "json", //返回資料形式為json 
      data : {"data" : JSON.stringify(al)},
      success : function(result) {
        if (result) {
          //定義圖表options 
          var option = {
            title : {
              text :result.title,
              subtext : result.subTitle
            },
        
            tooltip : {
              trigger : 'axis'
            },
          toolbox : {
              show : true,
              feature : {
                mark : {
                  show : true
                },
                dataView : {
                  show : true,
                  readOnly : false
                },
                magicType : {
                  show : true,
                  type : [ 'line', 'bar' ]
                },
                restore : {
                  show : true
                },
              saveAsImage : {
                  show : true
                }
              }
            },
            calculable : true,
            legend : {
              data : result.legend//資料分組
            },
            xAxis : [ {
              type : 'category',
              data : result.category,//橫座標
              axisLabel:
              {rotate: 20 , interval: 0 ,textStyle:{ color: '#333',fontSize:14}},
            } ],
            yAxis : [ {
              type : 'value'
            } ],
            series : [{//縱座標
              name : result.series[0].name,
              type : result.series[0].type,
              data : result.series[0].data
            }]
          };
           myChart.hideLoading();
           myChart.setOption(option);
         
        }
     },
     error : function(errorMsg) { 
         layer.alert("請求資料失敗!");
       myChart.hideLoading();
     }
   });
    }
    </script>
</body>
</html>