visualization/js/index.js

var loadGeoJson = {};
var element;
var table;
var slider;
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var option;
var myCharts = {};
var myTables = {};
myChart.showLoading();
var msurl = './json/市级_山西.json';
var qxurl = './json/县级_山西.json';
var namefield = "name";
var valuefield = "Shape_Area";
var codefield = "CODE";
var statisticsInfoByXZQ;
var xzqSlider;
var resertEchartsParams = {};

$(".loading").css("line-height", $(".loading").height() + "px");

window.onload = function () {
    setTimeout(function () {
        layui.use(['form', 'layer', 'element', 'slider', 'table'], function () {
            element = layui.element;
            table = layui.table;
            slider = layui.slider;
            init();
        });
        $(".xzqBtn").click(function (e) {
            onTabClick(e);
        });
    }, 5);
}

function getGeoJson(url) {
    $.ajaxSettings.async = false;
    var geojson = null;
    $.get(url, function (results) {
        geojson = results;
    });
    return geojson;
}

function getXZQData() {
    var resultData;
    $.ajax({
        type: globleConfig.ajaxType,
        async: false,
        url: globleConfig.ajax,
        data: {
            "mtype": globleConfig.mtype,
            "dataBaseSelected": globleConfig.dataBaseSelected, // 所选数据库名称,
            "tableTypeSelected": globleConfig.tableTypeSelected,
            "tableDataSelected": XZQConfig.tableDataSelected,
            "dimensionSelected": JSON.stringify(XZQConfig.dimensionSelected),
            "measureSelected": JSON.stringify(XZQConfig.measureSelected),
            "aggregate": XZQConfig.aggregate,
            "filterdata": XZQConfig.filterdata,
            "queryFields": ""
        },
        datatype: 'json',
        success: function (res) {
            var resArr = res.split('||');
            if (resArr.length == 0) {
                console.log("数据请求失败！");
            } else if (resArr.length == 3) {
                if (resArr[2].split("^_^")[0] && resArr[2].split("^_^")[0] != "{}") {
                    resultData = JSON.parse(resArr[2].split("^_^")[0]);
                }
            } else {
                if (resArr[0]) {
                    resultData = JSON.parse(resArr[0]);
                }
            }
        },
        error: function (err) {
            console.log(err);
            if (err.status == 405)
                top.location.href = '/login/LoginNew.aspx';
        }
    });
    return resultData;
}

function init() {
    // var userinfo = getUserInfo();
    // if (!userinfo) {
    //     console.error("专项统计模块获取登陆信息失败！");
    //     return;
    // }
    windowResizeFun();
    var list = {};
    for (var attr in TDYTDM.classify) {
        var item = TDYTDM.classify[attr];
        for (var i = 0 ; i < item.length ; i++) {
            list[item[i]] = attr;
        }
    }
    TDYTDM["handle"] = list;
    resertEcharts("", "1");
    myChart.on('click', function (params) {
        if (params.name) {
            $(".loading").show();
            setTimeout(function () {
                resertEcharts(params.data.code, (parseInt(params.seriesName) + 1).toString(), params.name);
            },100);
        }
    });
    myChart.hideLoading();
}

