PC-application/component/statistics/line-chart.js

(function(){
    var startDate,
        endDate,
        chooseYear;
    Vue.component('line-chart',{
        template: '<div class="mtb10 bgc-fff c-border pb10 c-position-r">\
            <div class="ui-grid plr10 c-border-b">\
                <div class="ui-col-0 ptb10">\
                    <span class="c-333 c-f16">{{panelName}}</span>\
                </div>\
                <div class="ui-col-1 c-t-right ptb5" v-show="!noDateType">\
                    <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="ui-grid ui-grid-middle mt5 plr10" v-if="!noshowDate">\
                <div v-if="showDatePanel" class="ui-col-1" >\
                    <span>数据时间:</span>\
                    <el-date-picker\
                      v-model="defaultValue[0]"\
                      type="date"\
                      unlink-panels\
                      placeholder="开始日期"\
                      :picker-options="pickerOptions2"\
                      @change="dateChange"\
                      value-format="yyyy-MM-dd"\
                    >\
                    </el-date-picker>\
                    <span>—</span>\
                    <el-date-picker\
                      v-model="defaultValue[1]"\
                      type="date"\
                      unlink-panels\
                      placeholder="结束日期"\
                      :picker-options="pickerOptions2"\
                      @change="dateChange"\
                      value-format="yyyy-MM-dd"\
                    >\
                    </el-date-picker>\
                </div>\
                <div v-if="!showDatePanel" class="ui-col-1 c-f12 c-909090"><span>{{startDate}}</span> ~ <span>{{endDate}}</span>数据</div>\
                <div class="ui-col-0 c-f12 c-909090 pr15">单位：{{unit}}</div>\
            </div>\
            <div v-else class="c-f12 c-909090 mtb10 pl15">单位：{{unit}}</div>\
            <div class="line-chart" :id="lineid" style="width: 100%;" :style="{ height: chartheight + \'px\' }"></div>\
        </div>',
        props:['lineid', 'showDatePanel'],
        data: function(){
            return {
                selectedDateType: 1,
                startDate: "", //数据展示时显示的开始时间
                endDate: "", //数据展示时显示的结束时间
                panelName: "",
                unit: "人",
                dateValue: "",
                defaultValue: [],
                pickerOptions2: {
                    disabledDate: function(d){
                        var start = new Date(getStartDate(chooseYear)+" 00:00:00"),
                            end = new Date(getEndDate(chooseYear)+" 23:59:59");
                        return d < start || d > end;
                    }
                },
                chooseYear:"",
                noDateType:false,   //不显示年月日
                chartheight:200,   //表格高度
                noshowDate:false,   //显示统计时间
            }
        },
        methods: {
            changeType: function(type){
                this.selectedDateType = type;
                //触发页面更新折线图的数据,触发器是父类页面自定在组件上的
                this.$emit("getlinedata", {dateType: type});
            },
            dateChange: function(){
            	var vm=this
            	if(vm.defaultValue[0]&&vm.defaultValue[1]){
            		if(vm.defaultValue[0]>vm.defaultValue[1]){
            			vm.$message.warning("开始时间应小于结束时间")
            		}else{
            			this.$emit("getlinedata", {dateType: this.selectedDateType, dateValue: [vm.defaultValue[0], vm.defaultValue[1]]});
            		}
            	}
            }
        },
        mounted: function(){
            var vm = this;
            EventBus.$on("draw-line-chart", function(arg){
            	if(!arg.nowlineid||arg.nowlineid == vm.lineid){            		
	                vm.panelName = arg.panelName;
	                if(arg.selectedDateType){
	                    vm.selectedDateType = arg.selectedDateType;
	                }
	                if(arg.unit){
	                    vm.unit = arg.unit;
	                }
	                vm.dateValue = arg.dateValue;
//	                vm.chooseYear = arg.chooseYear;
	                chooseYear = arg.chooseYear;
	                vm.noDateType=arg.noDateType;
	                vm.noshowDate=arg.noshowDate;
	                if(arg.chartheight){
	                	vm.chartheight=arg.chartheight
	                }
					vm.$nextTick(function(){
	                	drawLine(vm, arg);
					})
            	}
            })
            
            EventBus.$on("change-date-value", function(arg){
                this.defaultValue = arg;
            })
        }
    });
    
    function drawLine(vm, arg){
        var lineCharts = echarts.init(document.getElementById(vm.lineid));
        var xData = arg.xData,
            yDatas = arg.yDatas,
            names = arg.quotaNames,
            colors = arg.colors,
            markLineValue = arg.markLineValue,
            markLineName = arg.markLineName;
        //处理数据, 数据按照20条数一屏展示
//      var lastIndex = xData.length % 20;
        if(xData.length > 20 ){  
            dataZoom_end = 100-(19/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 options = {
            tooltip: {
                trigger: 'axis'
            },
            color: colors,
            legend: {
                top: '0px',
                data: names,
                borderColor: "#f1f1f1"
            },
            grid: {
                show: false,
                left: '20px',
                right: '20px',
                bottom: '40px',
                top: '20px',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                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 == 19){
                                    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 == 19){
                                    vm.endDate = value.substr(0,4)+"年"+val;
                                }
                            }
                            return val;
                        }
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisPointer: {
                    snap: true
                },
                scale: true,
                minInterval: 1,
                boundaryGap: ['10%', '30%'],
                splitLine: {show:false}
            },
            dataZoom: [{//给x轴设置滚动条  
//              show: false,
                start: dataZoom_end,
                end: 100,
                type: 'slider',
                zoomLock: false,
            },{ //下面这个属性是内容区域配置
                start: dataZoom_end,
                end: 100,
                type: 'inside',
                zoomLock: false,
            }]
        };
        var series = [];
        for(var i=0; i<yDatas.length; i++){
            var obj = {
                name: names[i],
                type: 'line',
                smooth: true,
                data: yDatas[i],
                lineStyle:{
                    normal:{
                        color: colors[i]
                    }
                }
            };
            series.push(obj);
        }
        options.series = series;
        if(markLineValue){ 
            //目前统计只有签约统计页面有目标量
            $.extend(options.yAxis, {
                min: function(value) {
                    if(value.min > markLineValue){
                        return markLineValue / 2;
                    }else{
                        return value.min / 2;
                    }
                },
                max: function(value){
                    if(value.max > markLineValue){
                        return parseInt(value.max * 1.5);
                    }else{
                        return parseInt(markLineValue * 1.2);
                    }
                }
            });
            $.extend(options.series[0], {markLine: {
                    data:[
                        {yAxis: markLineValue, name: markLineName}
                    ],
                    label:{
                        show: true,
                        position: 'middle',
                        formatter: '{b}: {c}'
                    },
                    lineStyle:{
                        color: 'rgb(194,53,49)'
                    }
            }});
        }
//          console.log(JSON.stringify(options));
        $("#"+vm.lineid).removeAttr('_echarts_instance_')
        lineCharts.setOption(options);
        window.lineCharts = lineCharts;
    }
})()