浏览代码

长处方分析页面的内容

raolu 7 年之前
父节点
当前提交
83ccbbb628

+ 1 - 1
app/statistics/comprehensive-analysis.html

@ -15,7 +15,7 @@
    </head>
    <body>
        <div id="main">
            <header-tab :isback="isback" :isrefresh="isrefresh" :isfilter="isfilter" :isopen="isopen" ></header-tab>
            <header-tab :appname="appname" :isback="isback" :isrefresh="isrefresh" :isfilter="isfilter" :isopen="isopen" ></header-tab>
            <header-prompt></header-prompt>
            <div class="clearfix ">
                <ul class="l-banner">

+ 59 - 20
app/statistics/js/common.js

@ -90,23 +90,62 @@ function drawPieChart(elId, arry, color){
    myChart.setOption(option);
}
Date.prototype.format = function(format) {
	var o = {
		"M+": this.getMonth() + 1, //month 
		"d+": this.getDate(), //day 
		"h+": this.getHours(), //hour 
		"m+": this.getMinutes(), //minute 
		"s+": this.getSeconds(), //second 
		"q+": Math.floor((this.getMonth() + 3) / 3), //quarter 
		"S": this.getMilliseconds() //millisecond 
	}
	if(/(y+)/.test(format)) {
		format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
	}
	for(var k in o) {
		if(new RegExp("(" + k + ")").test(format)) {
			format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
		}
	}
	return format;
}
/**
 * 绘制柱状图
 */
function drawBarChart(el, xData, yData, color, name){
    var myChart = echarts.init(document.getElementById(el));
       
    // 指定图表的配置项和数据
    var option = {
        tooltip: {
            trigger: 'item'
        },
        toolbox: {
            dataZoom: true,
            show: true,
            orient: 'vertical',
            x: 'right',
            y: 'center'
        },
        grid: {
            left: '20px',
            right: '20px',
            bottom: '20px',
            top: '20px',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: xData,
            axisLabel: {
                interval:0,//横轴信息全部显示  
            },
            splitLine: {
                show: false
            }
        }],
        yAxis: [{
            type: 'value',
            splitLine: {show:false}
        }],
        series: [{
            clickable: true,
            name: name,
            itemStyle : { 
                normal: {
                    label : {
                        show: true, position: 'top'
                    },
                    color: color
                }
            },
            barWidth: 20,
            type: 'bar',
            data: yData 
        }]
    };
    
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

+ 1 - 0
app/statistics/js/comprehensive-analysis.js