function resertEcharts(xzq, type, name, year) {
    if (!year) {
        resertEchartsParams = {
            xzq: xzq,
            type: type,
            name: name
        }
    }
    if (!statisticsInfoByXZQ) {
        statisticsInfoByXZQ = getXZQData();
        if (statisticsInfoByXZQ) {
            var years = [];
            for (var attr in statisticsInfoByXZQ) {
                years.push(parseInt(attr));
            }
            years.sort(function (a,b){
                return a - b;
            });
            statisticsInfoByXZQ["years"] = years;
        }
        xzqSlider = slider.render({
            elem: '#' + XZQConfig.container,
            min: years[0],
            max: years[years.length - 1],
            theme: '#5470c6',
            //type: 'vertical', //垂直滑块
            showstep: true,
            change: function (data) {
                resertEcharts(null, null, null, data);
            }
        });
        statisticsInfoByXZQ["curYear"] = statisticsInfoByXZQ["years"][0];
    }
    var curYear = year ? year : statisticsInfoByXZQ["curYear"];
    $(".yearSpan").html(curYear + "年");
    statisticsInfoByXZQ["curYear"] = curYear;
    var list = [];
    var chartType = "";
    switch (resertEchartsParams.type) {
        case "1": //盟市
            var html = "<a class='xzqBtn' value='' type='1' >山西省</a>";
            elementTemplate(html);
            chartType = "MS";
            if (!loadGeoJson[chartType]) {
                loadGeoJson[chartType] = getGeoJson(msurl);
            }
            for (var i = 0; i < loadGeoJson[chartType].features.length; i++) {
                var info = loadGeoJson[chartType].features[i]["properties"];
                var code = info[codefield].substr(0, 4);
                var value = 0;
                for (var attr in statisticsInfoByXZQ[curYear]) {
                    if (attr.toString().indexOf(code) == 0) {
                        value += parseFloat(statisticsInfoByXZQ[curYear][attr]);
                    }
                }
                list.push({
                    name: info[namefield],
                    value: value ? Math.round(value * 100) / 100 : 0,
                    code: info[codefield]
                });
            }
            echarts.registerMap('MS', loadGeoJson[chartType]);
            break;
        case "2": //旗县
            var html = "<a class='xzqBtn' value='' type='1' >山西省</a>";
            html += "<a class='xzqBtn' value='" + resertEchartsParams.xzq + "' type='2' >" + resertEchartsParams.name + "</a>";
            elementTemplate(html);
            chartType = resertEchartsParams.xzq.length == 6 ? resertEchartsParams.xzq.substr(0, 4) : resertEchartsParams.xzq;
            if (!loadGeoJson["QX"]) {
                loadGeoJson["QX"] = getGeoJson(qxurl);
            }
            var list = [];
            var json = {
                type: "FeatureCollection",
                features: []
            };
            for (var i = 0; i < loadGeoJson["QX"].features.length; i++) {
                var info = loadGeoJson["QX"].features[i]["properties"];
                if (info[codefield].indexOf(chartType) > -1) {
                    list.push({
                        name: info[namefield],
                        value: statisticsInfoByXZQ[curYear][info[codefield]] ? Math.round(parseFloat(statisticsInfoByXZQ[curYear][info[codefield]]) * 100) / 100 : 0,
                        code: info[codefield]
                    });
                    json.features.push(loadGeoJson["QX"].features[i]);
                }
            }
            echarts.registerMap(chartType, json);
            break;
        case "3": //旗县
            var html = $(".layui-breadcrumb").text().split(">")[1];
            html = "<a class='xzqBtn' value='' type='1' >山西省</a><a class='xzqBtn' value='" + resertEchartsParams.xzq.substr(0, 4) + "' type='2' >" + html + "</a>";
            html += "<a class='xzqBtn' value='" + resertEchartsParams.xzq + "' type='3' >" + resertEchartsParams.name + "</a>";
            elementTemplate(html);
            chartType = resertEchartsParams.xzq;
            if (!loadGeoJson["QX"]) {
                loadGeoJson["QX"] = getGeoJson(qxurl);
            }
            var list = [];
            var json = {
                type: "FeatureCollection",
                features: []
            };
            for (var i = 0; i < loadGeoJson["QX"].features.length; i++) {
                var info = loadGeoJson["QX"].features[i]["properties"];
                if (info[codefield] == chartType) {
                    list.push({
                        name: info[namefield],
                        value: statisticsInfoByXZQ[curYear][info[codefield]] ? Math.round(parseFloat(statisticsInfoByXZQ[curYear][info[codefield]]) * 100) / 100 : 0,
                        code: info[codefield]
                    });
                    json.features.push(loadGeoJson["QX"].features[i]);
                    break;
                }
            }
            echarts.registerMap(chartType, json);
            break;
        default:
            return $(".loading").hide();
            break;
    }
    list.sort(function (a, b) {
        return a.value - b.value
    });
    option = {
        title: {
            text: '{A|     ' + XZQConfig.chartTitle + '}',
            x: 'left',
            //padding: [5, 5, 5, 5],
            textStyle: {
                align: 'center',
                rich: {
                    A: {
                        backgroundColor: {
                            image: XZQConfig.titleImage.image,
                        },
                        width: XZQConfig.titleImage.width,
                        height: XZQConfig.titleImage.height,
                        color: "#5470c6",
                        fontSize: 17,
                        fontWeight: 'bold',
                        verticalAlign: "middle",
                        lineHeight: 50,
                        left: 15
                    }
                }
            },
            left: 15
        },
        tooltip: {
            trigger: 'item',
            show: true,
            formatter: function (data) {
                var total = 0;
                for (var i = 0 ; i < myChart.getOption().series[0].data.length ; i++) {
                    total += myChart.getOption().series[0].data[i].value;
                }
                //return data.name + '<br/>' + XZQConfig.title + data.value + XZQConfig.unit;
                var per = Math.round(data.value / total * 10000) / 100;
                return data.name + '<br/>' + XZQConfig.title + data.value + XZQConfig.unit + '<br/>占比：' + per + "%";
            }
        },
        toolbox: {
            show: false,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                saveAsImage: {}
            }
        },
         visualMap: {
             min: list[0].value,
             max: list[list.length - 1].value,
             text: ['高', '低'],
             realtime: false,
             calculable: true,
             inRange: {
                 //color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                 //color: globleConfig.color
                 color: ['#0000ff30', '#0000ff']
             },
             orient: 'vertical',
             right: 'right',
             bottom: 'bottom',
         },
        series: [{
            name: resertEchartsParams.type,
            type: 'map',
            roam: true,
            mapType: chartType, // 自定义扩展图表类型
            label: {
                show: true,
                //color: "blue",
                //fontStyle: 'normal',
                //fontWeight: 'normal',
                textBorderColor: "white",
                textBorderWidth: 1
            },
            itemStyle: {
                normal: {
                    borderWidth:1,
                    borderColor: '#ddd',//区域边框色
                    //areaColor: '#FFDAB9',//区域背景色
                    label: {
                        show: true,
                        //textBorderColor: "white",
                        //textBorderWidth: 1,
                        textStyle: {
                            color: '#ffffff',//文字颜色
                            fontSize:12      //文字大小
                        }
                    }
                },
                emphasis: {                 // 选中样式
                    borderWidth:1,
                    borderColor:'#00ffff',
                    color: '#ffffff',
                    label: {
                        show: true,
                        textStyle: {
                            color: '#ff0000'
                        }
                    }
                }
            },
            data: list
        }]
    };
    myChart.clear();
    myChart.setOption(option);

    if (year) {
        var data = filterArray(myTables["myChartTable2"].config.dataStore, [{
            field: "QDRQ",
            value: year,
            type: "like"
        }]);
        myTables["myChartTable2"].reload({
            data: data
        }, false);
    } else {
        createVisualizationCharts(resertEchartsParams.xzq ? chartType : "")
    }
}

