<style>
.bclisth3{font-size:24px;color:#4aa8e5;font-weight: 500;margin-bottom:10px;}
.bclisth3 span{margin-left:20px;padding-left:50px;font-size:18px;
position: relative;}
.bclisth3 span:before{
  content: "";
    display: inline-block;
    vertical-align: middle;
    background: url(/images/form-icon.png) no-repeat 0 0;
        position: absolute;
    left: 9px;
    width: 40px;
    height: 25px;
    top: -2px;
}
.bclisth3 a{font-size:14px;margin-left:50px;}
.bclechart3{width:550px;margin:20px auto;height:250px;}
.bclechart3 p{line-height:220px;font-size:18px;}
</style>
<template>
<div class="container resource" style="min-height: 490px;">

  <div class="pop-banner clearfix">
    <div class="operate-btns"> 
       <!--  <a   class="fbtn fb-add"  v-show="!addrow"
          v-on:click="addrow=!addrow">添加</a>
        <a href="javascript:void(0)" class="fbtn fb-save" 
         v-show="addrow" v-on:click="add()">保存</a>
        <a href="javascript:;" class="fbtn fb-refresh"
          v-on:click="getData('refresh')">刷新</a> -->
          <!-- <a   class="fbtn fb-return">返回</a> -->
      </div>
    <h3 class="current-module">商品供采退流向追溯</h3>
  </div>
  
  <h3 class="bclisth3">全膝系统 Genesis II 股骨髁 <span>供采退汇总分析</span>
    <a class="btn-d btn-d-activate btn-d-lg"
    v-link="{path:'/businessCommodityDetail/1'}">查看单据</a>
  </h4>
  <div class="pd-form fast-search-form">
      <div class="group-row">
        <div class="form-group">
          <label for="cn3" class="label">省份</label>
          <div class="control province">
            <city :province.sync="search.province"
                  :city.sync="search.city"
                  :area.sync="search.area"
                  :readonly="readonlyFlag"></city>
            </div>
          </div>
          <div class="form-group">
          <label for="cn3" class="label">时间范围</label>
          <div class="control control-date">
            <div style="width:42%;float:left;">
              <datepicker :target.sync="search.search_GTE_inputdate"></datepicker>
            </div>
            <span class="text-and t-center" style="width: 39px">至</span>
            <div style="width:42%;float:left;">
              <datepicker :target.sync="search.search_LTE_inputdate"></datepicker>
            </div>
          </div>
        </div>
      </div>      
      <div class="group-row t-right">
        <button class="fast-analysis-form-btn btn-d btn-d-lg btn-d-activate btn-d-circle"
         v-on:click="getData('search')">
      分析</button>
      </div>
    </div>

  <div class="purchase-tab1" style="margin-right:30px;">
    <h1 style="font-size:14px;">供采退金额分析</h1>
    <div id="echart1" style="height:250px;"></div>
  </div>
  <div class="purchase-tab1">
    <h1 style="font-size:14px;">供采退量分析</h1>
    <div id="echart2"  style="height:250px;"></div>
  </div>

  <div  class="bclechart3">
    <p style="float:left;margin:0px;">供采退频次</p>
    <div id="echart3" 
    style="height:220px;width:360px;float:left;margin-left:50px"></div>
  </div>
  

</div>
</template>
<script>
var echarts_api=require('../../options/echarts_api.js')
module.exports={
  data:function(){
    return {
      list:[
        
      ],search:{province:'',city:'',area:'',search_LTE_inputdate:'',
      page:0}
    }
  },methods:{
    go:function(){
      history.go(-1)
    },
    getData:function(casetxt){//请求数据     
      if(casetxt.length>0){
        this.search.page=0;
      }
      Ajax.get('/cms/typelist').then(function(res){
          var result=res.data;

          if(result.data){
              this.$set('list',result.data);
          }
      }.bind(this))
    },echarts:function(){   
      this.chart1=echarts_api.init('echart1',{
        title:{
          text:''
        },legend:{
          data:['退货金额','订货金额','出库金额']
        },xAxis:{
          data:['1月','2月','3月','4月','5月','6月','7月','8月','9月',
          '10月','11月','12月']
        },series:[
          {
            name:'退货金额',
            data:[
            120, 132, 101, 134, 90, 230, 210,323,322,324,111,232
            ]
          },{
            name:'订货金额',
            data:[
            120, 2, 5, 8, 90, 8, 655,533,890,324,234,23
            ]
          },{
            name:'出库金额',
            data:[
            120, 2, 5, 8, 90, 8, 655,533,890,324,234,23
            ]
          }         
        ]
      },'line')  


      this.chart2=echarts_api.init('echart2',{
         title:{
          text:''
        },legend:{
          data:['退货量','订货量','出库量']
        },xAxis:{
          data:['1月','2月','3月','4月','5月','6月','7月','8月','9月',
          '10月','11月','12月']
        },series:[
          {
            name:'退货量',
            data:[
            120, 132, 101, 134, 90, 230, 210,323,322,324,111,232
            ]
          },{
            name:'订货量',
            data:[
            120, 2, 5, 8, 90, 8, 655,533,890,324,234,23
            ]
          },{
            name:'出库量',
            data:[
            120, 2, 5, 8, 90, 8, 655,533,890,324,234,23
            ]
          }         
        ]
      },'line')       

      this.chart3=echarts_api.init('echart3',{
        title:{text:''},
        legend: {
            orient: 'vertical',
            x: 'right',y:'center',
            data:['订货频次(次/月)','退货频次(次/月)']
        },series:[{
          data:[
            {value:335, name:'订货频次(次/月)'},
            {value:310, name:'退货频次(次/月)'}  
          ]
        }]
      },'pie2')
    }
  },route:{
    activate:function(){
      //this.getData();
     //$(function(){
        setTimeout(function(){
          this.echarts();
        }.bind(this),1000)
          
      //}.bind(this))      
    }
  }
}
</script>