<template>
    <div class="main-page">
        <div class="tab-btn">
            <el-button :class="{active:activeTab=='1'}"  @click="changeTab(`1`)">胸痛中心</el-button>
            <el-button :class="{active:activeTab=='2'}"  @click="changeTab(`2`)">卒中中心</el-button>
        </div>
        <div class="page-runStatis">
            <el-form  :inline="true"  :model="searchForm"  ref="searchForm"  size="small">
                <el-form-item  prop="searchDate"  label="查询日期">
                    <el-date-picker  v-model="searchForm.searchDate"  type="year"  placeholder="请选择年份" value-format="yyyy" format="yyyy"></el-date-picker>
                </el-form-item>
                <el-form-item  prop="hospitalCode" label="选择医院">
                    <el-select v-model="searchForm.hospitalCode" placeholder="请输入医院名称"  filterable  remote reserve-keyword  :remote-method="debounceFn(getHospitalLis,200)" :loading="loading">
                       <el-option  v-for="item in hospitalList"  :key="item.code"  :label="item.Name"  :value="item.code"></el-option>
                    </el-select>
                </el-form-item>
                <div class="btns">
                    <el-button  type="primary"  size="small"  @click="searchFormSub">查询</el-button>
                    <el-button  size="small"  @click="resetForm('searchForm')">重置</el-button>
                </div>
            </el-form>
            <div class="panel-Box padding_bottom45">
                <div class="charts-box">
                    <div class="charts1" ref="lineBar"></div>
                </div>
            </div>
            <div class="panel-Box">
                <div class="charts-box">
                    <div class="charts2" ref="vhBar"></div>
                    <div class="scroll_box" ref="BarScBox"  @scroll="SCOllBoxFn(`BarData`,`vhBar`,`BarScBox`,`BarScLine`,`persw`)">
                        <div class="scroll_line" ref="BarScLine"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