@ -3,6 +3,7 @@ Vue.use(Vuedals.default);
new Vue({
    el: "#main",
    data: {
        appname: "总体分析",
        isback: true,
        isrefresh: true,
        isfilter: true,

+ 436 - 0
app/statistics/js/prescription-analysis.js

@ -0,0 +1,436 @@
var reqList = [];
Vue.use(Vuedals.default);
new Vue({
    el: "#main",
    data: {
        appname: "长处分分析",
        isback: true,
        isrefresh: true,
        isfilter: true,
        isopen: true,
        //页面请求参数
        level: '',
        area: '',
        areaTitle: '',
        userRole: {},
        lowLevel: '3', //市级对应lowLevel为3,逐级递减
        dateType: 1, //折线图坐标值1-日,2-周,3-月
        startDate: "",
        endDate: "",
        tagCode: 1, //顶部各个tag标签对应的值
        sumType: 4, //记录从筛选页面选择的统计维度 1-订单统计,2-费用统计,3-配送统计,4-年龄统计
        disease: "", //疾病类型
        orderTagDatas: {
            total: 0,
            finishCount: 0,
            patientCancelCount: 0,
            noReviewedCount: 0,
            processingCount: 0,
            payOuttimeCount: 0
        },
        paymentData: {
            sum: 0,
            avg: 0
        },
        expressData: {
            self: 0,
            doctor: 0,
            delivery: 0
        },
        ageDatas: [
            {name: "0~6岁", color: "#ff5442", value: 0},
            {name: "7~18岁", color: "#ffc800", value: 0},
            {name: "19~30岁", color: "#4ce428", value: 0},
            {name: "31~50岁", color: "#24bbfa", value: 0},
            {name: "51~64岁", color: "#fb5dab", value: 0},
            {name: "65岁以上", color: "#9b5ffd", value: 0}]
    },
    components: {
        vuedals: Vuedals.Component
    },
    mounted: function(){
        //初始化数据
        initData(this);
        
        //获得顶部各tab的值
        loadData([0,1,2], this); //参数组数表示请求的区域为上中下
        
        //存储请求所带的参数
        reqList.push({
            level: this.level,
            area: this.area,
            areaTitle: this.areaTitle,
            endDate: this.endDate,
            startDate: this.startDate,
            lowLevel: this.lowLevel,
            tagCode: this.tagCode,
            sumType: this.sumType,
            disease: this.disease
        });
        
        //设置监听器, 监听折线图日期变化
        var vm = this;
        //监听后退按钮的操作
        EventBus.$on("back-click", function(arg){
            if(reqList.length == 1){
                history.go(-1);
            } 
            else{
                var preInfo = reqList.pop();
                var info = reqList[reqList.length - 1];
                vm.level = info.level;
                vm.area = info.area;
                vm.areaTitle = info.areaTitle;
                vm.lowLevel = info.lowLevel;
                vm.tagCode = info.tagCode;
                vm.sumType = info.sumType;
                vm.disease = info.disease;
                
                loadData([0,1,2], vm);
            }
        });
        //监听页面刷新
        EventBus.$on("refresh-click", function(arg){
            loadData([0,1,2], vm);
        });
    },
    methods: {
        changeTagCode: function(val){
            this.tagCode = val;
            if(this.sumType == 2){
                //费用统计只查看人均费用的变化趋势
                loadData([2], this);
            }else{
                loadData([1,2], this);
            }
            //存储请求所带的参数
            reqList.push({
                level: this.level,
                area: this.area,
                areaTitle: this.areaTitle,
                endDate: this.endDate,
                startDate: this.startDate,
                lowLevel: this.lowLevel,
                tagCode: this.tagCode,
                sumType: this.sumType,
                disease: this.disease,
            })
        },
        getBarData: function(arg){
            this.dateType = arg.dateType;
            loadData([1], this);
        },
        getPaymentLineData: function(arg){
            this.dateType = arg.dateType;
            loadData([1], this);
        },
        getBottomAreaData: function(arg){
            //如果level改变,则需要重新加载整个页面的数据,否则只需加载底部区域数据
            if(arg.level == this.level){
                this.lowLevel = arg.lowLevel;
                loadData([2], this);
            }else{
                this.level = arg.level;
                //长处方这边level改了lowLevel也需要跟着一起变
                this.lowLevel = arg.level - 1;
                this.area = arg.area;
                this.areaTitle = arg.areaTitle;
                loadData([0,1,2], this);
            }
            //存储请求所带的参数
            reqList.push({
                level: this.level,
                area: this.area,
                areaTitle: this.areaTitle,
                endDate: this.endDate,
                startDate: this.startDate,
                lowLevel: this.lowLevel,
                tagCode: this.tagCode,
                sumType: this.sumType,
                disease: this.disease,
            })
        }
    }
});
function initData(vm){
    //获得缓存中缓存的角色权限
    var userRole = window.localStorage.getItem("selectedRole");
    if(!userRole){
        return false;
    }
    vm.userRole = JSON.parse(userRole);
    vm.level = vm.userRole.code == '350200' ? 4 : vm.userRole.code.length == 6 ? 3 : 2;
    vm.lowLevel = vm.level - 1;
    vm.area = vm.userRole.code;
    vm.areaTile = vm.userRole.name;
    
    var now = new Date();
    vm.endDate = now.format("yyyy-MM-dd");
}
function initReqParams(vm){
    //sumType: 1-订单统计,2-费用统计,3-配送统计,4-年龄统计
    var reqParam = [];
    switch(vm.sumType){
        case 1: 
            //tagCode: 1.总量,2.已完成,3.居民取消,4.审核不通过,5.进行中,6.其他原因取消
            reqParam = [{
                url: "/statistics/getPrescriptionCount",
                data: {level: vm.level, area: vm.area, disease: vm.disease}
            },{
                url: "/statistics/getPrescriptionTotalHistogram",
                data: {level: vm.level, area: vm.area, disease: vm.disease, type: vm.tagCode, interval: vm.dateType}
            },{
                url: "/statistics/getPrescriptionTotalLowLevel",
                data: {level: vm.level, lowlevel: vm.lowLevel, area: vm.area, disease: vm.disease, type: vm.tagCode}
            }];
            break;
        case 2: 
            //dateType: 折线图坐标值1-日,2-周,3-月
            //tagCode: 1.总量,2.平均值
            vm.startDate = getBeforeMonthStartDate(3, vm.dateType);
            reqParam = [{
                url: "/statistics/getPrescriptionCost",
                data: {level: vm.level, area: vm.area, disease: vm.disease}
            },{
                url: "/statistics/getPrescriptionCostAvgLine",
                data: {level: vm.level, area: vm.area, disease: vm.disease, type: vm.dateType, startDate: vm.startDate, endDate: vm.endDate}
            },{
                url: "/statistics/getPrescriptionCostLowLevel",
                data: {level: vm.level, lowlevel: vm.lowLevel, area: vm.area, disease: vm.disease, type: vm.tagCode}
            }];
            break;
        case 3: 
            //tagCode: 1.自取,2.快递配送,3.健管师配送
            reqParam = [{
                url: "/statistics/getPrescriptionDispatchingTotal",
                data: {level: vm.level, area: vm.area, disease: vm.disease}
            },{
                url: "/statistics/getPrescriptionDispatchingHistogram",
                data: {level: vm.level, area: vm.area, disease: vm.disease, type: vm.tagCode, interval: vm.dateType}
            },{
                url: "/statistics/getPrescriptionDispatchingLowLevel",
                data: {level: vm.level, lowlevel: vm.lowLevel, area: vm.area, disease: vm.disease, type: vm.tagCode}
            }];
            break;
        case 4: 
            reqParam = [{
                url: "/statistics/getPrescriptionAgeTotal",
                data: {level: vm.level, area: vm.area, disease: vm.disease}
            },{
                url: "/statistics/getPrescriptionAgeHistogram",
                data: {level: vm.level, area: vm.area, disease: vm.disease}
            },{
                url: "/statistics/getPrescriptionAgeLowLevel",
                data: {level: vm.level, lowlevel: vm.lowLevel, area: vm.area, disease: vm.disease}
            }];
            break;  
        default:
            reqParam = [];
            break;
    };
    
    return reqParam;
}
function loadData(loadArr, vm){
    //获取其他请求的参数
    var reqParams = initReqParams(vm),
        reqPromise = [];
    
    for(i=0; i<loadArr.length; i++){
        var j = loadArr[i];
        var param = reqParams[j];
        reqPromise.push(httpRequest.get(param.url, {data: param.data}));
    }
        
    if(reqPromise.length > 0){
        Promise.all(reqPromise).then(function(ress){
            var res1, res2, res2;
            for(var i=0; i<loadArr.length; i++){
                var j = loadArr[i] + 1;
                if(j == 1){
                    res1 = ress[i];
                }
                if(j == 2){
                    res2 = ress[i];
                }
                if(j == 3){
                    res3 = ress[i];
                }
                
            }
            if(res1){
                if(res1.status == 200){
                    handleTopPanelData(res1.data, vm);
                }else{
                    console.log(res1.msg);
                }
            }
            if(res2){
                if(res2.status == 200){
                    handleSecondPanelData(res2.data, vm);
                }else{
                   console.log(res2.msg);
                }
                
            }
            if(res3){
                if(res3.status == 200){
                    listHandle(res3.data, vm);
                }else{
                    console.log(res3.msg);
                }
            }
        })
    }
}
function handleTopPanelData(data, vm){
    switch(vm.sumType){
        case 1:
            vm.orderTagDatas = {
                total: data.total,
                finishCount: data.finishCount,
                patientCancelCount: data.patientCancelCount,
                noReviewedCount: data.noReviewedCount,
                processingCount: data.processingCount,
                payOuttimeCount: data.payOuttimeCount
            };
            break;
        case 2:
            vm.paymentData = {
                sum: data.sum,
                avg: data.avg
            }
            break;
        case 3:
            vm.expressData = {
                self: data.seltTotal,
                doctor: data.deliveryTotal,
                delivery: data.doctorTotal
            }
            break;
        case 4:
            var len = vm.ageDatas.length,
                color = ['#ff5442', '#ffc800 ','#4ce428', '#24bbfa','#fb5dab', "#9b5ffd"],
                objName = ['0age', '7age', '19age', '31age', '51age', '65age'],
                arr = [];
            for(i=0; i<len; i++){
                vm.ageDatas[i].value = data[objName[i]];
            }
            //绘制饼图
            drawPieChart("agePie", vm.ageDatas, color);
    }
}
function handleSecondPanelData(data, vm){
    switch(vm.sumType){
        case 1:
        case 3:
            var color = "#17b3ec",
                xAxisData = [],
                seriesData = [];
            for(i=0; i<data.length; i++){
                var item = data[i];
                xAxisData.push(item.date);
                seriesData.push(item.count);
            }
            var names;
            if(vm.sumType == 1){
                names = ["续方总量", "已完成", "居民取消", "审核未通过", "进行中", "其他原因取消"];
            }else if(vm.sumType == 3){
                names = ["居民自取", "物流配送", "健管师配送"];
            }
            EventBus.$emit("draw-bar-chart", {
                panelName: "近半年统计",
                xData: xAxisData,
                yData: seriesData,
                quotaName: names[vm.tagCode - 1],
                color: color,
                unit: "笔"
            });
            break;
        case 2:
            var yDatas = [],
                colors = ['#12b7f5'];
                
            var xData = _.map(data, function(o){
                return o.date;
            });
            var yData = _.map(data, function(o){
                return o.avg;
            });
            yDatas.push(yData);
            
            EventBus.$emit("draw-line-chart", {
                panelName : "近三个月人均费用趋势",
                quotaNames : ["人均费用"],
                xData : xData,
                yDatas : yDatas,
                colors : colors,
                unit: "元"
            });
            break;
        case 4: 
            var color = "#17b3ec",
                xAxisData = ['0~6岁', '7~18岁', '19~30岁', '31~50岁', '51~64岁', '65岁以上'],
                fieldName = ['0ageRate', '7ageRate', '19ageRate', '31ageRate', '51ageRate', '65ageRate']
                seriesData = [];
            for(i=0; i<6; i++){
                seriesData.push(parseInt(data[fieldName[i]]));
            }
            
            drawBarChart("ageBar", xAxisData, seriesData, color, "人均使用次数");
            break;
    }
}
function listHandle(data, vm){
    var list = data;
    var topArr = soreRank(getKeyValueArr(list, 'val'));
    var arr = _.map(list, function(o, index){
        var cols = [o.name, o.val];
        return {
            rank: topArr[index],
            code: o.code,
            name: o.name,
            cols: cols
        }
    });
    var headers = {
        '1': ["排名", "续方总量", "已完成", "居民取消", "审核未通过", "进行中", "其他原因取消"],
        '2': ["排名", "费用总计", "人均费用"],
        '3': ["排名", "居民自取", "物流配送", "健管师配送"],
        '4': ["排名", "绑定设备"],
    };
    EventBus.$emit("render-area-data",{
        level: vm.level,
        area: vm.area,
        lowLevel: vm.lowLevel,
        headers:["排名", headers[vm.sumType][vm.tagCode]],
        rows: arr
    });
}
/*
 * months :  月份差距(例如months=3,则获取今天往前数3个月的那天的值)
 */
function getBeforeMonthStartDate(months,type){
    //type: 折线图坐标值1-日,2-周,3-月
    //从1号开始算每个月开始的时间
    var sDate = new Date(),
        now = new Date();
    
    sDate.setMonth(now.getMonth() - months + 1);// 包含本月算一个月
    
    var sDateStr = sDate.format("yyyy-MM-dd");
    var startDate = "";
    if(type == '3'){
        startDate = sDateStr.substr(0,8)+"01";
    }else{
        startDate = sDateStr;
    }
    return startDate;
}

+ 156 - 0
app/statistics/prescription-analysis.html

@ -0,0 +1,156 @@
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>长处方分析</title>
        <meta name="author" content="yihu.com" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <link rel="stylesheet" type="text/css" href="../../css/font-awesome.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../css/style.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../css/cross.css"/>
        <link rel="stylesheet" type="text/css" href="css/common.css"/>
        <style>
            .chart-center-text{position: absolute; width: 100%; top: 50%; margin-top: -17px;}
        </style>
    </head>
    <body>
        <div id="main">
            <header-tab :appname="appname" :isback="isback" :isrefresh="isrefresh" :isfilter="isfilter" :isopen="isopen" ></header-tab>
            <header-prompt></header-prompt>
            <div v-show="sumType==1" class="order-tag-panel">
                <ul class="l-banner">
                    <li>
                        <div class="tag" :class="{'active': tagCode==1}" @click="changeTagCode(1)">
                            <div class="c-f18">{{orderTagDatas.total}}</div>
                            <div class="mt5 c-f14 l-name">续方总量</div>
                        </div>
                    </li>
                    <li>
                        <div class="tag" :class="{'active': tagCode==2}" @click="changeTagCode(2)">
                            <div class="c-f18">{{orderTagDatas.finishCount}}</div>
                            <div class="mt5 c-f14 l-name">已完成</div>
                        </div>
                    </li>
                    <li>
                        <div class="tag" :class="{'active': tagCode==3}" @click="changeTagCode(3)">
                            <div class="c-f18">{{orderTagDatas.patientCancelCount}}</div>
                            <div class="mt5 c-f14 l-name">居民取消</div>
                        </div>
                    </li>
                </ul>
                <ul class="l-banner">
                    <li>
                        <div class="tag" :class="{'active': tagCode==4}" @click="changeTagCode(4)">
                            <div class="c-f18">{{orderTagDatas.noReviewedCount}}</div>
                            <div class="mt5 c-f14 l-name">审核未通过</div>
                        </div>
                    </li>
                    <li>
                        <div class="tag" :class="{'active': tagCode==5}" @click="changeTagCode(5)">
                            <div class="c-f18">{{orderTagDatas.processingCount}}</div>
                            <div class="mt5 c-f14 l-name">进行中</div>
                        </div>
                    </li>
                    <li>
                        <div class="tag" :class="{'active': tagCode==6}" @click="changeTagCode(6)">
                            <div class="c-f18">{{orderTagDatas.payOuttimeCount}}</div>
                            <div class="mt5 c-f14 l-name">其他原因取消</div>
                        </div>
                    </li>
                </ul>
            </div>
            <div v-show="sumType==2" class="payment-tag-panel">
                <ul class="l-banner">
                    <li style="width:calc(100% / 2)">
                        <div class="tag" :class="{'active': tagCode==1}" @click="changeTagCode(1)" style="width: 60%">
                            <div class="c-f18">{{paymentData.sum}}</div>
                            <div class="mt5 c-f14 l-name">费用总计</div>
                        </div>
                    </li>
                    <li style="width:calc(100% / 2)">
                        <div class="tag" :class="{'active': tagCode==2}" @click="changeTagCode(2)" style="width: 60%">
                            <div class="c-f18">{{paymentData.avg}}</div>
                            <div class="mt5 c-f14 l-name">人均费用</div>
                        </div>
                    </li>
                </ul>
            </div>
            <div v-show="sumType==3">
                <ul class="l-banner">
                    <li>
                        <div class="tag" :class="{'active': tagCode==1}" @click="changeTagCode(1)">
                            <div class="c-f18">{{expressData.self}}</div>
                            <div class="mt5 c-f14 l-name">居民自取</div>
                        </div>
                    </li>
                    <li>
                        <div class="tag" :class="{'active': tagCode==2}" @click="changeTagCode(2)">
                            <div class="c-f18">{{expressData.delivery}}</div>
                            <div class="mt5 c-f14 l-name">物流配送</div>
                        </div>
                    </li>
                    <li>
                        <div class="tag" :class="{'active': tagCode==3}" @click="changeTagCode(3)">
                            <div class="c-f18">{{expressData.doctor}}</div>
                            <div class="mt5 c-f14 l-name">健管师配送</div>
                        </div>
                    </li>
                </ul>
            </div>
            <div v-show="sumType==4" class="mt10 c-border">
                <div class="plr10 ptb10 c-border-b">
                    <span class="c-f14 c-333 ml5">年龄统计</span>
                </div>
                <div class="ui-grid ui-grid-middle">
                    <div class="ui-col-0 ptb10 c-position-r" style="width: 50%">
                        <div class="c-t-center chart-center-text">年龄分布<br/>情况</div>
                        <div id="agePie" style="width: 100%; height:160px;"></div>
                    </div>
                    <div class="ui-col-1" id="fenbuList">
                        <div v-for="age in ageDatas" class="mtb5 ml10">
                            <span class="color-tag" :style="{'background-color': age.color}"></span>
                            <span class="div-jkrq c-f14" :style="{'color': age.color}">{{age.value}}人</span>
                            <span class="c-f12 c-909090 ml5">({{age.name}})</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <bar-chart v-show="sumType==1 || sumType==3" class="mt15" @getbardata="getBarData" :barid="'barChart'+ sumType"></bar-chart>
            
            <line-chart v-show="sumType==2" @getlinedata="getPaymentLineData"></line-chart>
            
            <div v-show="sumType==4" class="mt10 c-border">
                <div class="plr10 ptb10 c-border-b">
                    <span class="c-f14 c-333 ml5">人均使用次数</span>
                </div>
                <div id="ageBar" style="height: 200px; width: 100%;"></div>
            </div>
            
            <area-data-panel class="mt15" @getnewdata="getBottomAreaData"></area-data-panel>
            
            <vuedals></vuedals>
        </div>
        <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../js/jquery-2.2.4.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../js/util.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../plugins/echarts/3.8.5/echarts.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../api/http-request.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../api/statistics-api.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../component/common/event-bus.js"></script>
        <script src="../../component/common/vuedals.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../component/statistics/header-tab.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../component/statistics/header-prompt.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../component/statistics/line-chart.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../component/statistics/bar-chart.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../component/statistics/area-data-panel.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../component/statistics/team-info.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/common.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/prescription-analysis.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

+ 1 - 1
component/statistics/area-data-panel.js

@ -69,7 +69,7 @@
                        title: '团队信息',
                        component: 'team-info',
                        props: {
                            teamId: 644
                            teamId: row.code
                        }
                    });
                }

