ECharts 使用实例

HTML与JavaScript代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"   pageEncoding="UTF-8"%>
<%@include file="../header.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>物联云仓 | 花果山</title>
<style>

    /*Base*/
    body {margin:0; padding:0; font-size:12px;font-family:"Microsoft YaHei","微软雅黑";}
    div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}
    li{list-style-type:none;}
    img{vertical-align:top;border:0;}
    ol,ul {list-style:none;}
    h1,h2,h3,h4,h5,h6 {font-size:12px; font-weight:normal;}
    a{text-decoration:none}
    a:hover{text-decoration:none;}
    .clear{clear:both;font-size:0px;}
    
    .n-chartinfo{margin:2%;}
    .n-chartinfo .rowchart{float:left;width:30%;margin-right:1.7%;margin-left:1.6%;}
    .n-chartinfo .rowchart dt{background:#5bb4d8;border-radius:16px 16px 0px 0px;display:block;height:130px;line-height:90px;text-align:center;color:#fff;font-weight:lighter;font-size:2.2em;}
    .n-chartinfo .rowchart em{position:absolute;z-index:11;margin-top:89px;margin-left:11%;}
    @media (min-width:900px){
    .n-chartinfo .rowchart em{position:absolute;z-index:11;margin-top:89px;margin-left:10.5%;}    
        }
    @media (min-width:1200px){
    .n-chartinfo .rowchart em{position:absolute;z-index:11;margin-top:89px;margin-left:11.5%;}    
        }
    @media (min-width:1400px){
    .n-chartinfo .rowchart em{position:absolute;z-index:11;margin-top:89px;margin-left:12%;}    
        }
    .n-chartinfo .rowchart dd{border:1px solid #e1e6ef;border-top:none;padding:50px 10px 10px 10px;}
    .n-chartinfo .rowchart dd li{height:60px;line-height:60px;border-bottom:1px dashed #e5ebf8;white-space:nowrap;overflow:hidden;}
    .n-chartinfo .rowchart dd li span{width:50%;display:inline-block;font-size:1.3em;font-weight:lighter;color:#6f7b91;}
    .n-chartinfo .rowchart dd li .text-right{text-align:right;width:40%;}
    .n-chartinfo .rowchart dd li .m-left{padding-left:3%;width:57%;}
    @media (min-width:1150px){
    .n-chartinfo .rowchart dd li span{width:50%;display:inline-block;font-size:1.4em;font-weight:lighter;color:#6f7b91;}
    .n-chartinfo .rowchart dd li .text-right{text-align:right;width:42%;}
    .n-chartinfo .rowchart dd li .m-left{padding-left:3%;width:55%;}
        }
    @media (min-width:1350px){
    .n-chartinfo .rowchart dd li span{width:50%;display:inline-block;font-size:1.6em;font-weight:lighter;color:#6f7b91;}
    .n-chartinfo .rowchart dd li .text-right{text-align:right;width:47%;}
    .n-chartinfo .rowchart dd li .m-left{padding-left:3%;width:50%;}
        }
    @media (min-width:1500px){
    .n-chartinfo .rowchart dd li span{width:50%;display:inline-block;font-size:1.8em;font-weight:lighter;color:#6f7b91;}
    .n-chartinfo .rowchart dd li .text-right{text-align:right;width:50%;}
    .n-chartinfo .rowchart dd li .m-left{padding-left:3%;width:47%;}
        }
    .n-chartinfo .rowchart dd li strong{font-weight:lighter;color:#fe5a5b;margin-right:15px;}
    .n-chartinfo .rowchart .red{background:#f47564;}
    .n-chartinfo .rowchart .green{background:#4fc2b9;}
    
    /*EchartBox*/
    .n-chartinfo .echartbox{margin-right:1.7%;margin-left:1.6%;border:1px solid #efecec;}
    .n-chartinfo .echartbox .title{background:#ededef;height:44px;border:1px solid #f6f7fb;line-height:44px;text-align:center;font-size:1.8em;font-weight:lighter;color:#444;}
    .n-chartinfo .echartbox .n-echart{border-top:1px solid #e3e5f1;padding:5px;}
</style>
</head>
 <script src="<%=staticUrl%>/dist/echarts.js"></script>
<body>

    <!--Chart-->
    <div class="n-chartinfo">
        <div class="rowchart">
            <dl>
                <em><img src="<%=staticUrl%>/images/n-wms-icon-yw.png"></em>
                <dt>待处理业务</dt>
                <dd>
                    <ul>
                        <li><span class="text-right">入库计划  :</span><span class="m-left"><strong id="WaitIntoSum">0</strong>单</span></li>
                        <li><span class="text-right">收货  :</span><span class="m-left"><strong id="WaitReceiveSum">0</strong>单</span></li>
                        <li><span class="text-right">出库确认  :</span><span class="m-left"><strong id="WaitOutSum">0</strong>单</span></li>
                    </ul>
                </dd>
            </dl>
        </div>
        <div class="rowchart">
            <dl>
                <em><img src="<%=staticUrl%>/images/n-wms-icon-sp.png"></em>
                <dt class="green">今日商品累计</dt>
                <dd>
                    <ul>
                        <li><span class="text-right">入库商品数  :</span><span class="m-left"><strong id="TodayIntoItemsSum">0</strong>件</span></li>
                        <li><span class="text-right">出库商品数  :</span><span class="m-left"><strong id="TodayOutItemsSum">0</strong>件</span></li>
                        <li><span class="text-right">库存商品数  :</span><span class="m-left"><strong id="TodayStockItemsSum">0</strong>件</span></li>
                    </ul>
                </dd>
            </dl>    
        </div>
        <div class="rowchart">
            <dl>
                <em><img src="<%=staticUrl%>/images/n-wms-icon-ck.png"></em>
                <dt class="red">仓库数量</dt>
                <dd>
                    <ul>
                        <li><span class="text-right">仓库数量总计  :</span><span class="m-left"><strong id="CWareSum">0</strong>个,货位<strong id="CWareLocationSum">0</strong>个</span></li>
                        <li><span class="text-right">正在使用  :</span><span class="m-left"><strong id="CWareLocationUsingSum">0</strong>个</span></li>
                        <li><span class="text-right">空闲 :</span><span class="m-left"><strong id="CWareLocationFreeSum">0</strong>个</span></li>
                    </ul>
                </dd>
            </dl> 
        </div>
        <div class="clear"></div>
    </div>
    
    <!--EchartBox-->
    <div class="n-chartinfo">
        <div class="echartbox">
            <div class="title">货位统计</div>
            <div id="locationChart" class="n-echart" style="height: 300px;">
                这里是Echart插件
            </div>
            <div class="title">仓库商品流转统计</div>
            <div id="itemChart" class="n-echart" style="height: 300px;">
                这里是Echart插件
            </div>
        </div>
    </div>
<script type="text/javascript">

$(document).ready(function(){
    loadCountWaitToProcessTasks();
    loadCountTodaysItems();
    loadCountWarehouseSituation();
    loadLocationChart();
    loadItemChart();
});

var loadCountWaitToProcessTasks=function(){
    $.get('charts/unProcessTasks.html',function(data){
        if(data){
            data=eval("("+data+")");
            $("#WaitIntoSum").html(data.intoPlanItemSum);
            $("#WaitReceiveSum").html(data.receiveItemSum);
            $("#WaitOutSum").html(data.outConfirmSum);
        }
    });
}
var loadCountTodaysItems=function(){
    $.get('charts/countItemsOfToday.html',function(data){
        if(data){
            data=eval("("+data+")");
            $("#TodayIntoItemsSum").html(data.intoItemSum);
            $("#TodayOutItemsSum").html(data.outItemSum);
            $("#TodayStockItemsSum").html(data.stockItemSum);
        }
    });
}
var loadCountWarehouseSituation=function(){
    $.get('charts/countWarehouseSituation.html',function(data){
        if(data){
            data=eval("("+data+")");
            $("#CWareSum").html(data.warehouseSum);
            $("#CWareLocationSum").html(data.locationSum);
            $("#CWareLocationUsingSum").html(data.usingLocationNum);
            $("#CWareLocationFreeSum").html(data.freeLocationNum);
        }
    });
}

var loadLocationChart=function(){
    var url = "charts/countWarehouseLocationUsing.html?&res="+Math.random();
    $.get(url,function(result){
        result=eval('('+result+')');
         // 路径配置
        require.config({
            paths: {
                echarts: '<%=staticUrl%>/dist'
            }
        });
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('locationChart'));
                var option = {
                    color:['#F47564','#E0E1E5'], 
                    title:{
                                text: ''//标题 
                    },
                    tooltip : {
                                trigger: 'axis',
                                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                }
                    },
                    legend: {
                        x:'left',
                        data:['已使用','未使用']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis : [
                        {
                            //axisLabel:{    interval:0}, //具体情况而定
                            type : 'category',
                            data : result.warehouseName
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                          {
                                name:'已使用', 
                             type:'bar',
                             stack: '搜索引擎',
                             itemStyle : { normal: {label : {show: true, position: 'inside'} }},
                             data:result.usingLocationNum
                          },
                          {
                            name:'未使用',
                            type:'bar',
                            stack: '搜索引擎',
                             itemStyle : { normal: {label : {show: true, position: 'inside'} }},
                            data:result.unUsinglocationSum
                          }
                    ]
                };
                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );
    });
}
var loadItemChart=function(){
    var url="charts/countItemstransfer.html?"+"&res="+Math.random();
   $.get(url,function(result){
        result=eval('('+result+')');
         // 路径配置
       require.config({
           paths: {
               echarts: '<%=staticUrl%>/dist'
           }
       });
       // 使用
       require(
           [
               'echarts',
               'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
           ],
           function (ec) {
               // 基于准备好的dom，初始化echarts图表
               var myChart = ec.init(document.getElementById('itemChart'));
               var option = {
                   color:['#5CB4D8','#FC773C','#49C543'], 
                      title:{
                            text: ''//标题 
                           },
                           tooltip : {
                               trigger: 'axis'
                           },
                   legend: {
                       x:'left',
                       data:['库存商品数','入库商品数','出库商品数'] 
                   },
                   xAxis : [
                        {
                            //axisLabel:{    interval:0}, //具体情况而定
                           type : 'category',
                           data :result.wmitDate
                       }
                   ],
                   yAxis : [
                       {
                           type : 'value'
                       }
                   ],
                   series : [
                      {
                           name:'库存商品数',
                            type:'bar',
                            itemStyle : { normal: {label : {show: true, position: 'top'}}},
                            data:result.wmitStockNum
                         },
                         {
                           name:'入库商品数',
                           type:'bar',
                           itemStyle : { normal: {label : {show: true, position: 'top'}}},
                           data:result.wmitIntoItemNum
                         },
                         {
                          name:'出库商品数',
                          type:'bar',
                          itemStyle : { normal: {label : {show: true, position: 'top'}}},
                          data:result.wmitOutItemNum
                       }
                   ]
               };
               // 为echarts对象加载数据 
               myChart.setOption(option); 
           }
       );
    });
}
</script>
</body>
</html>
View Code
运行实例效果图展示如下：
posted on 2016-01-13 17:03 boonya 阅读(692) 评论(0) 编辑收藏举报