visualization/js/myEcharts.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 = {};
var objList = []
var levelName = ['优等地', '高等地', '中等地', '低等地']
var levelColor = ['rgb(77,179,0)', 'rgb(187,230,0)', 'rgb(237,213,0)', 'rgb(199,139,0)']
var XZQDMName = null
var mapYears = null
var mapYearsType = true
var qixianName = null
var curYear = null
var mapYearsType1 = true
var analysisList = []
var targetType = false
var analysisListShi = null
var analysisListXdata = null
var analysisListXian = null

var analysisListQdata = null
var analysisListQian = null
var analysisListQX = [] // 存储县级数据 
var analysisListType = false // 点击县级的状态 
    //var configInfo = InitialParameter("/Config.json");
    //globleUrl = configInfo["modelOrigin"].type + "://" + configInfo["modelOrigin"].value;
let currentText = "" // 点击的文字 
let currentYear = '' // 当前年份
let currentXzqdm = '' // 当前行政区代码
let yearData = [] // 全部的年份 
let btnType = false // 上面行政区域状态  
let dataSheng = null // 省数据 
let dataShi = null // 市数据   
let dataXian = null // 县数据 
let btnMeg = 0 // 按钮的状态 



$(".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();
                timeLine()
                echarLinBar("1", "")
                echartsBar("1", "")
                echartslineBar("1", "")
            });
            $(".xzqBtn").click(function(e) {
                onTabClick(e);
            });
        }, 5);
    }
    // 封装的jquery的get方法