+ 162 - 0
component/statistics/bar-chart.js

@ -0,0 +1,162 @@
(function(){
    Vue.component('bar-chart',{
        template: '<div class="bgc-fff c-border">\
            <div class="ui-grid ui-grid-middle plr10 c-border-b">\
                <div class="ui-col-0">\
                    <span class="c-333 c-bold c-f14">{{panelName}}</span>\
                </div>\
                <div class="ui-col-1 c-t-right ptb5">\
                    <span class="date-tag" :class="{active: selectedDateType == 1}" data-type="1" @click="changeType(1)">日</span><!--\
                    --><span class="date-tag" :class="{active: selectedDateType == 2}" data-type="2" @click="changeType(2)">周</span><!--\
                    --><span class="date-tag" :class="{active: selectedDateType == 3}" data-type="3" @click="changeType(3)">月</span>\
                </div>\
            </div>\
            <div class="clearfix mt5 plr10">\
                <div class="fl c-f12 c-909090"><span>{{startDate}}</span> ~ <span>{{endDate}}</span>数据</div>\
                <div class="fr c-f12 c-909090">单位:{{unit}}</div>\
            </div>\
            <div class="bar-chart" :id="barid" style="height: 200px; width: 100%;"></div>\
        </div>',
        props:['barid'],
        data: function(){
            return {
                selectedDateType: 1,
                startDate: "", //数据展示时显示的开始时间
                endDate: "", //数据展示时显示的结束时间
                panelName: "",
                unit: "人"
            }
        },
        methods: {
            changeType: function(type){
                this.selectedDateType = type;
                //触发页面更新折线图的数据,触发器是父类页面自定在组件上的
                this.$emit("getbardata", {dateType: type});
            }
        },
        mounted: function(){
            var vm = this;
            EventBus.$on("draw-bar-chart", function(arg){
                vm.panelName = arg.panelName;
                if(arg.unit){
                    vm.unit = arg.unit;
                }
                drawBar(vm, arg);
            })
        }
    });
    
    function drawBar(vm, arg){
        var myChart = echarts.init(document.getElementById(vm.barid));
        
        var xData = arg.xData,
            yData = arg.yData,
            name = arg.quotaName,
            color = arg.color;
        //处理数据, 数据按照10条数一屏展示
        var lastIndex = xData.length % 10;
        if(xData.length >10 ){  
            dataZoom_end = 100-(9/xData.length)*100;  
        }else{  
            dataZoom_end = 0;
        }
        //初始结束时间
        var lastValue = xData[xData.length - 1];
        if(vm.selectedDateType == 1 || vm.selectedDateType == 2){
            vm.endDate = lastValue;
        }else if(vm.selectedDateType == 3){
            var val = lastValue.substr(5,2)+"月"
            vm.endDate = lastValue.substr(0,4)+"年"+val;
        }
        // 指定图表的配置项和数据
        var option = {
            tooltip: {
                trigger: 'item'
            },
            toolbox: {
                dataZoom: true,
                show: true,
                orient: 'vertical',
                x: 'right',
                y: 'center'
            },
            grid: {
//              show: false,
                left: '20px',
                right: '20px',
                bottom: '40px',
                top: '20px',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: xData,
                axisLabel: {
                    interval:0,//横轴信息全部显示  
                    formatter: function (value, index) {
                        if(vm.selectedDateType == 1 || vm.selectedDateType == 2){
                            if(index == 0){
                                vm.startDate = value;
                                return value.substr(5,2)+"月"+value.substr(8,2)+"日";
                            }else{
                                if(index == 9){
                                    vm.endDate = value;
                                }
                                return value.substr(8,2)+"日";
                            }
                            
                        }else if(vm.selectedDateType == 3){
                            var val = value.substr(5,2)+"月"
                            if(index == 0){
                                vm.startDate = value.substr(0,4)+"年"+val;
                            }else{
                                if(index == 9){
                                    vm.endDate = value.substr(0,4)+"年"+val;
                                }
                            }
                            return val;
                        }
                        return value;
                    }
                },
                splitLine: {
                    show: false
                }
            }],
            yAxis: [{
                type: 'value',
                splitLine: {show:false}
            }],
            dataZoom: [{//给x轴设置滚动条  
//              show: false,
                start: dataZoom_end,
                end: 100,
                type: 'slider',
                zoomLock: true,
            },{ //下面这个属性是内容区域配置
                start: dataZoom_end,
                end: 100,
                type: 'inside',
                zoomLock: true,
            }],
            series: [{
                clickable: true,
                name: name,
                itemStyle : { 
                    normal: {
                        label : {
                            show: true, position: 'top'
                        },
                        color: color
                    }
                },
                barWidth: 20,
                type: 'bar',
                data: yData 
            }]
        };
        
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
})()

+ 6 - 2
component/statistics/line-chart.js

@ -13,7 +13,7 @@
            </div>\
            <div class="clearfix mt5 plr10">\
                <div class="fl c-f12 c-909090"><span>{{startDate}}</span> ~ <span>{{endDate}}</span>数据</div>\
                <div class="fr c-f12 c-909090">单位:人</div>\
                <div class="fr c-f12 c-909090">单位:{{unit}}</div>\
            </div>\
            <div class="line-chart" id="lineChart" style="height: 200px; width: 100%;"></div>\
        </div>',
@ -23,7 +23,8 @@
                selectedDateType: 1,
                startDate: "", //数据展示时显示的开始时间
                endDate: "", //数据展示时显示的结束时间
                panelName: ""
                panelName: "",
                unit: "人"
            }
        },
        methods: {
@ -37,6 +38,9 @@
            var vm = this;
            EventBus.$on("draw-line-chart", function(arg){
                vm.panelName = arg.panelName;
                if(arg.unit){
                    vm.unit = arg.unit;
                }
                drawLine(vm, arg);
            })
        }