数据报表dpap数据可视化展示

时间：2017-10-12 13:02:00 阅读：1684 评论：0 收藏：0 [点我收藏+]

标签：add vertica class com pap toolbox int asi 5.5

数据报表dpap数据可视化展示平台

技术分享

上代码  引入的js都用的外部资源  因为引入 China还有 word.j是刷新的静态资源怎么都不出地图 下面是html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>WMS报表设计</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/build.css">
    <link rel="stylesheet" href="./css/nice-select.css">
    <link type="favicon" rel="shortcut icon" href="favicon.ico"/>
    <script type="text/javascript" src="./lib/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="./lib/echarts.js"></script>
    <script type="text/javascript" src="./lib/nice-select.js"></script>
    <!-- 外部资源引入 -->
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
    <!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script> -->
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
  </head>
  <body>
    <div id="reportcontainer" class="">
      <!-- 头部 -->
      <div class="sport-header">
        <div class="sportform-left-time" id="imgreset"></div>
        <button class="sportform-rigth-see" onclick="seeMore()">
          <img src="./img/header/head-right.png" >
        </button>
      </div>
      <!-- 左侧  -->
      <div class="sport-left">
  <!--  今日出库订单-->
        <div class="sport-left-header">
          <p><img src="./img/text/todayOutReder.png" ></p>
        </div>
        <!-- 进度条统一样式  单量-->
        <div class="model-qu">
          <img src="./img/text/singleq.png" alt="单量" style="display: inline-block;float: left;height: 15px;margin: 6px 0 0 2px;">
          <div id="singleq" class=""></div>
        </div>
        <div class="model-quality">
          <div class="model-quality-left">

          </div>
          <div class="model-quality-right">

          </div>
        </div>
        <!-- 进度条统一样式  件数-->
        <div class="model-qu">
          <img src="./img/text/piece.png" alt="件数" style="display: inline-block;float: left;height: 15px;margin: 6px 0 0 2px;">
          <div class="pieceOutq"></div>
        </div>
        <div class="model-piece">
          <div class="model-piece-left"></div>
          <div class="model-piece-right"></div>
        </div>
  <!--  今日入库订单-->
        <div class="sport-left-header">
          <p><img src="./img/text/todayInOrder.png" ></p>
        </div>
        <!-- 进度条统一样式  单量-->
        <div class="model-qu">
          <img src="./img/text/singleq.png" alt="单量" style="display: inline-block;float: left;height: 15px;margin: 6px 0 0 2px;">
          <div class="singleql" class=""></div>
        </div>
        <div class="model-quality order-in-q">
          <div class="model-quality-left order-in-ql">

          </div>
          <div class="model-quality-right order-in-qr">

          </div>
        </div>
        <!-- 进度条统一样式  件数-->
        <div class="model-qu">
          <img src="./img/text/piece.png" alt="件数" style="display: inline-block;float: left;height: 15px;margin: 6px 0 0 2px;">
          <div class="pieceInq"></div>
        </div>
        <div class="model-piece order-in-p">
          <div class="model-piece-left order-in-pl"></div>
          <div class="model-piece-right order-in-pr"></div>
        </div>
        <!-- 出库 入库 趋势 -->
        <div class="sport-left-header">
          <p><img src="./img/text/tendents.png" ></p>
        </div>
        <div class="" id="ordertrend">

        </div>
      </div>
  <!--  地图-->
      <div class="sport-map">
        <select id="selects">
          <option value="0">北京通州仓1</option>
          <option value="1">上海通州仓2</option>
          <option value="2">广州通州仓3</option>
        </select>
        <div id="sportformMap" class="" style="width:720px;height:606px;background:null!important">

        </div>
      </div>
      <div class="sport-right">
        <div class="sport-right-top">
          <!-- 当前库存件数 -->
          <div class="sport-left-header">
            <p><img src="./img/text/nowquality.png" ></p>
          </div>
          <div class="now-Number"></div>
          <div class="" id="nowquality">
          </div>
        </div>
        <div class="sport-right-center">
          <div class="sport-left-header">
            <p><img src="./img/text/woreHose.png" ></p>
            <div class="woreHosePersent"> </div>
          </div>
        </div>
        <div class="sport-right-bottom">
          <div class="sport-left-header">
            <p><img src="./img/text/worehosetime.png" ></p>
            <div class="woreHoseTime"></div>
          </div>
        </div>
      </div>
      <div class="sport-bottom">
        <div class="sport-bottom-left">
          <div class="model-qu">
            <img src="./img/text/share.png" alt="承运份额" style="display: inline-block;float: left;height:15px;margin: 6px 0 0 2px;">
            <div class="depponShare"></div>
          </div>
          <div class="model-share">
            <div class="model-share-left">

            </div>
            <div class="model-share-right">

            </div>
          </div>
          <div class="model-share-line">

          </div>
        </div>
        <div class="sport-bottom-center">
          <div class="sport-left-header">
            <p><img src="./img/text/warning.png" ></p>
          </div>
          <div class="warning-message">

          </div>
        </div>
      </div>

    </div>
  </body>
  <script type="text/javascript" src="./js/build.js"></script>
  <script type="text/javascript">
  $(‘select‘).niceSelect();
    function seeMore(){
      alert(‘查看更多‘);
    }
  </script>
</html>

下面是css

