Echarts使用教程--标签式单文件引入

Echarts使用教程--标签式单文件引入

<#-- 页头 -->
<#assign currNav = "statistics">
<#assign pageTitle="每分钟最高在线观看人数查询">
<#include "/commons/header.ftl">

    <div class="container">
      <div class="row">
        <div class="col-md-2">
          <#assign sidebarNav = "viewers">
          <#include "/commons/channelSidebar.ftl">
        </div>
        <div class="col-md-10">
          <div class="panel panel-default">
            <div class="panel-heading">
              <#-- 统一头信息 -->
              <#include "/commons/channelPanelHeading.ftl">
            </div>
            <div class="panel-body">
              <form id="dateRangeForm" class="form-inline well well-sm" method="get">
                <div class="form-group">
                  <input type="text" id="currentDay" name="currentDay" value="${currentDay!''}" placeholder="请选择日期" class="form-control datepicker">
                </div>
                <div class="form-group">
                  <input type="text" id="sessionId" name="sessionId" value="${sessionId!''}" placeholder="直播场次" class="form-control">
                </div>
                <div class="form-group">
                  <input type="text" id="param1" name="param1" value="${param1!''}" placeholder="自定义参数1" class="form-control">
                </div>
                <div class="form-group">
                  <input type="text" id="param2" name="param2" value="${param2!''}" placeholder="自定义参数2" class="form-control">
                </div>
                <button class="btn btn-primary">查询</button>
              </form>
              
              <div id="chartDiv" style="width: 100%; height: 340px;"></div>	
              <div id="infodiv" style="margin-top: 24px;"></div> 
              <table class="table table-striped">
                <thead>
                  <tr>
                    <th>播放ID</th>
                    <th>播放时长</th>
                    <th>流量</th>
                    <th>直播场次</th>
                    <th>自定义参数1</th>
                    <th>观众IP</th>
                    <th>所在省份</th>
                    <th>所在城市</th>
                    <th>浏览器</th>
                    <th>是否为移动端</th>
                  </tr>
                </thead>
                <tbody>
                 <#if paginator.contents?has_content>
	                  <#list paginator.contents as s>
		                    <tr>
		                      <td>${s.playId}</td>
		                      <td>${s.playDuration}</td>
		                      <td>${s.flowSize}</td>
		                      <td>${s.sessionId!"-"}</td>
		                      <td>${s.param1!"-"}</td>
		                      <td>${s.ipAddress}</td>
		                      <td>${s.province}</td>
		                      <td>${s.city}</td>
		                      <td>${s.browser}</td>
		                      <td>${s.isMobile}</td>
		                    </tr>
	                  </#list>
                  </#if>
                </tbody>
              </table>
              
              <#-- 分页链接 -->
              <#if (paginator.totalPages > 1) >
                <div class="col-md-8 col-md-offset-4">
                  ${paginationHtml!""}
                </div>
              </#if>	
              
            </div> <!-- /panel-body -->
          </div>
          
        </div>
      </div>
      
    </div> <!-- /container -->



<#-- 页脚开始 -->
<#include "/commons/footerBegin.ftl">


<script type="text/javascript" src="/echarts/esl.js"></script>
<script src="/echarts/echarts-all.js"></script>
<script src="/datepicker/js/bootstrap-datepicker.js"></script>

<script>
  $(function(){
    $("input.datepicker").datepicker({format: "yyyy-mm-dd"}).on("changeDate", function(ev){
      $("input.datepicker").datepicker("hide");
    });
  });
</script>




<script type="text/javascript">
  
        var myChart = echarts.init(document.getElementById('chartDiv'));
        
			var option = {
			    tooltip : {
			        trigger: 'axis'
			    },
		        legend: {  
	                    data:['每分钟观看人数']  
                },
			    toolbox: {
			        show : false,
			        feature : {
			            mark : {show: true},
			            dataZoom : {show: true},
			            dataView : {show: true},
			            magicType : {show: true, type: ['line', 'bar']},
			            restore : {show: true},
			            saveAsImage : {show: true}
			        }
			    },
			    dataZoom : {
			        show : true,
			        realtime : true,
			        //orient: 'vertical',   // 'horizontal'
			        //x: 0,
			        //y: 36,
			        //width: 400,
			        height: 20,
			        //backgroundColor: 'rgba(221,160,221,0.5)',
			        //dataBackgroundColor: 'rgba(138,43,226,0.5)',
			        //fillerColor: 'rgba(38,143,26,0.6)',
			        //handleColor: 'rgba(128,43,16,0.8)',
			        //xAxisIndex:[],
			        //yAxisIndex:[],
			        start : 40,
			        end : 60
			    },
			    xAxis : [
			        {
			            type : 'category',
			            name:'(时间/分钟)',
			            boundaryGap : false,
			            data : function (){
			                var list = [];
			                var n = 0;
			                while (n++ < 150) {
			                    list.push(n);
			                }
			                return list;
			            }()
			        }
			    ],
			    yAxis : [
			        {
			            name:'(观看人数/人)',
			            type : 'value'
			        }
			    ],
			    series : [
			        {
			            name:'每分钟观看人数',
			            type:'line',
			            data:function (){
			                var list = [];
			                for (var i = 1; i <= 150; i++) {
			                    list.push(Math.round(Math.random()* 30));
			                }
			                return list;
			            }()
			        }
			    ],
			    calculable:false
			};
                     
        
        // 为echarts对象加载数据   
        myChart.setOption(option); 
      
  </script> 


<#-- 页脚结束 -->
<#include "/commons/footerEnd.ftl">
<#-- 页头 -->
<#assign