import {businessOperationStatistics,queryHospitalList} from '@/api/hospital.js';
import { mapGetters } from 'vuex';
export default{
    name:"runStatis",
    data(){
        let searchDate=`${(new Date()).getFullYear()}`;
        return{
            activeTab:'1',
            loading:false,
            searchForm: {
                searchDate:searchDate,
                hospitalCode: ''
            },
            hospitalList:[],
            lineBar:{
                nameLis:[],
                Arr:[],
                TLis:[]
            },
            BarData:{
                Namelis:[
                    // "a0","a1","a2","a3","a4","a5","a6","a7","a8","a9","a10","a11","a12","a13","a14","a15","a16","a17","a18","a19","a20","a21","a22","a23","a24","a25","a26","a27","a28","a29","a30","a31","a32","a33","a34","a35","a36","a37","a38","a39","a40","a41","a42","a43","a44","a45","a46","a47","a48","a49","a50","a51","a52","a53","a54","a55","a56","a57","a58","a59","a60","a61","a62","a63","a64","a65","a66","a67","a68","a69","a70","a71","a72","a73","a74","a75","a76","a77","a78","a79","a80","a81","a82","a83","a84","a85","a86","a87","a88","a89","a90","a91","a92","a93","a94","a95","a96","a97","a98","a99"
                ],
                Arr:[
                    [],
                    [],
                    [],
                    [],
                    [],
                    [],
                    [],
                    [],
                    [],
                    [],
                    []
                    // [50,54,75,60,41,59,88,62,76,70,55,4,52,26,96,90,25,59,19,18,17,36,69,94,36,85,14,68,65,13,66,65,37,0,26,18,35,26,84,93,57,54,20,69,24,13,82,30,19,20,77,55,74,90,18,20,68,72,86,64,67,28,28,49,60,68,89,35,38,17,25,21,9,51,73,37,98,83,61,62,26,0,17,90,94,89,87,9,41,78,41,94,84,48,91,13,9,50,85,13],
                    // [16,26,50,26,35,32,92,49,20,43,7,5,41,7,85,82,85,15,70,14,98,29,13,3,86,72,75,22,12,40,16,38,24,72,30,36,55,72,54,63,21,46,70,69,81,12,7,0,99,74,29,64,31,10,41,47,99,0,99,99,97,93,8,40,31,68,63,47,32,9,66,4,4,48,88,94,15,79,72,80,23,4,46,49,78,79,7,25,81,19,87,67,23,66,46,34,52,89,36,76],
                    // [94,24,91,69,46,85,3,8,33,49,31,5,59,7,56,6,80,74,52,74,32,60,8,77,80,46,26,94,63,86,80,99,83,34,38,35,22,14,64,7,66,30,34,87,38,78,98,3,23,16,42,18,18,8,99,92,6,11,65,21,94,59,89,80,9,99,2,48,11,55,76,56,6,64,97,73,10,74,45,3,22,50,70,2,13,7,61,67,55,65,94,87,29,91,91,70,57,92,40,97],
                    // [39,50,46,32,19,24,41,55,1,85,80,14,37,90,37,19,70,29,81,44,34,26,48,9,35,47,41,5,68,88,65,86,7,11,24,89,31,90,13,80,10,67,26,40,53,10,42,51,96,43,72,64,74,85,28,44,65,86,25,27,29,79,65,70,81,98,69,80,31,34,80,50,42,18,57,1,91,36,41,23,83,53,67,40,47,43,36,48,11,51,54,57,25,36,58,89,22,95,97,91]
                    // ,
                    // [50,54,75,60,41,59,88,62,76,70,55,4,52,26,96,90,25,59,19,18,17,36,69,94,36,85,14,68,65,13,66,65,37,0,26,18,35,26,84,93,57,54,20,69,24,13,82,30,19,20,77,55,74,90,18,20,68,72,86,64,67,28,28,49,60,68,89,35,38,17,25,21,9,51,73,37,98,83,61,62,26,0,17,90,94,89,87,9,41,78,41,94,84,48,91,13,9,50,85,13],
                    // [16,26,50,26,35,32,92,49,20,43,7,5,41,7,85,82,85,15,70,14,98,29,13,3,86,72,75,22,12,40,16,38,24,72,30,36,55,72,54,63,21,46,70,69,81,12,7,0,99,74,29,64,31,10,41,47,99,0,99,99,97,93,8,40,31,68,63,47,32,9,66,4,4,48,88,94,15,79,72,80,23,4,46,49,78,79,7,25,81,19,87,67,23,66,46,34,52,89,36,76],
                    // [94,24,91,69,46,85,3,8,33,49,31,5,59,7,56,6,80,74,52,74,32,60,8,77,80,46,26,94,63,86,80,99,83,34,38,35,22,14,64,7,66,30,34,87,38,78,98,3,23,16,42,18,18,8,99,92,6,11,65,21,94,59,89,80,9,99,2,48,11,55,76,56,6,64,97,73,10,74,45,3,22,50,70,2,13,7,61,67,55,65,94,87,29,91,91,70,57,92,40,97],
                    // [39,50,46,32,19,24,41,55,1,85,80,14,37,90,37,19,70,29,81,44,34,26,48,9,35,47,41,5,68,88,65,86,7,11,24,89,31,90,13,80,10,67,26,40,53,10,42,51,96,43,72,64,74,85,28,44,65,86,25,27,29,79,65,70,81,98,69,80,31,34,80,50,42,18,57,1,91,36,41,23,83,53,67,40,47,43,36,48,11,51,54,57,25,36,58,89,22,95,97,91]
                    // ,
                    // [50,54,75,60,41,59,88,62,76,70,55,4,52,26,96,90,25,59,19,18,17,36,69,94,36,85,14,68,65,13,66,65,37,0,26,18,35,26,84,93,57,54,20,69,24,13,82,30,19,20,77,55,74,90,18,20,68,72,86,64,67,28,28,49,60,68,89,35,38,17,25,21,9,51,73,37,98,83,61,62,26,0,17,90,94,89,87,9,41,78,41,94,84,48,91,13,9,50,85,13],
                    // [16,26,50,26,35,32,92,49,20,43,7,5,41,7,85,82,85,15,70,14,98,29,13,3,86,72,75,22,12,40,16,38,24,72,30,36,55,72,54,63,21,46,70,69,81,12,7,0,99,74,29,64,31,10,41,47,99,0,99,99,97,93,8,40,31,68,63,47,32,9,66,4,4,48,88,94,15,79,72,80,23,4,46,49,78,79,7,25,81,19,87,67,23,66,46,34,52,89,36,76],
                    // [94,24,91,69,46,85,3,8,33,49,31,5,59,7,56,6,80,74,52,74,32,60,8,77,80,46,26,94,63,86,80,99,83,34,38,35,22,14,64,7,66,30,34,87,38,78,98,3,23,16,42,18,18,8,99,92,6,11,65,21,94,59,89,80,9,99,2,48,11,55,76,56,6,64,97,73,10,74,45,3,22,50,70,2,13,7,61,67,55,65,94,87,29,91,91,70,57,92,40,97]
                ]
            },
            ViewLen:{

            },
            ISmounted:false,
            ISDataComplate:false,
        }
    },
    created(){
        var that=this;
        let code=that.userInfo.hospitalCode;
        let Name=that.userInfo.hospitalName;
        // that.hospitalList=[{Name:Name,code:code}];
        // that.searchForm.hospitalCode=code;
        that.getServeData();
        that.getHospitalLis();
        console.log("this.$el",this.$el)
    },
    computed:{
        ...mapGetters(['userInfo'])
    },
    beforeMount() {
      console.log("this.$el",this.$el)
    },
    mounted(){
        this.$nextTick(()=>{
            this.ISmounted=true;
            console.log("this.$el",this.$el)
            if(this.ISDataComplate){
                try{  that.drawLineBar(this.lineBar.nameLis,this.lineBar.Arr,this.lineBar.TLis);  }catch(e){console.log(e);}
                try{  that.drawBar(); }catch(e){console.log(e);}
            }else{
                console.log("dom挂载完成,但数据没准备好");
            }
        });
    },
    methods:{
        gv(value,dValue){ return (value)?value:dValue },
        debounceFn(fn,delay){
            let timer = null
            return function(args){
                if(timer){
                    clearTimeout(timer)
                }
                timer = setTimeout(fn(args),delay)
            }
        },
        getHospitalLis(str){
            var that=this;
            if(!str){return ;}
            var rstr=str.replace(/(^\s*)|(\s*$)/g,"");
            if(!rstr){return ;}
            that.loading=true;
            queryHospitalList({},str).then((res)=>{
                if(res.msg==201){
                    that.hospitalList=Object.freeze((Array.isArray(res.respData)?(res.respData):[]).map(function(item){
                        return Object.freeze({ code:item.hospitalCode,  Name:item.hospitalName });
                    }))
                }else{
                    that.$message.error(res.content)
                }
                that.loading=false;
            })
        },
        changeTab(num){
            this.activeTab=num;
            this.$refs.BarScBox.scrollLeft=0;
            this.searchFormSub();
        },
        getServeData(){
            var that=this;
            var params={type:that.activeTab,year:that.searchForm.searchDate,hospitalCode:that.searchForm.hospitalCode}
            businessOperationStatistics(params).then(res=>{
                if(res.msg==201){
                    that.fillServeData(res.respData);
                }else{  that.$message.error(res.content); };
            })
        },
        fillServeData(respData){
            var that=this;
            var result=that.gv(respData.hospitalVoList,[]).reduce(function(prv,cur,index,arr){
                prv.nameLis.push(cur.hospitalName);
                prv.dataLis.push(cur.systemCount);
                prv.totalLis.push(cur.totalCount);
                return prv;
            },{nameLis:[],dataLis:[],totalLis:[]});
            that.lineBar.nameLis=Object.freeze(result.nameLis);
            that.lineBar.Arr=Object.freeze(result.dataLis);
            that.lineBar.TLis=Object.freeze(result.totalLis);
            console.log("this.$el",this.$el)
            if(that.ISmounted){
                try{  that.drawLineBar(result.nameLis,result.dataLis,result.totalLis);  }catch(e){ console.log(e); }
            }else{
                console.log("数据准备好了,但dom没挂在完成")
            }
            var VoLis=(that.activeTab==1)?(that.gv(respData.chestVoList,[])):(that.gv(respData.strokeVoList,[]))
            var kys=(that.activeTab==1)?([`diagnoseCount`,`sTEMICount`,`nSTEMICount`,`uACount`,`aorticCount`,`pulmonaryCount`,`unAcsCount`,`otherAcsCount`,`giveUpCount`,`otherCount`,`monthTotal`]):([`conservativeCount`,`thrombolysisCount`,`operationCount`,`fourCount`,`fiveCount`,`monthTotal`]);
            var oAr=kys.map(function(){return [];});
            var result=VoLis.reduce(function(prv,cur,index,arr){
                prv.NameLis.push(cur.month);
                kys.forEach(function(ky,j){
                    (prv.arr)[j].push(cur[ky]);
                })
                return prv;
            },{NameLis:[],arr:oAr});
            that.BarData.Namelis=Object.freeze(result.NameLis);
            that.BarData.Arr=Object.freeze(result.arr.map(Object.freeze));
            if(that.ISmounted){
                try{  that.drawBar();  }catch(e){ console.log(e); }
            }
            that.ISDataComplate=true;
        },
        searchFormSub(){
            this.$refs.BarScBox.scrollLeft=0;
            this.getServeData();
        },
        resetForm(formName){  this.$refs[formName].resetFields(); },
        drawLineBar(NameLis,dataLis,totalLis){
            var that=this;
            var charts=that.getCtx(`lineBar`);
            if(NameLis.length==0){  charts.clear(); };
            var maxLen=5;
            if(NameLis.length!='0'){  maxLen=Math.max(...(NameLis.map(function(c){return c.length;}))); };
            var Left=(maxLen<6)?80:(80+(13*(maxLen-6)));
            var title=that.activeTab==1?'胸痛中心上报病历数':'卒中中心上报病历数';
            var opts={
                    title:{
                        left:0,
                        top:8,
                        text:title,
                        textStyle:{
                            fontSize:'20px',
                            fontWeight:'bold'
                        }
                    },
                    grid:{
                        left:Left,
                        top:64,
                        right:50,
                        bottom:20,
                    },
                    xAxis: {
                        max: 'dataMax',
                        minInterval:1,
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'none',
                            show: false
                        },
                        backgroundColor:'#FFF',
                        boxShadow:'0 2px 12px 0 rgba(0,0,0,0.1)',
                        textStyle:{
                            color:'#444'
                        },
                        formatter:function(params){
                                var st='';var sg=0;var reslt;
                                for(let s=0;s<params.length;s++){
                                    let itm=params[s];
                                    sg+=itm.value;
                                    st+=`<div style='line-height:25px;'>
                                            <div style='float:left;padding-right:15px;'>
                                                <span style='display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;background-color:${itm.color};'></span>
                                                <span>${itm.seriesName}</span>
                                            </div>
                                            <div style='float:right;color:#000;font-weight:bold;'>${itm.value}</div><br>
                                        </div>`;
                                }
                                reslt=`<div style='line-height:30px;'>
                                            <div>${((params[0])["axisValue"])}</div>
                                        </div>`;
                                reslt+=st;
                                return `<div style="padding:0 10px 0 10px;">${reslt}</div>`;
                        }
                    },
                    yAxis: {
                        type: 'category',
                        // data: ['武汉市第一人民医院', '武汉市第二人民医院', '武汉市第三人民医院', '武汉市第四人民医院', '武汉市第五人民医院','武汉市第六人民医院','G','H','I','J'],
                        data:NameLis,
                        inverse: true,
                        axisTick:{
                            show:false
                        },
                        // animationDuration: 300,
                        // animationDurationUpdate: 300,
                        max:9 // only the largest 3 bars will be displayed
                    },
                    series: [
                        {
                            // realtimeSort: true,
                            name: '系统上报人数',
                            type: 'bar',
                            barWidth:20,
                            stack: 'V1',
                            color:'#4495E6',
                            // data: [100,200,190,210,250,500,100,200,190,210],
                            data:dataLis,
                            // label: {
                            //     show:true,
                            //     position: 'right',
                            //     valueAnimation: true
                            // }
                        },
                        {
                            // realtimeSort: true,
                            name: '系统新建人数',
                            type: 'bar',
                            barWidth:20,
                            stack: 'V1',
                            color:'#8DCA86',
                            // data: [100,200,190,210,250,500,100,200,190,210],
                            data:totalLis,
                            // label: {
                            //     show:true,
                            //     position: 'right',
                            //     valueAnimation: true
                            // }
                        }
                    ],
                    // animationDuration: 0,
                    // animationDurationUpdate: 3000,
                    // animationEasing: 'linear',
                    // animationEasingUpdate: 'linear'
                };
              charts.setOption(opts);
        },
        drawBar(){
            var that=this;
            var Oc={datakey:'BarData',dom:'vhBar',scBox:'BarScBox',scline:'BarScLine',vlen:'persw'};
            var drData=that[(Oc.datakey)];
            var Namelis=drData.Namelis;
            // if(Namelis.length=='0'){ return; }
            var Arr=drData.Arr;
            var Wh=(that.$refs[(Oc.scBox)]).offsetWidth;
            var barW=(that.activeTab==1)?300:120;
            var ViLen=Math.ceil((Wh-150)/barW);
            var Rlen=(ViLen>=Namelis.length)?(Namelis.length):ViLen;
            // Rlen=(Rlen>=6)?6:Rlen;
            //console.log('当前屏幕尺寸下页面显示柱状图个数：'+Rlen);
            (that.$refs[(Oc.scline)]).style.width=(Namelis.length*100/Rlen)+"%";
            (that.ViewLen)[(Oc.vlen)]=Rlen;
            var Nkli=Namelis.slice(0,Rlen);
            var Dar=Arr.map(function(C){ return C.slice(0,Rlen);});
            that.drawBarEchart(Oc.dom,Nkli,Dar,true);
        },
        SCOllBoxFn(datakey,dom,scrollBox,scrollLine,vlen){
                // data,dom,scrollBox,scrollLine  /*分别对应，数据，渲染dom元素，滚动盒子，滚动条*/
            var that=this;
            var sclLeft=(that.$refs[scrollBox]).scrollLeft;
            var drData=that[datakey];
            var Namelis=drData.Namelis;
            var ViewLen=(that.ViewLen)[vlen];
            var Arr=drData.Arr;
            var MaxSts=Namelis.length-ViewLen;
            var Wh=(that.$refs[scrollBox]).offsetWidth;
            var Cwh=(that.$refs[scrollLine]).offsetWidth;
            var CBrw=(Cwh-Wh)/(MaxSts);
            var I=Math.floor(sclLeft/CBrw);
            var NeLis=Namelis.slice(I,I+ViewLen);
            var ArLs=Arr.map(function(G){return G.slice(I,I+ViewLen);});
            // //console.log(NeLis,ArLs);
            that.drawBarEchart(dom,NeLis,ArLs);
        },
        getTipFtter(){
            if(this.activeTab==1){
                return function(params){
                    var series=([]).concat(params);series.unshift(series.pop());
                    var st=``;
                    for(var s=0,j=6;s<6;s++,j++){
                        var ltem=series[s];
                        var rtem=series[j];
                        st+=`<div class="row">`;
                        st+=`<div class="c50">
                                <div class="desc">
                                    <span class="c ${s===0?'total':''}" style="background-color:${ltem.color}"></span>
                                    <span>${ltem.seriesName}</span>
                                </div>
                                <div class="v">${ltem.value}</div><br>
                             </div>`;
                        if(rtem){
                           st+=`<div class="c50">
                                    <div class="desc">
                                        <span class="c" style="background-color:${rtem.color}"></span>
                                        <span>${rtem.seriesName}</span>
                                    </div>
                                    <div class="v">${rtem.value}</div><br>
                                </div>`
                        }
                        st+=`</div>`;
                    }
                    var resStr=`<style type="text/css">
                                .box1648092821403{
                                    padding:1px 1px 1px 10px;
                                    min-width: 330px;
                                    max-width: 400px;
                                }
                                .box1648092821403 .title{
                                    padding:8px 1px;
                                }
                                .box1648092821403 .row{
                                    display:block;
                                    padding:1px 1px;
                                }
                                .box1648092821403 .row::after {
                                    content: '';
                                    display: block;
                                    width: 100%;
                                    overflow:hidden;
                                }
                                .box1648092821403 .row .c50{
                                    line-height:32px;
                                }
                                .box1648092821403 .row .c50:first-child{
                                    padding-right:10px;
                                    float:left;
                                }
                                .box1648092821403 .row .c50:last-child{
                                    padding-left:10px;
                                    float:right;
                                }
                                .box1648092821403 .row .c50 .desc{
                                    float:left;
                                    padding-right:15px;
                                }
                                .box1648092821403 .row .c50 .desc .c{
                                    display:inline-block;width:10px;height:10px;margin-right:5px;
                                }
                                .box1648092821403 .row .c50 .desc .c.total{
                                    width:10px;
                                    height: 2px;
                                    vertical-align: middle;
                                }
                                .box1648092821403 .row .c50 .v{
                                    float:right;
                                    color:#000;
                                    font-weight:bold;
                                    min-width: 45px;
                                }
                                .box1648092821403 .row .c50:first-child .desc{
                                    min-width:95px;
                                }
                                .box1648092821403 .row .c50:last-child .desc{
                                    min-width: 155px;
                                }
                                .box1648092821403 .row:last-child .c50{
                                    padding-left: 0;
                                    float: left;
                                }
                                .box1648092821403 .row:last-child .c50 .desc{
                                    min-width:95px;
                                }
                            </style>
                            <div class="box1648092821403">
                                <div class="title">${((params[0])["axisValue"])}</div>
                                ${st}
                            </div>`;
                        return resStr;
                }
            }else{
                return function(params){
                        var st='';var sg=0;var reslt;
                        for(let s=0;s<params.length;s++){
                            let itm=params[s];
                            sg+=itm.value;
                            st+=`<div style='line-height:25px;'>
                                    <div style='float:left;padding-right:15px;'>
                                        <span style='display:inline-block;width:10px;height:10px;margin-right:5px;background-color:${itm.color};'></span>
                                        <span>${itm.seriesName}</span>
                                    </div>
                                    <div style='float:right;color:#000;font-weight:bold;'>${itm.value}</div><br>
                                </div>`;
                        }
                        reslt=`<div style='line-height:30px;'>
                                    <div>${((params[0])["axisValue"])}</div>
                                </div>`;
                        reslt+=st;
                        return `<div style="padding:0 10px 0 10px;">${reslt}</div>`;
                }
            }
        },
        getOpts(NameLis,arr){
            var that=this;
            var title=that.activeTab==1?'胸痛病患数量趋势统计':'卒中病患数量趋势统计';
            var colors=(that.activeTab==1)?([`#EA8E97`,`#E8AC63`,`#8AD7AF`,`#48959A`,`#8DCA86`,`#7094F2`,`#80B2F1`,`#4294EA`,`#4371BE`,`#3683B8`,`#1F71FF`]):([`#E8AC63`,`#8DCA86`,`#4294EA`,`#1F71FF`]);
            var itemLis=(that.activeTab==1)?([`诊断中`,`STEMI`,`NSTEMI`,`UA`,`主动脉夹层`,`肺动脉栓塞`,`非ACS心源性胸痛`,`其他心源性胸痛`,`放弃治疗,病因未明`,`其他`,`总量`]):([`脑梗死总数`,`脑出血总数`,`TIA总数`,`蛛网膜下腔出血总数`,`其他总数`,`总量`]);
            var result=itemLis.reduce(function(prv,cur,index,orgarr){
                var citem={name:cur,data:arr[index]};
                let flag=index===(orgarr.length-1);
                if(flag){
                    prv.leg2.push(cur);
                    citem.type="line";
                    citem.showSymbol=true;
                    citem.symbolSize=6;
                }else{
                    prv.leg1.push(cur);
                    citem.type="bar";
                    citem.barGap=0.1;
                    citem.barWidth=20;
                }
                prv.series.push(citem);
                return prv;
            },{leg1:[],leg2:[],series:[]});
            // console.log(result);
            return{
                grid:{
                    left:40, // 默认10%，给24就挺合适的。
                    top:90, // 默认60
                    right:50, // 默认10%
                    bottom:35, // 默认60
                },
                title:{
                    text:title,
                    textStyle:{
                        fontSize:'20px',
                        fontWeight:'bold'
                    }
                },
                legend:[
                    {
                        top:43,
                        right:100,
                        itemWidth:12,  // 设置宽度
                        itemHeight:12, // 设置高度
                        itemGap:25,
                        textStyle:{
                            color:"#000",
                            fontSize: 14,
                            paddingLeft:5,
                        },
                        data:result.leg1
                    },{
                        top:43,
                        right:20,
                        data:result.leg2
                    }
                ],
                xAxis: {
                    type: 'category',
                    axisTick: { show:false },/*影藏坐标轴刻度*/
                    // data: ['张三丰', '刘天宇', '王自大', '孙乾坤', '李自傲', '周天启', '冯天成','任天雨']
                    data:NameLis
                },
                yAxis: {
                    type: 'value',
                    minInterval:1,
                    axisTick: { show:false }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'none',
                        show: false
                    },
                    backgroundColor:'#FFF',
                    boxShadow:'0 2px 12px 0 rgba(0,0,0,0.1)',
                    textStyle:{
                        color:'#444'
                    },
                    formatter:that.getTipFtter()
                },
                color:colors,
                series:result.series
            };
        },
        drawBarEchart(dom,NameLis,arr,isClear){
            var that=this;
            var charts=that.getCtx(dom);
            if(isClear||(NameLis.length===0)){ charts.clear(); }
            charts.setOption(that.getOpts(NameLis,arr));
        },
        getCtx(refName){ return echarts.init((this.$refs)[refName]); }
    }
}
</script>
<style lang="scss">
.main-page{
    .tab-btn{
       font-size:0;
       button.el-button{
           position: relative;
           font-size:14px;
           border-radius:0;
           margin-left:0;
           margin-right:0;
           &.active{
               border-color:#FFF;
               color:#3B88D9;
               &:before{
                    content: "";
                    display: inline-block;
                    width: 10px;
                    height: 10px;
                    background-color:#3B88D9;
                    margin-right: 8px;
                    border-radius:50%;
               }
           }
       }
    }
    .page-runStatis{
        padding: 24px 32px 24px;
        background-color:#FFF;
        .el-form{
            .el-form-item{
                margin-right:50px;
                .el-input{
                    width:200px;
                }
            }
            .btns{
                float:right;
            }
        }
        .panel-Box{
            padding-top:20px;
            padding-bottom: 10px;

            .title{
                font-size:20px;
                font-weight:bold;
                color:rgba(0, 0, 0, 0.87);
            }
            .charts-box{
                .charts1{
                    height:358px;
                }
                .charts2{
                    height:428px;
                }
                .scroll_box{
                    width:100%;
                    overflow-x:auto;
                    overflow-y:hidden;
                    .scroll_line{
                        height:1px;;
                    }
                }
            }
        }
        .padding_bottom45{
            padding-bottom:45px;
        }
    }
}

</style>