body{
  position: relative;
  width: 100%;
  height:1024px;
  background: url(‘../img/reportbackbig.png‘) no-repeat;
  background-size: 100% 100%;
}
#reportcontainer{
  position: absolute;
  width: 1280px;
  /*height: 900px;*/
  left:50%;
  /*top: 50%;*/
  margin-left: -640px;
  /*margin-top: -450px;*/
}
.sport-header{
  position: relative;
  width: 100%;
  height: 134px;
  background: url(../img/header/head.png);
}
.sportform-left-time{
  position: absolute;
  top: 70px;
  left: 10px;
  color: #fff;
}
#imgreset img{
  height: 18px;
  width: 12px;
  margin-left: 1px;
  display: inline-block;
}
.sportform-rigth-see{
  background: url(../img/header/head-right.png);
  position: absolute;
  border: none;
  top: 75px;
  right: 82px;
}
.sport-left{
  float: left;
  /*border:1px solid rgba(30,176,255,0.30);*/
  background: url(../img/border/home/zuo1.png);
  width:260px;
  height:606px;
  margin: 24px 0 0 10px;
  /*//border-radius: 0 25px 0 10;*/
  padding: 0px 8px;
  position: relative;
}
#sportformMap{
  float: left;
}
.sport-left-header{
  height: 36px;
  padding-top: 12px;
  /*line-height: 36px;*/
  border-right:36px dotted transparent;
}
.model-qu{
  height: 24px;
  /*padding: 6px;*/
  /*width: 160px;*/
  text-align: right;
  margin-top: 12px;
}
.model-qu>div>img{
  height: 15px;
  /*width: 12px;*/
  display: inline-block;
  margin-left: 1px;
}
.model-qu img{
  /*height: 15px;*/
  /*width: 12px;*/
  /*display: inline-block;*/
  margin-left: 1px;
}
img{
  margin-left: 1px;
}
.model-quality{
  background:rgba(89,135,251,0.30);
  border:1px solid #5987fb;
  //border-radius:2px;
  width:241px;
  height:32px;
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  position: relative;
  margin-top: 12px;
}
.model-quality-left{
  background-image:linear-gradient(90deg, rgba(89,135,251,0.75) 0%, rgba(100,153,250,0.50) 100%);
  box-shadow:0 2px 4px 0 rgba(0,0,0,0.50);
  //border-radius:2px;
  /*width:121px;*/
  height:30px;
}
.model-quality-right{
  padding-top: 2px;
  padding-right: 4px;
  text-align: right;
  position: absolute;
  right: 0;
}
.model-quality-right img{
  height: 16px;
  /*float: right;*/
}
.model-piece{
  background:rgba(30,176,255,0.30);
  border:1px solid #1eb0ff;
  //border-radius:2px;
  width:241px;
  height:32px;
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}
.model-piece-left{
  background-image:linear-gradient(90deg, rgba(57,186,255,0.75) 2%, rgba(89,170,255,0.50) 100%);
  box-shadow:0 2px 4px 0 rgba(0,0,0,0.50);
  //border-radius:2px;
  width:150px;
  height:30px;
}
.model-piece-right{
  position: absolute;
  right: 0;
  padding-top: 2px;
  padding-right: 4px;
  text-align: right;
  white-space: normal;
}
.model-piece-right img{
  height: 16px;
  /*float: right;*/
}
.order-in-q{
  background:rgba(255,171,135,0.30);
  border:1px solid #ffab87;
}
.order-in-ql{
  background-image:linear-gradient(90deg, rgba(255,171,135,0.75) 0%, rgba(254,177,166,0.50) 100%);
  box-shadow:0 2px 4px 0 rgba(0,0,0,0.50);
}
.order-in-p{
  background:rgba(255,192,145,0.30);
  border:1px solid #ffc091;
}
.order-in-pl{
  background-image:linear-gradient(90deg, rgba(255,192,145,0.75) 5%, rgba(255,226,177,0.50) 100%);
  box-shadow:0 2px 4px 0 rgba(0,0,0,0.50);
}
#ordertrend{
  margin-top: 16px;
  /*border:1px solid #1eb0ff;*/
  /*box-shadow:0 1px 8px 0 rgba(30,176,255,0.50);*/
  position: absolute;
  bottom: 0;
  right: 12px;
  padding-right: 6px;
  width:260px;
  margin-right: -14px;
  height:218px;
}
.sport-map{
  position: relative;
  left: 8px;
  width: 716px;
  height: 606px;
  float: left;
  margin-top: 16px;
}
#selects{
  position: absolute;
  z-index: 99;
  top: 10px;
  left: 10px;
  width: 200px;
  height: 38px;
  font-size: 16px;
  padding-left: 10px;
  padding-right: 10px;
  background: none;
  color:#1eb0ff;
  border: none;
  background: url(../img/border/home/select.png);
}
.nice-select{
  top: 10px;
}
.sport-right{
  float: right;
  /*border:1px solid rgba(30,176,255,0.30);*/
  width:258px;
  height:766px;
  margin: 24px 10px 0 0;
  position: relative;
}
.sport-right-top{
  padding: 0px 8px;
  position: absolute;
  top: 0;
  /*border:1px solid rgba(30,176,255,0.30);*/
  background: url(../img/border/home/you12.png);
  width:260px;
  height:244px;
  /*//border-radius: 0 25px 0 0;*/
}
.sport-right-center{
  padding: 0px 8px;
  position: absolute;
  top: 256px;
  /*border:1px solid rgba(30,176,255,0.30);*/
  background: url(../img/border/home/you12.png);
  width:260px;
  height:244px;
  /*//border-radius: 0 25px 0 0;*/
}
.sport-right-bottom{
  padding: 0px 8px;
  position: absolute;
  top: 512px;
  /*border:1px solid rgba(30,176,255,0.30);*/
  background: url(../img/border/home/you12.png);
  width:260px;
  height:244px;
  /*//border-radius: 0 25px 0 0;*/
}
.now-Number{
  margin-top: 6px;
}
#nowquality{
  margin-top: 6px;
  /*border:1px solid #1eb0ff;*/
  /*box-shadow:0 1px 8px 0 rgba(30,176,255,0.50);*/
  position: absolute;
  top: 16px;
  right: 12px;
  /*padding-right: 6px;*/
  margin-right: -9px;
  width:256px;
  height:218px;
}
.woreHosePersent{
  margin-top: 6px;
  position: absolute;
  top: 16px;
  right: -42px;
  /*padding-right: 6px;*/
  width:340px;
  height:286px;
}
.woreHoseTime{
  /*margin-top: 6px;*/
  position: absolute;
  top: -6px;
  right: -10px;
  width:340px;
  height:286px;
}
.sport-bottom{
  float: left;
  /*border:1px solid rgba(30,176,255,0.30);*/
  width:990px;
  height:138px;
  margin: 12px 0 0 10px;
  position: relative;
}
.sport-bottom-left{
  position: relative;
  float: left;
  /*border:1px solid rgba(30,176,255,0.30);*/
  /*//border-radius: 0 25px 0 0;*/
  background: url(../img/border/home/zuo2.png);
  width:260px;
  height:138px;
  padding: 0 8px;
}
.model-share{
  background:rgba(30,192,255,0.30);
  border:1px solid #5987fb;
  //border-radius:2px;
  width:241px;
  height:32px;
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  position: relative;
  margin-top: 12px;
}
.model-share-left{
  background-image:linear-gradient(90deg, rgba(30,192,255,0.75) 2%, rgba(33,161,255,0.50) 98%);
  box-shadow:0 2px 4px 0 rgba(0,0,0,0.50);
  //border-radius:2px;
  /*width:121px;*/
  height:30px;
}
.model-share-right{
  padding-top: 2px;
  padding-right: 4px;
  text-align: right;
  position: absolute;
  right: 0;
}
.model-share-line{
  position: absolute;
  /*border: 1px solid red;*/
  top: 86px;
  right:-16px;
  /*margin-left: 12px;*/
  width:286px;
  height:56px;
}
.sport-bottom-center{
  position: relative;
  float: left;
  /*border:1px solid rgba(30,176,255,0.30);
  //border-radius: 0 25px 0 0;*/
  background: url(../img/border/home/zhong.png);
  width:720px;
  height:138px;
  margin-left: 10px;
  padding: 0 6px;
}
.warning-message{
  color: #fff;
}
.warning-message p {
  height: 26px;
  line-height: 26px;
  font-size: 14px;
}
.warning-message p span:last-child{
  float: right;
}
.warning-message img{
  position: absolute;
  margin-left: 50%;
  left: -16px;
  margin-top: 24px;
}
.now-Number>.dian{
  margin-top: 18px!important;
  height: 6px!important;
}
.now-Number>.code{
  margin-top: 18px!important;
  height: 12px!important;
  width: 6px!important;
}

