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

(function(){
    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="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="line-chart" id="lineChart" style="height: 200px; width: 100%;"></div>\
        </div>',
        props:[],
        data: function(){
            return {
                selectedDateType: 1,
                startDate: "", //数据展示时显示的开始时间
                endDate: "", //数据展示时显示的结束时间
                panelName: "",
                unit: "人"
            }
        },
        methods: {
            changeType: function(type){
                this.selectedDateType = type;
                //触发页面更新折线图的数据,触发器是父类页面自定在组件上的
                this.$emit("getlinedata", {dateType: type});
            }
        },
        mounted: function(){
            var vm = this;
            EventBus.$on("draw-line-chart", function(arg){
                vm.panelName = arg.panelName;
                if(arg.unit){
                    vm.unit = arg.unit;
                }
                drawLine(vm, arg);
            })
        }
    });
    
    function drawLine(vm, arg){
        var lineCharts = echarts.init(document.getElementById('lineChart'));
        var xData = arg.xData,
            yDatas = arg.yDatas,
            names = arg.quotaNames,
            colors = arg.colors,
            markLineValue = arg.markLineValue,
            markLineName = arg.markLineName;
        //处理数据, 数据按照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 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 == 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;
                        }
                    }
                }
            },
            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: true,
            },{ //下面这个属性是内容区域配置
                start: dataZoom_end,
                end: 100,
                type: 'inside',
                zoomLock: true,
            }]
        };
        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));
        $("#lineChart").removeAttr('_echarts_instance_')
        lineCharts.setOption(options);
    }
})()