zhsq_qk/leiSP-admin/target/classes/static/bigdata/fzjc/js/sjsq_10.js

$(document).ready(function () {
    let dom = document.getElementById("sjsq10");
    let myChart = echarts.init(dom);
    let app = {};
    let option;
    $.post(ctx + "fzjc/sjsqJdSbbjtj",function (res){
        option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['上报数', '办结数'],
                textStyle: {
                    color: '#00cdef'
                }
            },
            grid: {
                top: '15%',
                left: '5%',
                right: '5%',
                bottom: '5%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: res[0].names,
                axisLabel: {
                    interval: 0,
                    formatter:function(value)
                    {
                        let ret = "";//拼接加\n返回的类目项
                        let maxLength = 2;//每项显示文字个数
                        let valLength = value.length;//X轴类目项的文字个数
                        let rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                        if (rowN > 1)//如果类目项的文字大于3,
                        {
                            for (let i = 0; i < rowN; i++) {
                                let temp = "";//每次截取的字符串
                                let start = i * maxLength;//开始截取的位置
                                let end = start + maxLength;//结束截取的位置
                                //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                                temp = value.substring(start, end) + "\n";
                                ret += temp; //凭借最终的字符串
                            }
                            return ret;
                        }
                        else {
                            return value;
                        }
                    },
                    color: '#00cdef'
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#00cdef'
                    }
                },
                splitLine: {
                    show: false
                },
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    show: true,
                    color: '#00cdef'
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#00cdef'
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#0b3747'
                    }
                },
            },
            series: [
                {
                    name: '上报数',
                    type: 'line',
                    data: res[0].datas,
                    areaStyle: {
                        opacity: 0.8,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgb(148, 99, 66)'
                            },
                            {
                                offset: 1,
                                color: 'rgb(242, 200, 34)'
                            }
                        ])
                    },
                },
                {
                    name: '办结数',
                    type: 'line',
                    data: res[1].datas,
                    areaStyle: {
                        opacity: 0.8,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgb(35, 219, 74)'
                            },
                            {
                                offset: 1,
                                color: 'rgb(35, 79, 215)'
                            }
                        ])
                    },
                },
            ]
        };
        if (option && typeof option === 'object') {
            myChart.setOption(option);
            myChart.on("click",function (params) {
                let prefix = ctx ;
                let jidu;
                let type;
                switch(params.name){//季度
                    case "第一季度" : jidu = 1; break;
                    case "第二季度" : jidu = 2; break;
                    case "第三季度" : jidu = 3; break;
                    case "第四季度" : jidu = 4; break;
                }
                switch(params.seriesName){//类型 1上报，2办结,3签收
                    case "上报数" : type = 1; break;
                    case "办结数" : type = 2; break;
                    case "签收数" : type = 3; break;
                }
                let btn = ['<i class="fa fa-close"></i> 关闭'];
                let options = {
                    title: '季度上报与办结统计',
                    width: "1000",
                    height: "550",
                    url: prefix+"fzjc/goSjsqLine/"+jidu+"/"+type,
                    btn: btn,
                    callBack: doSubmit
                };
                $.modal.openOptions(options);
            });
            function doSubmit(index, layero){
                layer.close(index);
            }
        }
    });
});