　　css有点多可以看着自己写

下面是js

/*
  made by shangtiepeng 483014
*/

(function(){
  //头部时间
  function getImg(val) {
  	var len=val.length;
  	var images="";
  	for (var i = 0; i < len; i++) {
  		var num=val.substr(i,1);

  		switch(num){
  			case ‘0‘ :
  				images += "<img src=‘./img/header/0.png‘ />";
  			break;

  			case ‘1‘ :
  				images += "<img src=‘./img/header/1.png‘ />";
  			break;

  			case ‘2‘:
  				images += "<img src=‘./img/header/2.png‘ />";
  			break;

  			case ‘3‘ :
  				images += "<img src=‘./img/header/3.png‘ />";
  			break;

  			case ‘4‘ :
  				images += "<img src=‘./img/header/4.png‘ />";
  			break;

  			case ‘5‘ :
  				images += "<img src=‘./img/header/5.png‘ />";
  			break;

  			case ‘6‘ :
  				images += "<img src=‘./img/header/6.png‘ />";
  			break;

  			case ‘7‘:
  				images += "<img src=‘./img/header/7.png‘ />";
  			break;

  			case ‘8‘:
  				images += "<img src=‘./img/header/8.png‘ />";
  			break;

  			case ‘9‘ :
  				images += "<img src=‘./img/header/9.png‘ />";
  			break;


  		}
  	}
  	return images;

  }

  function times() {
  	var dv=document.getElementById(‘imgreset‘);
  	var date=new Date();
  	var year=date.getFullYear()+"";
  	var months=date.getMonth()+1;
  	months=months<10?‘0‘+months:months+"";
  	var day =date.getDate();
  	day=day<10?‘0‘+day:day+"";
  	var hours=date.getHours();
  	hours=hours<10?‘0‘+hours:hours+"";
  	var minutes=date.getMinutes();
  	minutes=minutes<10?‘0‘+minutes:minutes+"";
  	var seconds=date.getSeconds();
  	seconds=seconds<10?‘0‘+seconds:seconds+"";
    // console.log(seconds.length);
  	dv.innerHTML = getImg(year)+‘<img style="width:16px;" src="./img/header/year.png"/>‘+ getImg(months)+‘<img style="width:16px;" src="./img/header/mouth.png"/>‘+getImg(day)+‘<img style="width:16px;margin-right:22px;" src="./img/header/day.png"/>‘ +‘‘+ getImg(hours)+‘<img style="width:12px;" src="./img/header/mao.png"/>‘+ getImg(minutes)+‘<img style="width:12px;" src="./img/header/mao.png"/>‘+ getImg(seconds);
  }

  // console.log(times());
  function autoadd(){
    // console.log("111");
    // clearInterval(interval);
    times();
  }
  var interval;
  interval=setInterval(autoadd,1000);


  //转换白色数字
  function getImgW(val) {
  	var len=val.length;
  	var images="";
  	for (var i = 0; i < len; i++) {
  		var num=val.substr(i,1);

  		switch(num){
  			case ‘0‘ :
  				images += "<img src=‘./img/resetnumber/0.png‘ />";
  			break;

  			case ‘1‘ :
  				images += "<img src=‘./img/resetnumber/1.png‘ />";
  			break;

  			case ‘2‘:
  				images += "<img src=‘./img/resetnumber/2.png‘ />";
  			break;

  			case ‘3‘ :
  				images += "<img src=‘./img/resetnumber/3.png‘ />";
  			break;

  			case ‘4‘ :
  				images += "<img src=‘./img/resetnumber/4.png‘ />";
  			break;

  			case ‘5‘ :
  				images += "<img src=‘./img/resetnumber/5.png‘ />";
  			break;

  			case ‘6‘ :
  				images += "<img src=‘./img/resetnumber/6.png‘ />";
  			break;

  			case ‘7‘:
  				images += "<img src=‘./img/resetnumber/7.png‘ />";
  			break;

  			case ‘8‘:
  				images += "<img src=‘./img/resetnumber/8.png‘ />";
  			break;

  			case ‘9‘ :
  				images += "<img src=‘./img/resetnumber/9.png‘ />";
  			break;

        case ‘.‘ :
  				images += "<img style=‘margin-top:10px;height:4px;‘ class=‘dian‘ src=‘./img/resetnumber/dian.png‘ />";
  			break;
        case ‘,‘ :
  				images += "<img style=‘margin-top:10px;height:8px;width:4px‘ class=‘code‘ src=‘./img/resetnumber/code.png‘ />";
  			break;
        case ‘%‘ :
  				images += "<img src=‘./img/resetnumber/persent.png‘ />";
  			break;
  		}
  	}
  	return images;

  }
  //数字倒序每隔三位 加逗号
  function codeFn(n){  
       var b=parseInt(n).toString();  
       var len=b.length;  
       if(len<=3){return b;}  
       var r=len%3;  
       return r>0?b.slice(0,r)+","+b.slice(r,len).match(/\d{3}/g).join(","):b.slice(r,len).match(/\d{3}/g    ).join(",");  
  }  
  // console.log(codeFn(2222222));
  //今日出库订单 单量...............................................。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
  function persentcode() {
  	var dv=document.getElementById(‘singleq‘);
  	dv.innerHTML = getImgW(a);
  }
  //出库单量所占百分比

  var a = 52.11+"%";      //出库单量接口  百分比字符串。。。。。。。。。。
  persentcode(a);
  // console.log();
  $(‘.model-quality-left‘)[0].style.width = parseFloat(a)/100*240+"px";
  function persentNumber() {
    var dv=$(‘.model-quality-right‘)[0];
    // console.log(aNumber);
    dv.innerHTML = getImgW(aNumber);
  }
  var aNumber = 621535+"";  //出库件数接口  数字字符串。。。。。。。。。。。。。
  aNumber = codeFn(aNumber);//每隔三位倒序加逗号
  persentNumber(aNumber);
  //件数//出库件数所占百分比 ...............................................
  function persentoutpiece() {
  	var dv=$(‘.pieceOutq‘)[0];
    // console.log(dv);
  	dv.innerHTML = getImgW(b);
  }
  var b = 70.1+"%";      //出库件数接口  百分比字符串。。。。。。。。。。
  persentoutpiece(b);

  $(‘.model-piece-left‘)[0].style.width = parseFloat(b)/100*240+"px";
  function pieceNumber() {
    var dv=$(‘.model-piece-right‘)[0];
    // console.log(bNumber);
    dv.innerHTML = getImgW(bNumber);
  }
  var bNumber = 59989855578+"";     //出库件数接口  数字字符串。。。。。。。。。。。。。
  bNumber = codeFn(bNumber);//每隔三位倒序加逗号
  pieceNumber(bNumber);

  //入库订单  。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
  //今日入库订单 单量...............................................
  function persentIncode() {
  	var dv=$(‘.singleql‘)[0];
  	dv.innerHTML = getImgW(c);
  }
  //出库单量所占百分比

  var c = 32.11+"%";      //入库单量接口  百分比字符串。。。。。。。。。。
  persentIncode(c);
  // console.log();
  $(‘.order-in-ql‘)[0].style.width = parseFloat(c)/100*240+"px";
  function persentInNumber() {
    var dv=$(‘.order-in-qr‘)[0];
    // console.log(cNumber);
    dv.innerHTML = getImgW(cNumber);
  }
  var cNumber = 233335+"";  //入库件数接口  数字字符串。。。。。。。。。。。。。
  cNumber = codeFn(cNumber);//每隔三位倒序加逗号
  persentInNumber(cNumber);
  //件数//出库件数所占百分比 ...............................................
  function persentpiece() {
  	var dv=$(‘.pieceInq‘)[0];
  	dv.innerHTML = getImgW(d);
  }
  var d = 76.21+"%";      //入库件数接口  百分比字符串。。。。。。。。。。
  persentpiece(d);

  $(‘.order-in-pl‘)[0].style.width = parseFloat(b)/100*240+"px";
  function pieceInNumber() {
    var dv=$(‘.order-in-pr‘)[0];
    // console.log(dNumber);
    dv.innerHTML = getImgW(dNumber);
  }
  var dNumber = 5855578+"";     //入库件数接口  数字字符串。。。。。。。。。。。。。
  dNumber = codeFn(dNumber);//每隔三位倒序加逗号
  pieceInNumber(dNumber);

  //出库入库趋势。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
  var myDate = new Date(); //获取今天日期
  myDate.setDate(myDate.getDate() - 7);
  var dateArray = []; //今天之前七天日期的数组
  var dateTemp;
  var flag = 1;
  for (var i = 0; i < 7; i++) {
    dateTemp =  myDate.getDate();
    dateArray.push(dateTemp);
    myDate.setDate(myDate.getDate() + flag);
  } 
  function orderTrendFn(){
      var orderTrend = echarts.init(document.getElementById(‘ordertrend‘));
          // console.log(dateArray);
      var optiontrend = {
        // title: {
        //     text: ‘出库入库趋势‘
        // },
        tooltip : {
            trigger: ‘axis‘,
            backgroundColor:‘rgba(30,176,255,0.50)‘,
            axisPointer: {
                type: ‘cross‘,
                label: {
                    backgroundColor: ‘#6a7985‘
                }
            }
        },
        // toolbox: {
        //     feature: {
        //         saveAsImage: {}
        //     }
        // },
        grid: {
            left: ‘3%‘,
            right: ‘4%‘,
            bottom: ‘3%‘,
            containLabel: true
        },
        xAxis : [
            {
                type : ‘category‘,
                boundaryGap : false,
                data : dateArray,//底部坐标数组,
                axisLine:{  
                        lineStyle:{  
                            color:‘#1eb0ff‘,  
                            width:1  
                        }  
                    },   
                axisTick:{
                  show:false
                }
            },
        ],
        yAxis : [
            {
                type : ‘value‘,
                axisLabel : { 
                         formatter : ‘‘ 
                    }, 
                axisLine:{  
                    lineStyle:{  
                        color:‘rgba(30,176,255,0.30)‘,  
                        width:0
                    }  
                },
                  axisTick:{
                    show:false
                },
                splitLine:{//网格线
                    show:true,
                    lineStyle:{
                        color:[‘rgba(30,176,255,0.30)‘],
                        type:‘solid‘
                    }
                },
      
            }
        ],
        series : [
            {
                name:‘出库‘,
                type:‘line‘,
                stack: ‘总量‘,
                itemStyle : {    
                        normal : {  
                            color:‘rgba(89,135,251,0.3)‘,  
                            lineStyle:{    
                                color:‘rgba(89,135,251)‘    
                            }   
                        }    
                    },    
                areaStyle: {normal: {
                  color:‘rgba(89,135,251,0.30)‘
                }},
                data:[120, 132, 101, 134, 90, 230, 210]  //出库数据
            },

            {
                  name:‘入库‘,
                  type:‘line‘,
                  stack: ‘总量‘,
                  itemStyle : {    
                        normal : {   
                            color:‘rgbreda(255,192,145,0.75)‘, 
                            lineStyle:{    
                                color:‘rgba(255,192,145,0.75)‘    
                            }   
                        }    
                    },    
                  areaStyle: {normal: {
                    color:‘rgba(255,192,145,0.75)‘
                  }},
                  data:[150, 232, 201, 154, 190, 330, 410]
              },
        ]
      };
    orderTrend.setOption(optiontrend);

  };
  orderTrendFn();


  //地图
  var dom = document.getElementById("sportformMap");
  // console.log(echarts.init);
  var mySportMap = echarts.init(dom);
  var app = {};
  option = null;
  var geoCoordMap = {
      ‘上海‘: [121.4648,31.2891],
      ‘东莞‘: [113.8953,22.901],
      ‘东营‘: [118.7073,37.5513],
      ‘中山‘: [113.4229,22.478],
      ‘临汾‘: [111.4783,36.1615],
      ‘临沂‘: [118.3118,35.2936],
      ‘丹东‘: [124.541,40.4242],
      ‘丽水‘: [119.5642,28.1854],
      ‘乌鲁木齐‘: [87.9236,43.5883],
      ‘佛山‘: [112.8955,23.1097],
      ‘保定‘: [115.0488,39.0948],
      ‘兰州‘: [103.5901,36.3043],
      ‘包头‘: [110.3467,41.4899],
      ‘北京‘: [116.4551,40.2539],
      ‘北海‘: [109.314,21.6211],
      ‘南京‘: [118.8062,31.9208],
      ‘南宁‘: [108.479,23.1152],
      ‘南昌‘: [116.0046,28.6633],
      ‘南通‘: [121.1023,32.1625],
      ‘厦门‘: [118.1689,24.6478],
      ‘台州‘: [121.1353,28.6688],
      ‘合肥‘: [117.29,32.0581],
      ‘呼和浩特‘: [111.4124,40.4901],
      ‘咸阳‘: [108.4131,34.8706],
      ‘哈尔滨‘: [127.9688,45.368],
      ‘唐山‘: [118.4766,39.6826],
      ‘嘉兴‘: [120.9155,30.6354],
      ‘大同‘: [113.7854,39.8035],
      ‘大连‘: [122.2229,39.4409],
      ‘天津‘: [117.4219,39.4189],
      ‘太原‘: [112.3352,37.9413],
      ‘威海‘: [121.9482,37.1393],
      ‘宁波‘: [121.5967,29.6466],
      ‘宝鸡‘: [107.1826,34.3433],
      ‘宿迁‘: [118.5535,33.7775],
      ‘常州‘: [119.4543,31.5582],
      ‘广州‘: [113.5107,23.2196],
      ‘廊坊‘: [116.521,39.0509],
      ‘延安‘: [109.1052,36.4252],
      ‘张家口‘: [115.1477,40.8527],
      ‘徐州‘: [117.5208,34.3268],
      ‘德州‘: [116.6858,37.2107],
      ‘惠州‘: [114.6204,23.1647],
      ‘成都‘: [103.9526,30.7617],
      ‘扬州‘: [119.4653,32.8162],
      ‘承德‘: [117.5757,41.4075],
      ‘拉萨‘: [91.1865,30.1465],
      ‘无锡‘: [120.3442,31.5527],
      ‘日照‘: [119.2786,35.5023],
      ‘昆明‘: [102.9199,25.4663],
      ‘杭州‘: [119.5313,29.8773],
      ‘枣庄‘: [117.323,34.8926],
      ‘柳州‘: [109.3799,24.9774],
      ‘株洲‘: [113.5327,27.0319],
      ‘武汉‘: [114.3896,30.6628],
      ‘汕头‘: [117.1692,23.3405],
      ‘江门‘: [112.6318,22.1484],
      ‘沈阳‘: [123.1238,42.1216],
      ‘沧州‘: [116.8286,38.2104],
      ‘河源‘: [114.917,23.9722],
      ‘泉州‘: [118.3228,25.1147],
      ‘泰安‘: [117.0264,36.0516],
      ‘泰州‘: [120.0586,32.5525],
      ‘济南‘: [117.1582,36.8701],
      ‘济宁‘: [116.8286,35.3375],
      ‘海口‘: [110.3893,19.8516],
      ‘淄博‘: [118.0371,36.6064],
      ‘淮安‘: [118.927,33.4039],
      ‘深圳‘: [114.5435,22.5439],
      ‘清远‘: [112.9175,24.3292],
      ‘温州‘: [120.498,27.8119],
      ‘渭南‘: [109.7864,35.0299],
      ‘湖州‘: [119.8608,30.7782],
      ‘湘潭‘: [112.5439,27.7075],
      ‘滨州‘: [117.8174,37.4963],
      ‘潍坊‘: [119.0918,36.524],
      ‘烟台‘: [120.7397,37.5128],
      ‘玉溪‘: [101.9312,23.8898],
      ‘珠海‘: [113.7305,22.1155],
      ‘盐城‘: [120.2234,33.5577],
      ‘盘锦‘: [121.9482,41.0449],
      ‘石家庄‘: [114.4995,38.1006],
      ‘福州‘: [119.4543,25.9222],
      ‘秦皇岛‘: [119.2126,40.0232],
      ‘绍兴‘: [120.564,29.7565],
      ‘聊城‘: [115.9167,36.4032],
      ‘肇庆‘: [112.1265,23.5822],
      ‘舟山‘: [122.2559,30.2234],
      ‘苏州‘: [120.6519,31.3989],
      ‘莱芜‘: [117.6526,36.2714],
      ‘菏泽‘: [115.6201,35.2057],
      ‘营口‘: [122.4316,40.4297],
      ‘葫芦岛‘: [120.1575,40.578],
      ‘衡水‘: [115.8838,37.7161],
      ‘衢州‘: [118.6853,28.8666],
      ‘西宁‘: [101.4038,36.8207],
      ‘西安‘: [109.1162,34.2004],
      ‘贵阳‘: [106.6992,26.7682],
      ‘连云港‘: [119.1248,34.552],
      ‘邢台‘: [114.8071,37.2821],
      ‘邯郸‘: [114.4775,36.535],
      ‘郑州‘: [113.4668,34.6234],
      ‘鄂尔多斯‘: [108.9734,39.2487],
      ‘重庆‘: [107.7539,30.1904],
      ‘金华‘: [120.0037,29.1028],
      ‘铜川‘: [109.0393,35.1947],
      ‘银川‘: [106.3586,38.1775],
      ‘镇江‘: [119.4763,31.9702],
      ‘长春‘: [125.8154,44.2584],
      ‘长沙‘: [113.0823,28.2568],
      ‘长治‘: [112.8625,36.4746],
      ‘阳泉‘: [113.4778,38.0951],
      ‘青岛‘: [120.4651,36.3373],
      ‘韶关‘: [113.7964,24.7028]
  };

  var BJData = [
      [{name:‘北京‘}, {name:‘上海‘,value:95}],
      [{name:‘北京‘}, {name:‘广州‘,value:90}],
      [{name:‘北京‘}, {name:‘大连‘,value:80}],
      [{name:‘北京‘}, {name:‘南宁‘,value:70}],
      [{name:‘北京‘}, {name:‘南昌‘,value:60}],
      [{name:‘北京‘}, {name:‘拉萨‘,value:50}],
      [{name:‘北京‘}, {name:‘长春‘,value:40}],
      [{name:‘北京‘}, {name:‘包头‘,value:30}],
      [{name:‘北京‘}, {name:‘重庆‘,value:20}],
      [{name:‘北京‘}, {name:‘常州‘,value:10}]
  ];

  var SHData = [
      [{name:‘上海‘},{name:‘包头‘,value:95}],
      [{name:‘上海‘},{name:‘昆明‘,value:90}],
      [{name:‘上海‘},{name:‘广州‘,value:80}],
      [{name:‘上海‘},{name:‘郑州‘,value:70}],
      [{name:‘上海‘},{name:‘长春‘,value:60}],
      [{name:‘上海‘},{name:‘重庆‘,value:50}],
      [{name:‘上海‘},{name:‘长沙‘,value:40}],
      [{name:‘上海‘},{name:‘北京‘,value:30}],
      [{name:‘上海‘},{name:‘丹东‘,value:20}],
      [{name:‘上海‘},{name:‘大连‘,value:10}]
  ];

  var GZData = [
      [{name:‘广州‘},{name:‘福州‘,value:95}],
      [{name:‘广州‘},{name:‘太原‘,value:90}],
      [{name:‘广州‘},{name:‘长春‘,value:80}],
      [{name:‘广州‘},{name:‘重庆‘,value:70}],
      [{name:‘广州‘},{name:‘西安‘,value:60}],
      [{name:‘广州‘},{name:‘成都‘,value:50}],
      [{name:‘广州‘},{name:‘常州‘,value:40}],
      [{name:‘广州‘},{name:‘北京‘,value:30}],
      [{name:‘广州‘},{name:‘北海‘,value:20}],
      [{name:‘广州‘},{name:‘海口‘,value:10}]
  ];
//飞机动画
  // var carPath = ‘path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z‘;
  // var aaa= ‘<svg>‘+‘<circle cx="10" cy="10" r="10" stroke="black"stroke-width="2" fill="red"/>‘+‘</svg>‘;
//
  var carPath = ‘path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z‘;





  var convertData = function (data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
          var dataItem = data[i];
          var fromCoord = geoCoordMap[dataItem[0].name];
          var toCoord = geoCoordMap[dataItem[1].name];
          if (fromCoord && toCoord) {
              res.push({
                  fromName: dataItem[0].name,
                  toName: dataItem[1].name,
                  coords: [fromCoord, toCoord]
              });
          }
      }
      return res;
  };

  // var color = [‘#a6c84c‘, ‘#ffa022‘, ‘#46bee9‘];
  var cityArray = [‘北京‘, BJData];
  $("#selects").change(function(){
    //  console.log($(this).find(‘option:selected‘).text());
     if ($(this)[0].value==0) {
       cityArray = [‘北京‘,BJData]
     }
     if ($(this)[0].value==1) {
       cityArray = [‘上海‘,SHData]
     }
     if ($(this)[0].value==2) {
       cityArray = [‘广州‘,GZData]
     }
    //  mySportMap.setOption(option, true);
     mapresetFn();
  });
  function mapresetFn(){
    var series = [];
    // cityArray.forEach(function (item) {
        series.push({
            name: cityArray[0] + ‘ Top10‘,
            type: ‘lines‘,
            zlevel: 1,
            effect: {
                show: true,
                period: 6,
                trailLength: 0.7,
                color: ‘#fff‘,
                symbolSize: 3
            },
            lineStyle: {
                normal: {
                    color:‘#00d9d1‘,
                    width: 0,
                    curveness: 0.2
                }
            },
            data: convertData(cityArray[1])
        },
        {
            name: cityArray[0] + ‘ Top10‘,
            type: ‘lines‘,
            zlevel: 2,
            symbol: [‘none‘, ‘arrow‘],
            symbolSize: 10,
            effect: {
                show: true,
                period: 6,
                // constantSpeed:1,
                trailLength: 0,
                // symbol: carPath,
                symbolSize: 8,
                // trailLength:0.1,
                color:‘#83E1DF‘
            },
            lineStyle: {
                normal: {
                    color:‘#00d9d1‘,
                    width: 2,
                    opacity: 0.6,
                    curveness: 0.2
                }
            },
            data: convertData(cityArray[1])
        },
        {
            name: cityArray[0] + ‘ Top10‘,
            type: ‘effectScatter‘,
            coordinateSystem: ‘geo‘,
            zlevel: 2,
            rippleEffect: {
                brushType: ‘stroke‘
            },
            label: {
                normal: {
                    show: true,
                    position: ‘right‘,
                    formatter: ‘{b}‘
                }
            },
            symbolSize: function (val) {
                return val[2] / 8;
            },
            itemStyle: {
                normal: {
                    color: ‘#46bee9‘
                }
            },
            data: cityArray[1].map(function (dataItem) {
                return {
                    name: dataItem[1].name,
                    value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                };
            })
        // });
    });

    option = {
      //控制地图块背景色
        // backgroundColor: ‘#081226‘,
        // title : {
        //     text: ‘供应链报表平台‘,
        //     subtext: ‘SUPPLY CHAIN REPORTING PLATFORM‘,
        //     left: ‘center‘,
        //     textStyle : {
        //         color: ‘#fff‘
        //     }
        // },
        tooltip : {
            trigger: ‘item‘,
            width:200,
            height:88,
            backgroundColor:‘rgba(30,176,255,0.50)‘,
            borderColor:‘#1eb0ff‘,
            padding:[8, 16],
            borderWidth:1,
            formatter: function(params) {
              if (params.seriesIndex == 2 || params.seriesIndex == 5 || params.seriesIndex == 8) {
                  return params.name + ‘<br>‘ + ‘hhhhhhh‘;
              } else if (params.seriesIndex == 1 || params.seriesIndex == 4 || params.seriesIndex == 7) {
                  return params.data.fromName + ‘→‘ + params.data.toName;
              }
          }
        },
        legend: {
            orient: ‘vertical‘,
            top: ‘0‘,
            left: ‘10‘,
            data:cityArray,
            textStyle: {
                color: ‘#ccc‘
            },
            selectedMode: ‘single‘
        },
        geo: {
            map: ‘china‘,
            zoom:1.3,
            roam:false,
            scaleLimit :{
              min:1.25,
              max:1.25
            },
            label: {
                emphasis: {
                    show: false
                }
            },
            roam: true,
            itemStyle: {
                normal: {
                    areaColor: ‘#081226‘,
                    borderColor: ‘#00d9d1‘,
                    borderWidth:‘1‘
                },
                emphasis: {
                    areaColor: ‘#2a333d‘
                }
            }
        },
        series: series
    };;
    if (option && typeof option === "object") {
        mySportMap.setOption(option, true);
    }
  }
  mapresetFn();
  //右侧区域。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
  //当前库存数量
  function persentNowNumber() {
    var dv=$(‘.now-Number‘)[0];
    // console.log(aNumber);
    dv.innerHTML = getImgW(nowNumber)+"<img src=‘./img/text/pieceS.png‘ style=‘margin-top:6px;‘/>";
  }
  var nowNumber = 6215568735+"";  //出库件数接口  数字字符串。。。。。。。。。。。。。
  nowNumber = codeFn(nowNumber);//每隔三位倒序加逗号
  persentNowNumber(nowNumber);


  //当前库存件数。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
  function repertoryNumberFn(){
    var repertoryNumber = echarts.init(document.getElementById(‘nowquality‘));
    var optionrepertory = {
      // title: {
      //     text: ‘出库入库趋势‘
      // },
      tooltip : {
          trigger: ‘axis‘,
          backgroundColor:‘rgba(30,176,255,0.50)‘,
          axisPointer: {
              type: ‘cross‘,
              label: {
                  backgroundColor: ‘#6a7985‘
              }
          }
      },
      // toolbox: {
      //     feature: {
      //         saveAsImage: {}
      //     }
      // },
      grid: {
          left: ‘1.5%‘,
          right: ‘2.5%‘,
          bottom: ‘3%‘,
          containLabel: true
      },
      xAxis: {
        type: ‘category‘,
        boundaryGap: false,
        axisTick:{show:false},
         axisLine:{
              show:false,
          //    onZero:false
          },
        axisLabel:{
            show:false,
            textStyle:{
                color:‘#dededf‘
            }
        },
        splitLine:{//网格线
                  show:false ,
                  lineStyle:{
                      color:[‘#fff‘],
                      type:‘solid‘
                  }
              },
        data: dateArray
      },
      yAxis : [
          {
              type : ‘value‘,
              axisLabel : { 
                       formatter : ‘‘ 
                  }, 
              axisLine:{  
                      lineStyle:{  
                          color:‘#fff‘,  
                          width:0 
                      }  
                  },
                    axisTick:{
                      show:false
                  },
                  splitLine:{//网格线
                            show:true,
                            lineStyle:{
                                color:[‘rgba(30,176,255,0.30)‘],
                                type:‘solid‘
                            }
                        },
    
          }
      ],
      series : [
          {
              name:‘出库‘,
              type:‘line‘,
              stack: ‘总量‘,
              itemStyle : {    
                      normal : {  
                          color:‘rgba(89,135,251,0.3)‘,  
                          lineStyle:{    
                              color:‘rgba(30,176,255,0.50)‘    
                          }   
                      }    
                  },    
              areaStyle: {normal: {
                color:‘rgba(89,135,251,0.30)‘
              }},
              data:[150, 232, 201, 154, 190, 330, 410]  //出库数据
          }
      ]
    };
    repertoryNumber.setOption(optionrepertory);
  }
  repertoryNumberFn();//调用函数woreHosePersent
  function woreHoseFn(){
    var woreHoseNUmber = echarts.init($(‘.woreHosePersent‘)[0]);
          var woreHoseOption = {

          tooltip : {
            backgroundColor:‘rgba(30,176,255,0.50)‘,
              formatter: "{a} <br/>{b} : {c}%"
          },
          // toolbox: {
              // feature: {
              //     restore: {},
              //     saveAsImage: {}
              // }
          // },
          series: [
              {
                  name: ‘仓库饱和度‘,
                  type: ‘gauge‘,
                  min: 0,
                  max: 100,
                  detail: {formatter:‘{value}%‘},
                  startAngle: 180,
                  endAngle: 0,
                  axisTick: {
                      splitNumber: 10
                  },
                  axisLine: {
                  	show: true,
                      lineStyle: {
                          width: 16,
                          shadowBlur: 0,
                          // backgroundImage:‘radial-gradient(50% 100%, #1eb0ff 45%, #00d9d1 62%, #4fef00 75%, #ff9f6f 90%, #f48b00 4%)‘,
                          color: [[0.2, ‘#1EB0FF‘],[0.4, ‘#00D9D1‘],[0.6, ‘#4FEF00‘],[0.8, ‘#FF9F6F‘],[1, ‘#F48B00‘]]
                        }
                  },
                  splitLine: {           // 分隔线
                       length: 26,         // 属性length控制线长
                       lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                           color: ‘auto‘
                       }
                   },
                  axisLabel: {
                       formatter:function(v){
                           switch (v + ‘‘) {
                               case ‘0‘ : return ‘0‘;
                               case ‘1‘ : return ‘‘;
                               case ‘100‘ : return ‘100%‘;
                           }
                       }
                   },
                  detail: {
                      formatter: "{value}%",
                      offsetCenter: [0, "35%"],
                      textStyle: {
                          fontSize: 18,
                          fontWeight:600,
                          color: "#fff"
                      }
                  },
                  data: [{value: 36, name: ‘‘}]
              }
          ]
      };

      // setInterval(function () {
      // },2000);
      woreHoseOption.series[0].data[0].value = 36.22+0;
      woreHoseNUmber.setOption(woreHoseOption, true);
  }
  woreHoseFn();
  function hosetimeFn(){
    var woreHoseTime = echarts.init($(‘.woreHoseTime‘)[0]);
    var data = [{
        value: 3661,
        name: ‘7天以内‘,
        color:‘#fff‘,
      }, {
        value: 5713,
        name: ‘8-30‘
      }, {
        value: 9938,
        name: ‘31-180‘
      }, {
        value: 17623,
        name: ‘>180‘
      }];
      var woreHoseTimeoption = {
        backgroundColor: ‘none‘,
        title: {
            // text: ‘库存时长‘,
            // subtext: ‘2017-9‘,
            x: ‘center‘,
            y: ‘center‘,
            textStyle: {
                fontWeight: ‘normal‘,
                fontSize: 16,
                color:‘#fff‘
            }
        },
        tooltip: {
            show: true,
            trigger: ‘item‘,
            backgroundColor:‘rgba(30,176,255,0.50)‘,
            formatter: "{b}: {c} ({d}%)"
        },
        legend: {
            orient: ‘vertical‘,
            right: ‘4%‘,
            top:‘32%‘,
            color:‘#fff‘,
            fontSize:8,
            width:26,
            itemWidth:15,
            textStyle: {
                fontWeight: ‘normal‘,
                fontSize: 8,
                color:‘#fff‘
            },
            data: [‘7天以内‘, ‘8-30‘, ‘31-180‘, ‘>180‘]
        },
        series: [{
            type: ‘pie‘,
            // selectedMode: ‘false‘,
            radius: [‘40%‘, ‘50%‘],
            // left:‘10%‘,
            color: [‘#1eb0ff‘, ‘#00d9d1‘, ‘#ff9f6f‘, ‘#f48b00‘],

            label: {
                normal: {
                  show:false
                    // position: ‘inner‘,
                    // formatter: ‘{d}%‘,

                    // textStyle: {
                    //     color: ‘#fff‘,
                    //     fontWeight: ‘bold‘,
                    //     fontSize: 10
                    // }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: data
        }]
      };
      woreHoseTime.setOption(woreHoseTimeoption, true);
  }
  hosetimeFn();

//承运份额
  function shareFn() {
  	var dv=$(‘.depponShare‘)[0];
    // console.log(dv);
  	dv.innerHTML = getImgW(sharePersent);
  }
  var sharePersent = 70.1+"%";      //出库件数接口  百分比字符串。。。。。。。。。。
  shareFn(sharePersent);
  $(‘.model-share-left‘)[0].style.width = parseFloat(sharePersent)/100*240+"px";
  //承运商份额折线图
  function shareLine(){
    var shareLineChart = echarts.init($(‘.model-share-line‘)[0]);
    var shareLineoption= {
					// backgroundColor:‘#091323‘,
					color: [‘#38b4ee‘],

					xAxis: {
						type: ‘category‘,
						boundaryGap: false,
						axisTick:{show:false},
						 axisLine:{
					        show:false,
					    //    onZero:false
					    },
						axisLabel:{
						    show:false,
						    textStyle:{
						        color:‘#dededf‘
						    }
						},
						splitLine:{//网格线
			                show:false ,
			                lineStyle:{
			                    color:[‘#fff‘],
			                    type:‘solid‘
			                }
			            },
						data: [‘1‘,‘2‘,‘3‘,‘4‘,‘5‘,‘6‘,‘7‘,‘8‘,‘现在‘]
					},
					yAxis: {
					    axisTick:{show:false},
					    axisLine:{
					        show:false,
					    },
				    axisLabel:{
						    show:false,
						    textStyle:{
						        color:‘#dededf‘
						    }
						},
						splitLine:{//网格线
			                show: false,
			                lineStyle:{
			                    color:[‘#23303f‘],
			                    type:‘solid‘
			                }
			            }
					},
					series: [
						{
							name:‘剩余额度‘,
							type:‘line‘,
							smooth:true,
						    symbolSize:8,
							data:[‘48‘,‘43‘,‘41‘,‘40‘,‘24‘,‘53‘,‘47‘,‘50‘,‘49‘],
							label: {
								normal: {
									show: false,
									position: ‘top‘//值显示
								}
							}
						},
					]
				};
         shareLineChart.setOption(shareLineoption, true);
  }
  shareLine();

  //预警信息
    var warnDate = [
      {
        name:‘北京通州仓‘,
        message:‘入库单进度完成偏慢20%‘,
        timedata:‘1小时前‘
      },
      {
        name:‘北京通州仓‘,
        message:‘入库单进度完成偏慢20%‘,
        timedata:‘2小时前‘
      },
      {
        name:‘北京通州仓‘,
        message:‘入库单进度完成偏慢20%‘,
        timedata:‘3小时前‘
      }
    ]
    var messageP = "";
    for (var i = 0; i < warnDate.length; i++) {
      messageP+=‘<p>‘+‘<span>‘+warnDate[i].name+‘</span>‘+‘<span>‘+warnDate[i].message+‘</span>‘+‘<span>‘+warnDate[i].timedata+‘</span>‘
    }
    if (warnDate.length>0) {
      $(‘.warning-message‘)[0].innerHTML = messageP;
    }else {
      var nomessage =  "<img src=‘./img/text/nomessage.png‘ />";
      $(‘.warning-message‘)[0].innerHTML = nomessage;11:34:32
    }
    // console.log(messageP);
})();

因为本人有点懒好得多方法也是查的比如吧数字替换成图片的方法数字分割加逗号，还有就是echart canvas做的 UI的要求也有点多改插件大概是最痛苦的事情。

2017/10/12 11:34:40

数据报表dpap数据可视化展示

标签：add vertica class com pap toolbox int asi 5.5

原文地址：http://www.cnblogs.com/tiepeng/p/7655406.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行