function elementTemplate(html) {
    $(".layui-breadcrumb").html(html);
    element ? element.render() : null;
    $(".xzqBtn").click(function (e) {
        onTabClick(e);
    });
}

function onTabClick(e) {
    $(".loading").show();
    setTimeout(function () {
        resertEcharts($(e.target).attr("value"), $(e.target).attr("type"), $(e.target).html());
    },50);
}

function createVisualizationCharts(xzq) {
    for (var attr in chartsConfig) {
        var params = chartsConfig[attr];
        if (!params.able) { continue; }
        var queryFields = "";
        if (params.queryFields) {
            for (var k = 0 ; k < params.queryFields.length ; k++) {
                queryFields += params.queryFields[k].name + ",";
            }
            queryFields = queryFields.substring(0, queryFields.length - 1);
        }
        var resultData;
        var where = globleConfig.XZQFIELD + " like '" + xzq + "%'" 
        $.ajax({
            type: globleConfig.ajaxType,
            async: false,
            url: globleConfig.ajax,
            data: {
                "mtype": globleConfig.mtype,
                "dataBaseSelected": globleConfig.dataBaseSelected, // 所选数据库名称,
                "tableTypeSelected": globleConfig.tableTypeSelected,
                "tableDataSelected": params.tableDataSelected,
                "dimensionSelected": params.dimensionSelected ? JSON.stringify(params.dimensionSelected) : "",
                "measureSelected": params.measureSelected ? JSON.stringify(params.measureSelected) : "",
                "aggregate": params.aggregate,
                "filterdata": xzq ? (params.filterdata ? params.filterdata + " and " + where : where) : params.filterdata,
                "queryFields": queryFields
            },
            datatype: 'json',
            success: function (res) {
                var resArr = res.split('||');
                if (resArr.length == 0) {
                    console.log("数据请求失败！");
                } else if (resArr.length == 3) {
                    if (resArr[2].split("^_^")[0] && resArr[2].split("^_^")[0] != "{}") {
                        resultData = JSON.parse(resArr[2].split("^_^")[0]);
                    }
                } else {
                    if (resArr[0]) {
                        resultData = JSON.parse(resArr[0]);
                    }
                }
            },
            error: function (err) {
                console.log(err);
                if (err.status == 405)
                    top.location.href = '/login/LoginNew.aspx';
            }
        });
        if (resultData) {
            createVisualizationChartsHandle(params, resultData);
        } else {
            //$("#" + params.container).html(params.noText);
            alert(params.noText);
        }
    }
    $(".loading").hide();
}