function InitialParameter(url) {
    var info = null;
    $.ajax({
        async: false,
        url: url,
        success: function(result) {
            info = result;
        },
        error: function(result) {
            console.log(result);
        }
    });
    return info;
}
// 封装的ajax请求
function getGeoJson(url) {
    $.ajaxSettings.async = false;
    var geojson = null;
    $.get(url, function(results) {
        geojson = results;
    });
    return geojson;
}
// 行政区划数据
function getXZQData() {
    return {
        "2016": {
            "150102": "231",
            "150103": "22",
            "150104": "221",
            "150105": "76",
            "150121": "507.378979",
            "150122": "70.446859",
            "150123": "233.161043",
            "150124": "87.138653",
            "150125": "53.75949",
            "150202": "34",
            "150203": "123",
            "150204": "763",
            "150205": "69.618587",
            "150206": "10.997343",
            "150207": "451",
            "150221": "121.631",
            "150222": "232.1993",
            "150223": "162.607938",
            "150302": "79.347582",
            "150303": "216.106506",
            "150304": "117.66068",
            "150402": "639.210523",
            "150402": "281.870306",
            "150403": "594.864259",
            "150421": "461.192925",
            "150422": "77.532357",
            "150423": "824.63896",
            "150424": "83.229244",
            "150425": "1618.996566",
            "150426": "494.515183",
            "150428": "300.704366",
            "150429": "163.34025",
            "150430": "126.423867",
            "150502": "88.838653",
            "150521": "89.102034",
            "150522": "44.102228",
            "150523": "325.434118",
            "150524": "52.526868",
            "150525": "126.795964",
            "150526": "61.215115",
            "150581": "59.073048",
            "150602": "602.420675",
            "150621": "395.035128",
            "150622": "708.06381",
            "150623": "245.6431",
            "150624": "216.076227",
            "150625": "254.09903",
            "150626": "911.770879",
            "150627": "1259.538331",
            "150702": "56.699763",
            "150721": "97.133563",
            "150722": "619.195029",
            "150723": "140.030397",
            "150724": "440.572726",
            "150725": "254.190343",
            "150726": "20.68259",
            "150727": "5.693056",
            "150781": "75.468311",
            "150782": "258.449345",
            "150783": "60.431917",
            "150784": "38.730268",
            "150785": "81.183259",
            "150802": "194.530089",
            "150821": "114.78101",
            "150822": "15.305659",
            "150823": "167.568182",
            "150824": "414.540064",
            "150825": "58.7872",
            "150826": "133.218149",
            "150902": "260.0014",
            "150921": "449.443286",
            "150922": "329.047357",
            "150923": "102.146917",
            "150924": "566.594265",
            "150925": "145.176893",
            "150926": "604.3128",
            "150927": "137.39863",
            "150928": "110.854242",
            "150929": "136.343695",
            "150981": "193.2078",
            "152201": "615.707698",
            "152202": "62.160748",
            "152221": "357.815655",
            "152222": "23.709504",
            "152223": "317.128348",
            "152224": "29.730594",
            "152501": "7.334255",
            "152502": "2086.174959",
            "152522": "26.941754",
            "152523": "54.367129",
            "152524": "16.059589",
            "152525": "310.872563",
            "152526": "1075.894023",
            "152527": "85.146797",
            "152528": "523.83536",
            "152529": "239.860635",
            "152530": "49.770978",
            "152531": "207.098203",
            "152921": "1001.650127",
            "152922": "246.344865",
            "152923": "700.47709"
        },
        "2017": {
            "150102": "231",
            "150103": "22",
            "150104": "221",
            "150105": "76",
            "150121": "407.378979",
            "150122": "70.446859",
            "150123": "233.161043",
            "150124": "87.138653",
            "150125": "53.75949",
            "150202": "34",
            "150203": "123",
            "150204": "763",
            "150205": "69.618587",
            "150206": "10.997343",
            "150207": "451",
            "150221": "121.631",
            "150222": "232.1993",
            "150223": "162.607938",
            "150302": "79.347582",
            "150303": "116.106506",
            "150304": "117.66068",
            "150402": "639.210523",
            "150402": "281.870306",
            "150403": "594.864259",
            "150421": "461.192925",
            "150422": "77.532357",
            "150423": "824.63896",
            "150424": "83.229244",
            "150425": "1618.996566",
            "150426": "494.515183",
            "150428": "300.704366",
            "150429": "163.34025",
            "150430": "126.423867",
            "150502": "88.838653",
            "150521": "89.102034",
            "150522": "44.102228",
            "150523": "325.434118",
            "150524": "52.526868",
            "150525": "126.795964",
            "150526": "61.215115",
            "150581": "59.073048",
            "150602": "602.420675",
            "150621": "395.035128",
            "150622": "708.06381",
            "150623": "245.6431",
            "150624": "216.076227",
            "150625": "254.09903",
            "150626": "911.770879",
            "150627": "759.538331",
            "150702": "56.699763",
            "150721": "97.133563",
            "150722": "619.195029",
            "150723": "140.030397",
            "150724": "440.572726",
            "150725": "254.190343",
            "150726": "20.68259",
            "150727": "5.693056",
            "150781": "75.468311",
            "150782": "258.449345",
            "150783": "60.431917",
            "150784": "38.730268",
            "150785": "81.183259",
            "150802": "194.530089",
            "150821": "114.78101",
            "150822": "15.305659",
            "150823": "167.568182",
            "150824": "414.540064",
            "150825": "58.7872",
            "150826": "133.218149",
            "150902": "260.0014",
            "150921": "449.443286",
            "150922": "329.047357",
            "150923": "102.146917",
            "150924": "566.594265",
            "150925": "145.176893",
            "150926": "604.3128",
            "150927": "137.39863",
            "150928": "110.854242",
            "150929": "136.343695",
            "150981": "193.2078",
            "152201": "615.707698",
            "152202": "62.160748",
            "152221": "357.815655",
            "152222": "23.709504",
            "152223": "317.128348",
            "152224": "29.730594",
            "152501": "7.334255",
            "152502": "2086.174959",
            "152522": "26.941754",
            "152523": "54.367129",
            "152524": "16.059589",
            "152525": "310.872563",
            "152526": "1075.894023",
            "152527": "85.146797",
            "152528": "523.83536",
            "152529": "239.860635",
            "152530": "49.770978",
            "152531": "207.098203",
            "152921": "1001.650127",
            "152922": "246.344865",
            "152923": "700.47709"
        },
        "2018": {
            "150102": "231",
            "150103": "22",
            "150104": "221",
            "150105": "76",
            "150121": "507.378979",
            "150122": "70.446859",
            "150123": "233.161043",
            "150124": "87.138653",
            "150125": "53.75949",
            "150202": "34",
            "150203": "123",
            "150204": "763",
            "150205": "69.618587",
            "150206": "10.997343",
            "150207": "451",
            "150221": "121.631",
            "150222": "232.1993",
            "150223": "162.607938",
            "150302": "79.347582",
            "150303": "316.106506",
            "150304": "117.66068",
            "150402": "639.210523",
            "150402": "281.870306",
            "150403": "594.864259",
            "150421": "461.192925",
            "150422": "77.532357",
            "150423": "824.63896",
            "150424": "83.229244",
            "150425": "1618.996566",
            "150426": "494.515183",
            "150428": "300.704366",
            "150429": "163.34025",
            "150430": "126.423867",
            "150502": "88.838653",
            "150521": "89.102034",
            "150522": "44.102228",
            "150523": "325.434118",
            "150524": "52.526868",
            "150525": "126.795964",
            "150526": "61.215115",
            "150581": "59.073048",
            "150602": "602.420675",
            "150621": "395.035128",
            "150622": "708.06381",
            "150623": "245.6431",
            "150624": "216.076227",
            "150625": "254.09903",
            "150626": "911.770879",
            "150627": "859.538331",
            "150702": "56.699763",
            "150721": "97.133563",
            "150722": "619.195029",
            "150723": "140.030397",
            "150724": "440.572726",
            "150725": "254.190343",
            "150726": "20.68259",
            "150727": "5.693056",
            "150781": "75.468311",
            "150782": "258.449345",
            "150783": "60.431917",
            "150784": "38.730268",
            "150785": "81.183259",
            "150802": "194.530089",
            "150821": "114.78101",
            "150822": "15.305659",
            "150823": "167.568182",
            "150824": "414.540064",
            "150825": "58.7872",
            "150826": "133.218149",
            "150902": "260.0014",
            "150921": "449.443286",
            "150922": "329.047357",
            "150923": "102.146917",
            "150924": "566.594265",
            "150925": "145.176893",
            "150926": "604.3128",
            "150927": "137.39863",
            "150928": "110.854242",
            "150929": "136.343695",
            "150981": "193.2078",
            "152201": "615.707698",
            "152202": "62.160748",
            "152221": "357.815655",
            "152222": "23.709504",
            "152223": "317.128348",
            "152224": "29.730594",
            "152501": "7.334255",
            "152502": "2086.174959",
            "152522": "26.941754",
            "152523": "54.367129",
            "152524": "16.059589",
            "152525": "310.872563",
            "152526": "1075.894023",
            "152527": "85.146797",
            "152528": "523.83536",
            "152529": "239.860635",
            "152530": "49.770978",
            "152531": "207.098203",
            "152921": "1001.650127",
            "152922": "246.344865",
            "152923": "700.47709"

        },
        "2019": {
            "150102": "231",
            "150103": "22",
            "150104": "221",
            "150105": "76",
            "150121": "507.378979",
            "150122": "70.446859",
            "150123": "233.161043",
            "150124": "87.138653",
            "150125": "53.75949",
            "150202": "34",
            "150203": "123",
            "150204": "763",
            "150205": "69.618587",
            "150206": "10.997343",
            "150207": "451",
            "150221": "121.631",
            "150222": "232.1993",
            "150223": "162.607938",
            "150302": "79.347582",
            "150303": "276.106506",
            "150304": "117.66068",
            "150402": "679.210523",
            "150402": "281.870306",
            "150403": "594.864259",
            "150421": "461.192925",
            "150422": "77.532357",
            "150423": "824.63896",
            "150424": "83.229244",
            "150425": "1618.996566",
            "150426": "494.515183",
            "150428": "300.704366",
            "150429": "163.34025",
            "150430": "126.423867",
            "150502": "88.838653",
            "150521": "89.102034",
            "150522": "44.102228",
            "150523": "325.434118",
            "150524": "52.526868",
            "150525": "126.795964",
            "150526": "61.215115",
            "150581": "59.073048",
            "150602": "602.420675",
            "150621": "395.035128",
            "150622": "708.06381",
            "150623": "245.6431",
            "150624": "216.076227",
            "150625": "254.09903",
            "150626": "911.770879",
            "150627": "759.538331",
            "150702": "56.699763",
            "150721": "97.133563",
            "150722": "619.195029",
            "150723": "140.030397",
            "150724": "440.572726",
            "150725": "254.190343",
            "150726": "20.68259",
            "150727": "5.693056",
            "150781": "75.468311",
            "150782": "258.449345",
            "150783": "60.431917",
            "150784": "38.730268",
            "150785": "81.183259",
            "150802": "194.530089",
            "150821": "114.78101",
            "150822": "15.305659",
            "150823": "167.568182",
            "150824": "414.540064",
            "150825": "58.7872",
            "150826": "133.218149",
            "150902": "260.0014",
            "150921": "449.443286",
            "150922": "329.047357",
            "150923": "102.146917",
            "150924": "566.594265",
            "150925": "145.176893",
            "150926": "604.3128",
            "150927": "137.39863",
            "150928": "110.854242",
            "150929": "136.343695",
            "150981": "193.2078",
            "152201": "615.707698",
            "152202": "62.160748",
            "152221": "357.815655",
            "152222": "23.709504",
            "152223": "317.128348",
            "152224": "29.730594",
            "152501": "7.334255",
            "152502": "2086.174959",
            "152522": "26.941754",
            "152523": "54.367129",
            "152524": "16.059589",
            "152525": "310.872563",
            "152526": "1075.894023",
            "152527": "85.146797",
            "152528": "523.83536",
            "152529": "239.860635",
            "152530": "49.770978",
            "152531": "207.098203",
            "152921": "1001.650127",
            "152922": "246.344865",
            "152923": "700.47709"
        }


    };
    // 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);
    //     }
    // });
    // return resultData;
}
// 获取专项统计模块获取登陆信息和点击地图
function init() {

    // 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;
    //getGDLBData();
    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);
                echarLinBar((parseInt(params.seriesName) + 1).toString(), params.data.code)
                echartsBar((parseInt(params.seriesName) + 1).toString(), params.data.code)
                echartslineBar((parseInt(params.seriesName) + 1).toString(), params.data.code)

            }, 10);
        }
    });
    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];
        yearData = years;
    }
    //curYear = year ? year : statisticsInfoByXZQ["curYear"];
    //curYear = statisticsInfoByXZQ["curYear"];
    if (year) {
        curYear = year
    } else {
        curYear = statisticsInfoByXZQ["curYear"];
    }
    var mapYearsText = null
    if (mapYearsType) {
        mapYearsText = mapYears
        mapYearsType = false
    } else {
        if (mapYearsType1) {
            mapYearsText = curYear
        } else {
            mapYearsText = mapYears
        }
    }
    //let yearSpan = currentYear === '' ? yearData[0] : currentYear
    let yearSpan = curYear
    $(".yearSpan").html(yearSpan + "年");
    statisticsInfoByXZQ["curYear"] = curYear;
    var list = [];
    var chartType = "";
    switch (resertEchartsParams.type) {
        case "1": //盟市 
            btnMeg = 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": //旗县 
            btnMeg = 2
            var html = "<a class='xzqBtn' value='' type='1' >内蒙古自治区</a>";
            html += "<a class='xzqBtn' value='" + resertEchartsParams.xzq + "' type='2' >" + resertEchartsParams.name + "</a>";
            qixianName = resertEchartsParams.name
            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": //旗县  
            btnMeg = 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
    });
    analysisList = list
    option = {
        title: {
            // text: '{A|     ' + XZQConfig.chartTitle + '}',
            text: '{A|     内蒙古自治区供应总量统计分析}',
            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;
                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: '4%',
            bottom: '0%',
            z: 100
        },
        series: [{
            name: resertEchartsParams.type,
            type: 'map',
            left: '20%',
            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
        }]
    };
    setTimeout(() => {
        window.onresize = function() {
            myChart.resize()
        }
    }, 200)
    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());
        echarLinBar($(e.target).attr("type"), $(e.target).attr("value"))
        echartsBar($(e.target).attr("type"), $(e.target).attr("value"))
        echartslineBar($(e.target).attr("type"), $(e.target).attr("value"))

        btnType = true

    }, 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 (resultData) {
            createVisualizationChartsHandle(params, resultData);
        } else {
            //$("#" + params.container).html(params.noText);
            alert(params.noText);
        }
    }
    $(".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 + ")";
}
// 一维数组转换为二维数组
function arrTrans(num, arr) {
    const iconsArr = [];
    arr.forEach((item, index) => {
        const page = Math.floor(index / num); // 计算该元素为第几个素组内
        if (!iconsArr[page]) { // 判断是否存在
            iconsArr[page] = [];
        }
        iconsArr[page].push(item);
    });
    return iconsArr;
}
var arableNF = null
var arableXZQDM
var objIndex = 0
var objIndexXZQ = 0
var objIndexXZQ1 = 0
var oldobjList = xzLineDataList = []
var objIndexNF = 0
var arableType = false
var oldArble = null
var dlDjData = []


