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

(function(){
    var startDate,
        endDate;
    Vue.component('line-chart',{
        template: '<div class="mtb10 bgc-fff c-border pb10">\
            <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="ui-grid ui-grid-middle mt5 plr10">\
                <div v-if="showDatePanel" class="ui-col-1" >\
                    <span>数据时间:</span>\
                    <el-date-picker\
                      v-model="dateValue"\
                      type="daterange"\
                      align="right"\
                      unlink-panels\
                      range-separator="至"\
                      start-placeholder="开始日期"\
                      end-placeholder="结束日期"\
                      :default-value="defaultValue"\
                      :picker-options="pickerOptions2"\
                      @change="dateChange"\
                    >\
                    </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">单位：{{unit}}</div>\
            </div>\
            <div class="line-chart" :id="lineid" style="height: 200px; width: 100%;"></div>\
        </div>',
        props:['lineid', 'showDatePanel'],
        data: function(){
            return {
                selectedDateType: 1,
                startDate: "", //数据展示时显示的开始时间
                endDate: "", //数据展示时显示的结束时间
                panelName: "",
                unit: "人",
                dateValue: "",
                defaultValue: [],
                pickerOptions2: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                          var end = new Date();
                          var start = new Date();
                          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                          picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                          var end = new Date();
                          var start = new Date();
                          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                          picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                          var end = new Date();
                          var start = new Date();
                          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                          picker.$emit('pick', [start, end]);
                        }
                    }],
                    disabledDate: function(d){
                        var start = new Date(startDate),
                            end = new Date(endDate);
                        return d < start || d > end;
                    }
                }
            }
        },
        watch:{
            dateValue: function(val){
//              this.$emit("getlinedata", {dateValue: val});
                if(val){
                    startDate = this.dateValue[0];
                    endDate = this.dateValue[1];
                }
                
            }
        },
        methods: {
            changeType: function(type){
                this.selectedDateType = type;
                //触发页面更新折线图的数据,触发器是父类页面自定在组件上的
                this.$emit("getlinedata", {dateType: type});
            },
            dateChange: function(val){
                var start = val[0].format("yyyy-MM-dd"),
                    end = val[1].format("yyyy-MM-dd");
                this.$emit("getlinedata", {dateType: this.selectedDateType, dateValue: [start, end]});
            }
        },
        mounted: function(){
            var vm = this;
            EventBus.$on("draw-line-chart", function(arg){
                vm.panelName = arg.panelName;
                if(arg.selectedDateType){
                    vm.selectedDateType = arg.selectedDateType;
                }
                if(arg.unit){
                    vm.unit = arg.unit;
                }
                vm.dateValue = arg.dateValue;
                drawLine(vm, 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;
    }
})()