zrelation.vue

<!-- 楼层客流综合指标分布 -->
<template>
    <div>
        <el-row class="ipart ipart2" :gutter="12" v-loading="loading">
            <el-col :span="12">
                <div class="ipage_top">
                    <div class="tit"><img :src="bindIcon('renyuan')"/>{{title||chartData.title}}</div>
                    <div class="acts"></div>
                </div>
                <p class="ctitle">{{$t('iPage.stayaverage')}}<span v-html="countVal"></span></p>
                <div class="ichart">
                    <bar-chart @emitChart="chartClick" :cdata="chartData" tval="hbar"></bar-chart>
                </div>
            </el-col>
            <el-col :span="12" v-loading="loading2">
                <div class="ipage_top">
                    <div class="tit"><img :src="bindIcon('renyuan')"/>{{$t('iPage.stayagepercent')}}</div>
                </div>
                <span class="ctitle">{{barTitle}}</span>
                <stack-chart :cdata="chartData2"></stack-chart>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import mixin from './mixin';
import mallData from '@/components/Echarts/data';
import _ from 'underscore';
const chartsConfig = {
    zone_detention_gender:{ //默认 //年龄统计
        otherConf:{
            _color:['#3F8CFF','#FFD48A'],
            doubleYaxis: true,
            isSwapY: true
           // hasYaxisName:false,
        }
    },
    zone_detention_statistics:{
        _color:['#90BDFF'],
        reverseAxis:true,
        labelPosition:'right',
        grid:{
            top: 40, right:20, bottom: 20, left: 40
        },
        showCount:false,
        usePercent:true
    }
};
export default {
    mixins: [mixin],
    data() {
        return {
            loading:true,
            loading2:false,
            chartData2:{},
            countVal:'',
            barTitle:''
        }
    },
    created() {
        
    },
    methods: {
        loadChartData(params){
            this.chartId = this.getChartId(this.ckey);
            this.loading = true;
            if(this.chartId){
               this.ajaxModuleData().then(data=>{
                  this.setChartData(data);
               });
            }else{
               this.setChartData(); 
            }
        },
        chartClick({name,dataIndex}){
            this.setCurrenRose({name,dataIndex});
        },
        setChartData(data){
            let countVal = _.findWhere(data.series,{name:'avg'}).data[0];
            data.series = _.filter(data.series,item=>item.name!='avg');
            if(countVal||countVal==0){
                this.countVal = typeof countVal=='string'?countVal.replaceAll(/\d+/g,'<em>$&</em>'):`<em>${countVal}</em>${this.$t('iPage.number')}}`;
            }
            let floorData = JSON.parse(JSON.stringify({...data,yaxis:data.xaxis}));
            floorData.series[0].data = floorData.series[0].data.map((value,i)=>{
                if(value instanceof Object)return value;
                let item =  {
                    value:value,
                    /*label:{
                        formatter:'{a}{b}{c}{d}'
                    },*/
                    itemStyle:{
                        color:'#90BDFF',
                    }
                }
                return item;
            })
            this.maxNum = (_.max(_.pluck(floorData.series[0].data,'value')))*1.35;
            floorData.series[1] = {
                name: 'background',
                type: 'bar',
                label:{
                   show:false
                },
                itemStyle: {
                    barBorderRadius: 0,
                    color: '#f7f6f9'
                },
                emphasis:{
                    itemStyle:{
                        color: '#f7f6f9' 
                    }
                },
                barGap: '-100%',
                z: 0,
                data: new Array(floorData.series[0].data.length).fill(this.maxNum)
            };
            this.chartData = Object.assign({},floorData,{
                otherConf:{
                    reverseAxis:true,
                    labelPosition:'right',
                    usePercent:true,
                    hideLoading:true
                }
            });
            this.$nextTick(()=>{
                setTimeout(()=>{
                    let dataIndex = 0;
                    this.chartClick({dataIndex,name:floorData.yaxis.data[dataIndex]});
                    this.loading = false;
                },200)
            })
        },
        setCurrenRose({name,dataIndex}){
            let that = this,chartData = Object.assign({},this.chartData);
            chartData.series[1].data = chartData.series[1].data.map((item,idx)=>{
                if(idx!=dataIndex)return this.maxNum;
                return {
                    value:this.maxNum,
                    itemStyle:{
                        borderColor:'#90BDFF',
                        borderWidth:2,
                        shadowColor:'#90BDFF',
                        shadowBlur:10
                    } 
                };
            });
            this.chartData = Object.assign({},chartData,chartsConfig[this.ckey]);
            this.loadRoseChartData({name,dataIndex});
        },
        loadRoseChartData({name,dataIndex}){
            this.barTitle = name;
            //this.loading2 = true;
            let key = 'zone_detention_gender'
            let chartId = this.getChartId(key);
            this.$api.ipageReport.bodyReport({...this.params,chartIds:chartId,index:dataIndex}).then(res=>{
                let { data } = res.data;
                let charData2 = data[key];
                this.chartData2 = Object.assign({},charData2,chartsConfig[key]);
                //this.loading2 = false;
            })
        }
    }
}
</script>

<style lang="less" scoped>
.ctitle{
    position:absolute;
    left:0%;
    top:8%;
    font-size: 14px;
    z-index: 9;
    em{
        font-size: 16px;
        font-weight: 600;
        font-style:normal;
        margin-left: 5px;
        margin-right: 2px;
    }
}
</style>