// 排序的一个公用函数 传入排序的属性值 从大到小 
function creatCompare(propertyName) {
    return function(obj1, obj2) {
        var value1 = obj1[propertyName];
        var value2 = obj2[propertyName];
        if (value1 < value2) {
            return -1
        } else if (value1 > value2) {
            return 1
        } else {
            return 0
        }
    }
}


// 时间轴样式
function timeLine() {
    let timeLineLeft = -15
        // selected 
    let timeLinehtml = ''
    yearData.map((item, index) => {
        if (index == 0) {
            timeLinehtml += `
                <li>
                    <a class="order_item selected" style="left:${timeLineLeft += 20}%;">${item}</a>
                </li>
            `
        } else {
            timeLinehtml += `
                <li>
                    <a class="order_item" style="left:${timeLineLeft += 20}%;">${item}</a>
                </li>
            `
        }
    })
    $('.time_line ol').html(timeLinehtml)
    targetType = true
    $('.order_item').on('click', function(e) {
        let timeText = e.target.innerHTML
        $(this).addClass('selected')
        $(this).parent().siblings().find('.order_item').removeClass('selected')
        currentYear = timeText
            //resertEcharts(null, null, null, parseInt(timeText));
            //resertEcharts($(e.target).attr("value"), $(e.target).attr("type"), $(e.target).html(), parseInt(timeText));
        resertEcharts("", "1", "", currentYear)
            // if (currentXzqdm == "150000") {
            //     getGDLBData(null, currentYear)
            // } else {
            //     getGDLBData(currentXzqdm, currentYear)
            // }

    })
}