function createVisualizationChartsHandle(params, resultData) {
    var id = params.container;
    var chartType = params.chartType;
    var field = params.dimensionSelected && params.dimensionSelected[0].FIELDNAME;
    var measure = params.measureSelected && params.measureSelected[0].FIELDNAME;
    var legend = params.dimensionSelected && params.dimensionSelected[0].COLUMN_NAME;
    var chartOption;
    switch (chartType) {
        case "bar":
            var xAxis = [];
            var series = [];
            for (var i = 0 ; i < resultData.length ; i++) {
                xAxis.push(resultData[i][field]);
                series.push({
                    value: Math.round(parseFloat(resultData[i][measure]) * 100) / 100,
                    itemStyle: {
                        color: globleConfig.color[i] ? globleConfig.color[i] : randomColor()
                    }
                })
            }
            chartOption = {
                title: {
                    text: '{A|     ' + params.title + '}',
                    left: 10,
                    textStyle: {
                        rich: {
                            A: {
                                backgroundColor: {
                                    image: params.titleImage.image,
                                },
                                width: params.titleImage.width,
                                height: params.titleImage.height,
                                color: "#5470c6",
                                fontSize: 16,
                                fontWeight: 'bold',
                                verticalAlign: "middle",
                                lineHeight: 26,
                                left: 15
                            }
                        }
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: [legend],
                    top: 35
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        mark: { show: true },
                        magicType: { show: true, type: ['line', 'bar'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: xAxis
                    }
                ],
                yAxis: [
                        {
                            type: 'value',
                            name: params.unit,
                            axisLine: { show: true },
                            axisTick: { show: true }
                        }
                ],
                grid: {
                    top: 90,
                    bottom: 30
                },
                series: [
                    {
                        name: legend,
                        type: 'bar',
                        data: series,
                        markPoint: {
                            data: [
                                { type: 'max', name: '最大值' },
                                { type: 'min', name: '最小值' }
                            ]
                        },
                        markLine: {
                            data: [
                                { type: 'average', name: '平均值' }
                            ]
                        }
                    }
                ]
            };
            break;
        case "line":
            if (params.dimensionSelected.length == 2) {//二维
                var years = [];
                var data = {};
                for (var attr in resultData) {
                    years.push(attr);
                    data[attr] = {};
                    var item = resultData[attr];
                    for (var e in item) {
                        var key = TDYTDM.handle[e];
                        if (!data[attr][key]) {
                            data[attr][key] = 0;
                        }
                        data[attr][key] += Math.round(parseFloat(item[e]) * 100) / 100
                    }
                    for (var param in TDYTDM.classify) {
                        if (!data[attr][param]) {
                            data[attr][param] = 0;
                        } else {
                            data[attr][param] = Math.round(data[attr][param] * 100) / 100;
                        }
                    }
                }
                var seriesList = [];
                var legendList = [];
                for (var item in TDYTDM.classify) {
                    legendList.push(item);
                    var list = [];
                    for (var i = 0 ; i < years.length ; i++) {
                        list.push(data[years[i]][item]);
                    }
                    seriesList.push({
                        name: item,
                        type: 'line',
                        data: list
                    });
                }
                chartOption = {
                    title: {
                        text: '{A|     ' + params.title + '}',
                        left: 10,
                        textStyle: {
                            color: "#5470c6",
                            fontSize: 16,
                            verticalAlign: "middle",
                            lineHeight: 26,
                            rich: {
                                A: {
                                    backgroundColor: {
                                        image: params.titleImage.image,
                                    },
                                    width: params.titleImage.width,
                                    height: params.titleImage.height,
                                    color: "#5470c6",
                                    fontSize: 16,
                                    fontWeight: 'bold',
                                    verticalAlign: "middle",
                                    lineHeight: 26,
                                    left: 15
                                }
                            }
                        }
                    },
                    color: globleConfig.color,
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        top: 90,
                        left: 200,
                        bottom: 30
                    },
                    legend: {
                        data: legendList,
                        orient: 'vertical',
                        left: 'left',
                        top: 'center',
                    },
                    toolbox: {
                        show: true,
                        orient: 'vertical',
                        left: 'right',
                        top: 'center',
                        feature: {
                            mark: { show: true },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: years
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: params.unit,
                            axisLine: { show: true },
                            axisTick: { show: true }
                        }
                    ],
                    series: seriesList
                };
            } else {
                var xAxis = [];
                var series = [];
                for (var i = 0 ; i < resultData.length ; i++) {
                    xAxis.push(resultData[i][field]);
                    series.push(Math.round(parseFloat(resultData[i][measure]) * 100) / 100);
                }
                chartOption = {
                    title: {
                        text: '{A|     ' + params.title + '}',
                        left: 10,
                        textStyle: {
                            color: "#5470c6",
                            fontSize: 16,
                            verticalAlign: "middle",
                            lineHeight: 26,
                            rich: {
                                A: {
                                    backgroundColor: {
                                        image: params.titleImage.image,
                                    },
                                    width: params.titleImage.width,
                                    height: params.titleImage.height,
                                    color: "#5470c6",
                                    fontSize: 16,
                                    fontWeight: 'bold',
                                    verticalAlign: "middle",
                                    lineHeight: 26,
                                    left: 15
                                }
                            }
                        }
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    color: globleConfig.color,
                    legend: {
                        data: [legend]
                    },
                    toolbox: {
                        show: true,
                        orient: 'vertical',
                        left: 'right',
                        top: 'center',
                        feature: {
                            mark: { show: true },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    grid: {
                        top: 90,
                        left: 200,
                        bottom: 30
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: xAxis
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: params.unit,
                            axisLine: { show: true },
                            axisTick: { show: true }
                        }
                    ],
                    series: [
                        {
                            name: legend,
                            type: 'line',
                            data: series,
                            markPoint: {
                                data: [
                                    { type: 'max', name: '最大值' },
                                    { type: 'min', name: '最小值' }
                                ]
                            },
                            markLine: {
                                data: [
                                    { type: 'average', name: '平均值' }
                                ]
                            }
                        }
                    ]
                };
            }
            break;
        case "table":
            var cols = [];
            for (var k = 0 ; k < params.queryFields.length ; k++) {
                var name = params.queryFields[k].name;
                if (name.indexOf(" as ") > 0) {
                    name = name.split(" as ")[1].replace(" ","")
                }
                cols.push({
                    field: name,
                    title: params.queryFields[k].alias,
                    fixed: true,
                    sort: true,
                    minWidth: 120
                });
            }
            myTables[id] = table.render({
                elem: '#' + id,
                height: $($('#' + id).parent()).height(),
                toolbar: '#toolbarDemo',
                defaultToolbar: ['filter', 'exports', 'print'],
                data: resultData,
                dataStore: resultData,
                page: true, //开启分页
                cols: [cols],
                text: {
                    none: '暂无数据'
                }
            });
            table.on('toolbar(' + id + ')', function (obj) {
                switch (obj.event) {
                    case 'queryData':
                        var fieldsList = [];
                        for (var i = 0 ; i < $(".queryInput").length ; i++) {
                            if ($($(".queryInput")[i]).val().replace(" ", "")) {
                                fieldsList.push({
                                    field: $($(".queryInput")[i]).attr("field"),
                                    value: $($(".queryInput")[i]).val().replace(" ", ""),
                                    type: "like"
                                });
                            }
                        }
                        var data = filterArray(obj.config.dataStore, fieldsList);
                        myTables[obj.config.id].reload({
                            data: data
                        }, false);
                        for (var i = 0 ; i < fieldsList.length ; i++) {
                            $(".queryInput[field$='" + fieldsList[i].field + "']").val(fieldsList[i].value);
                        }
                        break;
                    default:
                        break;
                };
            });

            table.on('row(' + id + ')', function (obj) {
                console.log(obj);
            });
            break;
    }
    if (chartOption) {
        if (!myCharts[id]) {
            myCharts[id] = echarts.init(document.getElementById(id));
        } else {
            myCharts[id].clear();
        }
        myCharts[id].setOption(chartOption);
        myCharts[id].on('click', function (params) {
            console.log(params);
            resertEcharts(null, null, null, parseInt(params.name));
        });
    }
    $(".loading").hide();
}

function randomColor() {//得到随机的颜色值
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    return "rgb(" + r + "," + g + "," + b + ")";
}