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

(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}" @click="changeType(1)">日</span><!--\
                    --><span class="date-tag" :class="{active: selectedDateType == 2}" @click="changeType(2)">周</span><!--\
                    --><span class="date-tag" :class="{active: selectedDateType == 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.selectedDateType){
                    vm.selectedDateType = arg.selectedDateType;
                }
                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);
        window.barCharts = myChart;
    }
})()