//第二图表  
function echarLinBar(type, xzq) {
    var pewgData = []; //批而未供
    var gewyData = []; //供而未用
    var chwyData = []; //拆后未用
    var yewjData = []; //用而未尽
    var xData2 = getLinData();
    switch (type) {
        case "1": //盟市 


            for (var i = 2016; i <= 2019; i++) {
                var pewgvalue = 0
                var gewyvalue = 0;
                var chwyvalue = 0;
                var yewjvalue = 0;
                for (var attr in xData2["批而未供"][i]) {

                    pewgvalue += parseFloat(xData2["批而未供"][i][attr]);
                }
                pewgData.push(Math.floor(pewgvalue * 100) / 100)
                for (var attr in xData2["供而未用"][i]) {
                    gewyvalue += parseFloat(xData2["供而未用"][i][attr]);
                }
                gewyData.push(Math.floor(gewyvalue * 100) / 100)
                for (var attr in xData2["拆后未用"][i]) {
                    chwyvalue += parseFloat(xData2["拆后未用"][i][attr]);
                }
                chwyData.push(Math.floor(chwyvalue * 100) / 100)
                for (var attr in xData2["用而未尽"][i]) {
                    yewjvalue += parseFloat(xData2["用而未尽"][i][attr]);
                }
                yewjData.push(Math.floor(yewjvalue * 100) / 100)
            }
            break;
        case "2": //旗县 
            var code = xzq.substr(0, 4);
            for (var i = 2016; i <= 2019; i++) {
                var pewgvalue = 0
                var gewyvalue = 0;
                var chwyvalue = 0;
                var yewjvalue = 0;
                for (var attr in xData2["批而未供"][i]) {
                    if (attr.toString().indexOf(code) == 0) {
                        pewgvalue += parseFloat(xData2["批而未供"][i][attr]);
                    }
                }
                pewgData.push(Math.floor(pewgvalue * 100) / 100)

                for (var attr in xData2["供而未用"][i]) {
                    if (attr.toString().indexOf(code) == 0) {
                        gewyvalue += parseFloat(xData2["供而未用"][i][attr]);
                    }
                }
                gewyData.push(Math.floor(gewyvalue * 100) / 100)
                for (var attr in xData2["拆后未用"][i]) {
                    if (attr.toString().indexOf(code) == 0) {
                        chwyvalue += parseFloat(xData2["拆后未用"][i][attr]);
                    }
                }
                chwyData.push(Math.floor(chwyvalue * 100) / 100)
                for (var attr in xData2["用而未尽"][i]) {
                    if (attr.toString().indexOf(code) == 0) {
                        yewjvalue += parseFloat(xData2["用而未尽"][i][attr]);
                    }
                }
                yewjData.push(Math.floor(yewjvalue * 100) / 100)
            }

        case "3": //旗县  
            for (var i = 2016; i <= 2019; i++) {
                var pewgvalue = 0
                var gewyvalue = 0;
                var chwyvalue = 0;
                var yewjvalue = 0;
                for (var attr in xData2["批而未供"][i]) {
                    if (attr.toString() == xzq) {
                        pewgvalue += parseFloat(xData2["批而未供"][i][attr]);
                    }
                }
                pewgData.push(Math.floor(pewgvalue * 100) / 100)

                for (var attr in xData2["供而未用"][i]) {
                    if (attr.toString() == xzq) {
                        gewyvalue += parseFloat(xData2["供而未用"][i][attr]);
                    }
                }
                gewyData.push(Math.floor(gewyvalue * 100) / 100)
                for (var attr in xData2["拆后未用"][i]) {
                    if (attr.toString() == xzq) {
                        chwyvalue += parseFloat(xData2["拆后未用"][i][attr]);
                    }
                }
                chwyData.push(Math.floor(chwyvalue * 100) / 100)
                for (var attr in xData2["用而未尽"][i]) {
                    if (attr.toString() == xzq) {
                        yewjvalue += parseFloat(xData2["用而未尽"][i][attr]);
                    }
                }
                yewjData.push(Math.floor(yewjvalue * 100) / 100)
            }

            break;
        default:

            break;
    }
    var option1 = {
        // title: {
        //     text: '折线图堆叠'
        // },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['批而未供', '供而未用', '拆后未用', '用而未尽']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['2016', '2017', '2018', '2019']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
                name: '批而未供',
                type: 'line',
                data: pewgData
            },
            {
                name: '供而未用',
                type: 'line',

                data: gewyData
            },
            {
                name: '拆后未用',
                type: 'line',

                data: chwyData
            },
            {
                name: '用而未尽',
                type: 'line',
                data: yewjData
            }
        ]
    };
    var myChart1 = echarts.init(document.getElementById('containerClass1'));
    myChart1.setOption(option1);
}
//第4图标
function echartslineBar(type, xzq) {

    var rateData = []; //使用率

    var xData2 = getLinData();
    var sumData = getXZQData();
    switch (type) {
        case "1": //盟市 


            for (var i = 2016; i <= 2019; i++) {
                var gewyvalue = 0;
                var sumValue = 0;
                var rateValue;
                for (var attr in xData2["供而未用"][i]) {
                    gewyvalue += parseFloat(xData2["供而未用"][i][attr]);
                }
                for (var attr1 in sumData[i]) {
                    sumValue += parseFloat(sumData[i][attr1]);
                }
                rateValue = (gewyvalue / sumValue) * 100;
                rateData.push(Math.floor(rateValue * 100) / 100)
            }
            break;
        case "2": //旗县 
            var code = xzq.substr(0, 4);
            for (var i = 2016; i <= 2019; i++) {
                var gewyvalue = 0;
                var sumValue = 0;
                var rateValue;
                for (var attr in xData2["供而未用"][i]) {
                    if (attr.toString().indexOf(code) == 0) {
                        gewyvalue += parseFloat(xData2["供而未用"][i][attr]);
                    }
                }
                for (var attr1 in sumData[i]) {
                    if (attr1.toString().indexOf(code) == 0) {
                        sumValue += parseFloat(sumData[i][attr1]);
                    }
                }
                rateValue = (gewyvalue / sumValue) * 100;
                rateData.push(Math.floor(rateValue * 100) / 100)

            }

        case "3": //旗县  
            for (var i = 2016; i <= 2019; i++) {
                var gewyvalue = 0;
                var sumValue = 0;
                var rateValue;
                for (var attr in xData2["供而未用"][i]) {
                    if (attr.toString() == xzq) {
                        gewyvalue += parseFloat(xData2["供而未用"][i][attr]);
                    }
                }
                for (var attr1 in sumData[i]) {
                    if (attr1.toString() == xzq) {
                        sumValue += parseFloat(sumData[i][attr1]);
                    }
                }
                rateValue = (gewyvalue / sumValue) * 100;
                rateData.push(Math.floor(rateValue * 100) / 100)

            }

            break;
        default:

            break;
    }
    var option4 = {
        // title: {
        //     text: '建设用地时候用率'
        // },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['使用率']
        },
        xAxis: {
            type: 'category',
            data: ['2016', '2017', '2018', '2019']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name: "使用率",
            data: rateData,
            type: 'line'
        }]
    };
    var myChart4 = echarts.init(document.getElementById('containerClass4'));
    myChart4.setOption(option4);
}
//第三图标
function echartsBar(type, xzq) {
    var pewgData = []; //批而未供
    var chaData = [0]; //差值
    var xData2 = getLinData();
    switch (type) {
        case "1": //盟市 


            for (var i = 2016; i <= 2019; i++) {
                var pewgvalue = 0
                var chaValue;
                for (var attr in xData2["批而未供"][i]) {

                    pewgvalue += parseFloat(xData2["批而未供"][i][attr]);
                }
                pewgData.push(Math.floor(pewgvalue * 100) / 100)

            }
            for (var x = 0; x < pewgData.length; x++) {
                if (pewgData.length - 1 == x) {
                    break;
                }
                chaValue = pewgData[x + 1] - pewgData[x]
                if (chaValue < 0) {
                    chaValue = 0;
                }
                chaData.push(chaValue)
            }
            break;
        case "2": //旗县 
            var code = xzq.substr(0, 4);
            for (var i = 2016; i <= 2019; i++) {
                var pewgvalue = 0

                for (var attr in xData2["批而未供"][i]) {
                    if (attr.toString().indexOf(code) == 0) {
                        pewgvalue += parseFloat(xData2["批而未供"][i][attr]);
                    }
                }
                pewgData.push(Math.floor(pewgvalue * 100) / 100)
                for (var x = 0; x < pewgData.length; x++) {
                    if (pewgData.length - 1 == x) {
                        break;
                    }
                    chaValue = pewgData[x + 1] - pewgData[x]
                    if (chaValue < 0) {
                        chaValue = 0;
                    }
                    chaData.push(chaValue)
                }

            }
            break;


        case "3": //旗县  
            for (var i = 2016; i <= 2019; i++) {
                var pewgvalue = 0

                for (var attr in xData2["批而未供"][i]) {
                    if (attr.toString() == xzq) {
                        pewgvalue += parseFloat(xData2["批而未供"][i][attr]);
                    }
                }
                pewgData.push(Math.floor(pewgvalue * 100) / 100)
                for (var x = 0; x < pewgData.length; x++) {
                    if (pewgData.length - 1 == x) {
                        break;
                    }
                    chaValue = pewgData[x + 1] - pewgData[x]
                    if (chaValue < 0) {
                        chaValue = 0;
                    }
                    chaData.push(chaValue)
                }

            }

            break;
        default:

            break;
    }
    var option3 = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['批而未供', '差值']
        },
        xAxis: {
            type: 'category',
            data: ["2016", "2017", "2018", "2019"]
        },
        yAxis: {
            type: 'value'
        },
        series: [{
                name: "批而未供",
                data: pewgData,
                type: 'bar'
            },
            {
                name: "差值",
                data: chaData,
                type: 'bar'
            }
        ]
    };
    var myChart3 = echarts.init(document.getElementById('containerClass3'));
    myChart3.setOption(option3);
}