四川省供水数据汇总与可视化ECharts Gallery

20:11:45图表已生成
代码
var uploadedDataURL = "/asset/get/s/data-1608805397629-qDNtLYUsw.json";

var chengdu = "/asset/get/s/data-1608805414643-bC9-iT_xM.json";

var bazhong = "/asset/get/s/data-1608805419924-zlRXjpy5v.json";

var abeizangzuqiangzuzizhizhou = "/asset/get/s/data-1608805423799-3HcZ3Ar58.json";

var dazhou = "/asset/get/s/data-1608805429204-1uwxLS0jX.json";

var deyang = "/asset/get/s/data-1608805432766-nb1OLVAFm.json";

var ganzizangzuzizhizhou = "/asset/get/s/data-1608805436921-b80bFxzlf.json";

var guangan = "/asset/get/s/data-1608805441224-I8GT2tE9i.json";

var guangyuan = "/asset/get/s/data-1608805444741-yM6q8qCHe.json";

var leshan = "/asset/get/s/data-1608805448531-621IU6In2.json";

var liangshanyizuzizhizhou = "/asset/get/s/data-1608805453357-vjoONf0d4.json";

var luzhou = "/asset/get/s/data-1608805457963-bc9AcbL88.json";

var meishan = "/asset/get/s/data-1608805463759-Onq3CQjMm.json";

var mianyang = "/asset/get/s/data-1608805470024-O1Bj_Us2L.json";

var zigong = "/asset/get/s/data-1608805480296-g4KY8b9e_.json";

var nanchong = "/asset/get/s/data-1608805496925-Ti7WllimY.json";

var neijiang = "/asset/get/s/data-1608805504026-2JdmDgxmp.json";

var panzhihua = "/asset/get/s/data-1608805507584-mGt85DC0S.json";

var suining = "/asset/get/s/data-1608805511550-xu1NgP4z6.json";

var yaan = "/asset/get/s/data-1608805514993-0LAltEmAa.json";

var yibin = "/asset/get/s/data-1608805521127-Llxil3AYH.json";

var ziyang = "/asset/get/s/data-1608805532650-fKmXtBmbo.json";


$.get(uploadedDataURL, function(geoJson) {

    myChart.hideLoading();

    echarts.registerMap('四川', geoJson);

    var cityMap = {
        "成都市": chengdu,
        '巴中市': bazhong,
        "阿坝藏族羌族自治州": abeizangzuqiangzuzizhizhou,
        '达州市': dazhou,
        "德阳市": deyang,
        "甘孜藏族自治州": ganzizangzuzizhizhou,
        "广安市": guangan,
        "广元市": guangyuan,
        "乐山市": leshan,
        "凉山彝族自治州": liangshanyizuzizhizhou,
        "泸州市": luzhou,
        "眉山市": meishan,
        "绵阳市": mianyang,
        "自贡市": zigong,
        "南充市": nanchong,
        "内江市": neijiang,
        "攀枝花市": panzhihua,
        "遂宁市": suining,
        "雅安市": yaan,
        "宜宾市": yibin,
        "资阳市": ziyang
    };

    var gdGeoCoordMap = {
        '成都市': [104.074470, 30.582973],
        '巴中市': [106.753669, 31.858809],
        "阿坝藏族羌族自治州": [102.221374, 31.899792],
        '达州市': [107.502262, 31.209484],
        "德阳市": [104.398651, 31.127991],
        "甘孜藏族自治州": [101.963815, 30.050663],
        "广安市": [106.633369, 30.456398],
        "广元市": [105.829757, 32.433668],
        "乐山市": [103.761263, 29.582024],
        "凉山彝族自治州": [102.258746, 27.886762],
        "泸州市": [105.443348, 28.889138],
        "眉山市": [103.831788, 30.048318],
        "绵阳市": [104.741722, 31.46402],
        "自贡市": [106.754457, 31.875833],
        "南充市": [106.082974, 30.795281],
        "内江市": [105.066138, 29.58708],
        "攀枝花市": [101.716007, 26.580446],
        "遂宁市": [105.571331, 30.513311],
        "雅安市": [103.001033, 29.987722],
        "宜宾市": [104.630825, 28.760189],
        "资阳市": [104.641917, 30.122211]
    };
    var gdDatas = [
        [{
            name: '成都市',
            value: 10
        }],
        [{
            name: '巴中市',
            value: 0
        }],
        [{
            name: '阿坝藏族羌族自治州',
            value: 0
        }],
        [{
            name: '达州市',
            value: 0
        }],
        [{
            name: '德阳市',
            value: 1.3
        }],
        [{
            name: '甘孜藏族自治州',
            value: 0.2
        }],
        [{
            name: '广安市',
            value: 0.4
        }],
        [{
            name: '广元市',
            value: 0.6
        }],
        [{
            name: '乐山市',
            value: 0.8
        }],
        [{
            name: '凉山彝族自治州',
            value: 0.4
        }],
        [{
            name: '泸州市',
            value: 0.8
        }],
        [{
            name: '眉山市',
            value: 0.2
        }],
        [{
            name: '绵阳市',
            value: 1.3
        }],
        [{
            name: '自贡市',
            value: 0
        }],
        [{
            name: '南充市',
            value: 0
        }],
        [{
            name: '内江市',
            value: 0
        }],
        [{
            name: '攀枝花市',
            value: 0
        }],
        [{
            name: '遂宁市',
            value: 0
        }],
        [{
            name: '雅安市',
            value: 0
        }],
        [{
            name: '宜宾市',
            value: 0
        }],
        [{
            name: '资阳市',
            value: 0.8
        }]
    ];

    var chengdudata = [{
            name: "西南航空港供水工程有限公司",
            value: [103.985729, 30.575615, 0.5],
        },
        {
            name: "成都市自来水公司营业厅",
            value: [104.048065, 30.649955, 1],
        },
        {
            name: "成都环境集团成都市自来水有限责任公司",
            value: [104.121099, 30.66154, 1],
        },
        {
            name: "岷江自来水厂",
            value: [104.070298, 30.516974, 0.1],
        },
        {
            name: "成都环境集团成都供水",
            value: [104.121154, 30.660801, 0.4],
        },
        {
            name: "成都市新都区自来水公司",
            value: [104.147077, 30.782706, 1],
        },
        {
            name: "大丰自来水营业大厅",
            value: [104.064175, 30.779358, 1.4],
        },
        {
            name: "成都市自来水有限责任公司",
            value: [103.963652, 30.744603, 0.7],
        },
        {
            name: "成都市岷江自来水厂工会",
            value: [103.986176, 30.550281, 0.1],
        },
        {
            name: "成都自来水有限责任公司",
            value: [103.892669, 30.818518, 0.5],
        },
        {
            name: "温江区自来水公司",
            value: [103.846965, 30.71171, 2],
        },
        {
            name: "成都环境集团成都供水",
            value: [104.051191, 30.669935, 0.9],
        },
        {
            name: "成都市自来水有限责任公司(白马寺)",
            value: [104.074779, 30.687311, 2],
        },
        {
            name: "黄龙溪景观供水站",
            value: [103.972932, 30.326578, 2],
        },
        {
            name: "四川省彭州市自来水有限公司",
            value: [103.940401, 30.994183, 0.4],
        },

    ]

    var bazhongdata = [{
            name: "圣泉水务有限公司",
            value: [106.770895, 31.864548, 0.5],
        },
        {
            name: "板庙供水站",
            value: [107.228612, 31.546389, 1],
        },
        {
            name: "平昌县鸿源水务集团",
            value: [107.096648, 31.569831, 1],
        },
        {
            name: "圣泉水务有限公司(财务广场)",
            value: [106.781738, 31.860592, 0.1],
        },
        {
            name: "平昌供水",
            value: [107.115326, 31.567849, 0.4],
        },
        {
            name: "三江镇供水站",
            value: [106.789858, 31.763912, 1],
        },
        {
            name: "南江县大河供水站",
            value: [106.941115, 32.201356, 1.4],
        },
        {
            name: "通江县沙溪供水站",
            value: [107.445477, 32.112782, 0.7],
        },
        {
            name: "平昌县水利电力局驷马供水站",
            value: [107.040342, 31.74208, 0.1],
        },

    ]

    var abeizangzuqiangzuzizhizhoudata = [{
            name: "水费收费厅",
            value: [102.369536, 31.00466, 0.5],
        },

    ]

    var dazhoudata = [{
            name: "宣汉县自来水公司",
            value: [107.728177, 31.364667, 0.5],
        },
        {
            name: "渠县供水排水总公司",
            value: [106.978483, 30.851644, 1],
        },
        {
            name: "渠县供水排水总公司东城收费处",
            value: [106.989102, 30.846225, 1],
        },
        {
            name: "渠县供水排水总公司",
            value: [106.98882, 30.846385, 0.1],
        },
        {
            name: "四川万源川投水务公司",
            value: [108.043578, 32.076235, 0.4],
        },
        {
            name: "云鹤山泉普光供水点",
            value: [107.773803, 31.538428, 1],
        },
        {
            name: "渠县清溪场水务站",
            value: [106.824128, 30.895938, 1.4],
        },
        {
            name: "达县云门水务投资有限责任公司",
            value: [107.5218, 31.198689, 0.7],
        },
        {
            name: "渠县乡镇供水公司龙凤供水站",
            value: [106.76218, 30.944628, 0.1],
        },
        {
            name: "李渡供水站",
            value: [106.973431, 30.780289, 0.5],
        },
        {
            name: "眉山市彭山碧水源久安水务有限公司",
            value: [107.512364, 31.207551, 2],
        },
        {
            name: "渠县乡镇供水公司宋家供水站",
            value: [106.706527, 30.89738, 0.9],
        },
        {
            name: "人民公园水务集团总公司",
            value: [107.515905, 31.22391, 2],
        },
        {
            name: "万源市石清山泉水厂",
            value: [108.033162, 32.064329, 2],
        },

    ]

    var deyangdata = [{
            name: "德阳市自来水公司",
            value: [104.400729, 31.146769, 0.5],
        },
        {
            name: "广汉市自来水公司",
            value: [104.282574, 30.992475, 1],
        },
        {
            name: "绵竹自来水公司",
            value: [104.207652, 31.354965, 1],
        },
        {
            name: "中江县自来水公司",
            value: [104.687647, 31.041673, 0.1],
        },
        {
            name: "广汉兴鑫水务有限责任公司",
            value: [104.27843, 30.969481, 0.4],
        },
        {
            name: "和兴自来水公司",
            value: [104.353618, 30.97445, 1],
        },
        {
            name: "中江县水务局南干站",
            value: [104.68812, 31.024875, 1.4],
        },
        {
            name: "三水自来水公司",
            value: [104.34494, 30.931828, 0.7],
        },
        {
            name: "中江县水务局广福站",
            value: [104.942531, 30.758207, 0.1],
        },

    ]

    var ganzizangzuzizhizhoudata = [{
            name: "德格县自来水公司收费处",
            value: [98.586932, 31.812486, 0.5],
        },
        {
            name: "自来水收费室",
            value: [101.9669, 30.047087, 1],
        },
    ]

    var guangandata = [{
            name: "爱众水务",
            value: [106.63161, 30.461486, 0.5],
        },
        {
            name: "广安县恒升供水站",
            value: [106.780174, 30.694807, 1],
        },
        {
            name: "华蓥爱众水务公司",
            value: [106.791741, 30.403966, 1],
        },
        {
            name: "武胜县立新天然气有限责任公司",
            value: [106.297389, 30.341554, 0.1],
        },
        {
            name: "白庙供水站客户服务中心",
            value: [106.371991, 30.546518, 0.4],
        },
        {
            name: "四川广安爱众股份有限公司",
            value: [106.648555, 30.477553, 1],
        },
        {
            name: "爱自来水公司",
            value: [106.45252, 30.543344, 1.4],
        },

    ]

    var guangyuandata = [{
            name: "旺苍县自来水公司营业大厅",
            value: [106.305746, 32.235057, 0.5],
        },
        {
            name: "剑阁县城北自来水站",
            value: [105.468793, 32.052853, 1],
        },
        {
            name: "广元市上西自来水有限责任公司",
            value: [105.832843, 32.458013, 1],
        },
        {
            name: "苍溪县乡镇供水总站元坝供水站",
            value: [106.067066, 31.824713, 0.1],
        },
        {
            name: "广元供水",
            value: [105.828591, 32.437231, 0.4],
        },
        {
            name: "四川省苍溪县乡镇供水总站",
            value: [105.938909, 31.740044, 1],
        },
        {
            name: "剑门关景区-景区供水站",
            value: [105.589515, 32.23553, 1.4],
        },
        {
            name: "国光供水站",
            value: [105.423009, 31.730407, 0.7],
        },
        {
            name: "自来水公司净水厂",
            value: [106.317961, 32.251991, 0.1],
        },
        {
            name: "昭化供水站",
            value: [105.721817, 32.338252, 0.5],
        },
        {
            name: "青川县洁康水务公司营业厅",
            value: [105.246264, 32.592526, 2],
        },
        {
            name: "广元市供排水集团有限公司",
            value: [105.845697, 32.435324, 0.9],
        },

    ]

    var leshandata = [{
            name: "乐山市自来水有限责任公司",
            value: [103.759627, 29.604271, 0.5],
        },
        {
            name: "乐山市苏稽自来水有限公司",
            value: [103.675222, 29.593137, 1],
        },
        {
            name: "中阳水务收费大厅",
            value: [103.561998, 29.430704, 1],
        },
        {
            name: "乐山电力自来水公司营业厅",
            value: [103.772257, 29.568198, 0.1],
        },
        {
            name: "马边供水服务中心",
            value: [103.552908, 28.836772, 0.4],
        },
        {
            name: "犍为县河东供排水有限公司",
            value: [103.962284, 29.316898, 1],
        },
        {
            name: "井研供水",
            value: [103.869265, 29.66641, 1.4],
        },

    ]

    var liangshanyizuzizhizhoudata = [{
            name: "昭觉县自来水有限责任公司",
            value: [102.846535, 28.018125, 0.5],
        },
        {
            name: "西昌市供排水总公司",
            value: [102.225909, 27.908214, 1],
        },
        {
            name: "会理县自来水有限责任公司",
            value: [102.248924, 26.661108, 1],
        },
        {
            name: "会东县自来水有限责任公司",
            value: [102.585636, 26.642259, 0.1],
        },
        {
            name: "盐源县自来水公司",
            value: [101.517673, 27.42693, 0.4],
        },
        {
            name: "越西县自来水公司",
            value: [102.514634, 28.643587, 1],
        },
        {
            name: "盐源县自来水公司安装维修服务处",
            value: [101.517487, 27.426881, 1.4],
        },
        {
            name: "西昌城市供水加压站",
            value: [102.268452, 27.875676, 0.7],
        },
        {
            name: "喜德县城市供水",
            value: [102.418785, 28.311736, 0.1],
        },
        {
            name: "盐源县水务投资",
            value: [101.516417, 27.427195, 0.5],
        },
        {
            name: "冕宁县自来水有限公司",
            value: [102.170789, 28.556269, 2],
        },
        {
            name: "雷波县自来水公司",
            value: [103.573989, 28.267291, 0.9],
        },

    ]

    var luzhoudata = [{
            name: "叙永县自来水有限公司",
            value: [105.443575, 28.167707, 0.5],
        },
        {
            name: "兴泸水务",
            value: [105.459998, 28.997579, 1],
        },
        {
            name: "兴泸水务集团城东营业所",
            value: [105.48113, 28.933931, 1],
        },
        {
            name: "北控水务",
            value: [105.51326, 28.866972, 0.1],
        },
        {
            name: "后山供水站",
            value: [105.509351, 27.995046, 0.4],
        },
        {
            name: "双沙供水站",
            value: [105.75961, 27.835942, 1],
        },
        {
            name: "兴泸水务",
            value: [105.295842, 28.920206, 1.4],
        },
        {
            name: "四川省水电集团合江营业厅",
            value: [105.838759, 28.816621, 0.7],
        },

    ]

    var meishandata = [{
            name: "眉山市自来水公司",
            value: [103.84757, 30.054524, 0.5],
        },
        {
            name: "眉山市供排水总公司",
            value: [103.847629, 30.055034, 1],
        },
        {
            name: "眉山市供排水总公司南门营业厅",
            value: [103.834501, 30.040429, 1],
        },
        {
            name: "仁寿县清水供水站",
            value: [104.05117, 30.203763, 0.1],
        },
        {
            name: "满井供水站",
            value: [104.155098, 29.932664, 0.4],
        },
        {
            name: "眉山市供排水总公司尚义营业厅",
            value: [103.766566, 30.101209, 1],
        },
        {
            name: "禄加自来水有限公司",
            value: [104.374825, 29.823697, 1.4],
        },
        {
            name: "眉山首创水务有限公司",
            value: [103.823842, 30.202835, 0.7],
        },

    ]

    var mianyangdata = [{
            name: "绵阳水务",
            value: [104.762587, 31.469405, 0.5],
        },
        {
            name: "高新供水公司客户服务大厅",
            value: [104.681207, 31.468824, 1],
        },
        {
            name: "绵阳水务集团客户服务中心",
            value: [104.762527, 31.468687, 1],
        },
        {
            name: "绵阳市武引游仙区自来水公司",
            value: [104.779499, 31.505187, 0.1],
        },
        {
            name: "绵阳市水务集团古泉供水加压站",
            value: [104.689252, 31.445607, 0.4],
        },
        {
            name: "绵阳市游仙武引水务有限公司",
            value: [104.779578, 31.505219, 1],
        },
        {
            name: "安州区新盛供水有限公司营业厅",
            value: [104.556754, 31.547512, 1.4],
        },
        {
            name: "绵阳市泓泉水务有限责任公司",
            value: [104.725467, 31.572697, 0.7],
        },
        {
            name: "新安供水",
            value: [104.891012, 31.797522, 0.1],
        },
        {
            name: "绵阳市仙海自来水有限公司",
            value: [104.771559, 31.496873, 0.5],
        },
        {
            name: "绵阳市广汇实业有限公司矿泉水厂",
            value: [104.643901, 31.348886, 2],
        },
        {
            name: "江油市天一自来水有限责任公司",
            value: [104.770198, 31.779016, 0.9],
        },
        {
            name: "绵阳水务集团(",
            value: [104.740736, 31.500617, 2],
        },

    ]

    var zigongdata = [{
            name: "富洲水务集团",
            value: [104.993937, 29.185824, 0.5],
        },
        {
            name: "四川川投水务集团荣县天然公司",
            value: [104.434916, 29.462491, 1],
        },
        {
            name: "自贡市中天水务有限公司",
            value: [104.789683, 29.332572, 1],
        },
        {
            name: "自贡水务集团",
            value: [104.785214, 29.351918, 0.1],
        },
        {
            name: "自贡荣威水务有限责任公司",
            value: [104.763241, 29.334321, 0.4],
        },
        {
            name: "自贡市宏发自来水有限公司",
            value: [104.619759, 29.399939, 1],
        },
        {
            name: "自贡水务集团客户服务中心",
            value: [104.785196, 29.352009, 1.4],
        },

    ]

    var nanchongdata = [{
            name: "福康供水",
            value: [106.074661, 31.364405, 0.5],
        },
        {
            name: "城乡水务",
            value: [106.048221, 31.376453, 1],
        },
        {
            name: "南充水务投资(集团)有限公司",
            value: [106.116596, 30.793782, 1],
        },
        {
            name: "蓬安县自来水公司",
            value: [106.426558, 31.036111, 0.1],
        },
        {
            name: "营山县供水公司(东城营业厅)",
            value: [106.578568, 31.080306, 0.4],
        },
        {
            name: "南充康源水务(集团)",
            value: [106.086548, 30.808506, 1],
        },
        {
            name: "蓬安县自来水公司",
            value: [106.418355, 31.03323, 1.4],
        },
        {
            name: "南部县城乡水务有限公司",
            value: [106.237645, 31.369098, 0.7],
        },
        {
            name: "南充水务投资(集团)",
            value: [106.086462, 30.80845, 0.1],
        },
        {
            name: "仪陇县方州自来水公司",
            value: [106.411334, 31.517981, 0.5],
        },
        {
            name: "西充县泓源水务发展有限公司",
            value: [105.892945, 31.001825, 2],
        },
        {
            name: "先锋镇自来水供应站",
            value: [106.301828, 31.632196, 0.9],
        },
        {
            name: "大禹水务",
            value: [106.01913, 30.779503, 2],
        },
        {
            name: "達安县自来水公司",
            value: [106.418472, 31.033408, 2],
        },
        {
            name: "南充市嘉陵区建华自来水有限公司",
            value: [106.078436, 30.583659, 0.4],
        },
        {
            name: "蓬安县自来水公司(收费处)",
            value: [106.443305, 30.978103, 0.6],
        },
        {
            name: "康源水务",
            value: [106.069024, 30.881744, 2],
        },
        {
            name: "康源水务集团有限责任公司",
            value: [106.086548, 30.808551, 2],
        },
        {
            name: "充县供排水公司多扶营业所",
            value: [105.98748, 30.966222, 0.2],
        },

    ]

    var neijiangdata = [{
            name: "内江市水务有限责任公司",
            value: [105.061782, 29.586968, 0.5],
        },
        {
            name: "隆昌自来水公司",
            value: [105.274489, 29.345196, 1],
        },
        {
            name: "隆昌市自来水公司营业大厅",
            value: [105.301186, 29.342394, 1],
        },
        {
            name: "内江市水务有限责任公司",
            value: [105.063844, 29.602921, 0.1],
        },
        {
            name: "内江市水务有限责任公司",
            value: [105.083087, 29.607718, 0.4],
        },

    ]

    var panzhihuadata = [{
            name: "水务检测中心",
            value: [101.714269, 26.580511, 0.5],
        },
        {
            name: "四川省盐边县自来水公司",
            value: [101.85532, 26.689322, 1],
        },
        {
            name: "河门口水厂营业厅",
            value: [101.626765, 26.604868, 1],
        },
        {
            name: "仙女山泉水厂",
            value: [101.778506, 26.391039, 0.4],
        },

    ]

    var suiningdata = [{
            name: "遂宁川能水务",
            value: [105.59687, 30.527237, 0.5],
        },
        {
            name: "兰林自来水有限公司",
            value: [105.600233, 30.496494, 1],
        },
        {
            name: "川投水务",
            value: [105.258871, 30.589132, 1],
        },
        {
            name: "四川川投水务集团射洪股份有限公司",
            value: [105.377316, 30.873578, 0.1],
        },
        {
            name: "遂宁中鹏水务有限公司",
            value: [105.613167, 30.519055, 0.4],
        },
        {
            name: "遂宁市明星水务设计",
            value: [105.587836, 30.508843, 1],
        },
        {
            name: "川投水务集团射洪有限责任公司",
            value: [105.387564, 30.864477, 1.4],
        },

    ]

    var yaandata = [{
            name: "雅安市名山区水务投资有限公司",
            value: [103.111756, 30.082586, 0.5],
        },
        {
            name: "雅安市供排水公司",
            value: [103.009289, 29.997752, 1],
        },
        {
            name: "营销科农村供水站",
            value: [102.853934, 29.802134, 1],
        },
        {
            name: "雅安市名山区民源水业有限公司",
            value: [103.121125, 30.095171, 0.1],
        },
        {
            name: "红豆相思谷山泉水厂",
            value: [103.018995, 30.092518, 0.4],
        },
        {
            name: "保障供水",
            value: [102.360954, 29.236523, 1],
        },
        {
            name: "天全县供排水公司收费大厅",
            value: [102.773689, 30.06103, 1.4],
        },

    ]

    var yibindata = [{
            name: "高县自来水公司",
            value: [104.573793, 28.400884, 0.5],
        },
        {
            name: "牛角岩内口岩自来水收费站",
            value: [104.901521, 28.807443, 1],
        },
        {
            name: "长宁县自来水公司",
            value: [104.924741, 28.584154, 1],
        },
        {
            name: "南溪区供水排水有限公司",
            value: [104.985389, 28.841822, 0.1],
        },
        {
            name: "水泵变频二次供水",
            value: [104.621286, 28.768316, 0.4],
        },
        {
            name: "叙州区天泉供水有限责任公司",
            value: [104.555427, 28.715064, 1],
        },
        {
            name: "宜宾临港自来水有限公司",
            value: [104.671663, 28.778368, 1.4],
        },
        {
            name: "宜江水务公司",
            value: [104.352697, 28.838388, 0.7],
        },
        {
            name: "筠连县自来水有限责任公司",
            value: [104.508615, 28.162064, 0.1],
        },
        {
            name: "珙县巡场自来水有限责任公司",
            value: [104.715183, 28.460582, 0.5],
        },
        {
            name: "珙县自来水公司",
            value: [104.791557, 28.387379, 2],
        },
        {
            name: "宜宾市南溪区源聚乡镇供水有限公司",
            value: [104.985306, 28.841872, 0.9],
        },
        {
            name: "高县月江镇福溪供水站",
            value: [104.691792, 28.671781, 2],
        },
        {
            name: "长宁县中水水务有限责任公司",
            value: [104.919493, 28.583029, 2],
        },
        {
            name: "筠连县自来水公司",
            value: [104.518683, 28.176173, 0.4],
        },
        {
            name: "宜宾东园自来水有限公司",
            value: [104.515277, 28.78098, 0.6],
        },
        {
            name: "宜宾市清源水务有限公司",
            value: [104.631679, 28.777817, 2],
        },
        {
            name: "宜宾市龙禹水务投资有限责任公司",
            value: [104.604594, 28.778374, 2],
        },
        {
            name: "李端供水站",
            value: [104.86753, 28.599703, 0.2],
        },
        {
            name: "宜宾僰乡源山泉水厂",
            value: [104.842896, 28.264081, 0.6],
        },

    ]

    var ziyangdata = [{
            name: "简阳市水务投资发展有限公司",
            value: [104.548195, 30.420931, 0.5],
        },
        {
            name: "安岳县自来水公司",
            value: [105.355745, 30.112751, 1],
        },
        {
            name: "安岳县柠都自来水有限责任公司",
            value: [105.346023, 30.105334, 1],
        },
        {
            name: "资阳市水务燃气有限责任公司",
            value: [104.640231, 30.146645, 0.1],
        },
        {
            name: "禾丰供水",
            value: [104.719883, 30.425408, 0.4],
        },
        {
            name: "资阳海天水务有限公司",
            value: [104.643489, 30.135611, 1],
        },

    ]

    var opt = {
        bgColor: '#013954', // 画布背景色
        mapName: '四川', // 地图名
        goDown: true, // 是否下钻
        // 下钻回调
        callback: function(name, option, instance) {
            console.log(name, option, instance);
            if (name == '四川') {
                option.series[0].data = convertData(gdDatas);
                option.series[1].data = gdDatas.map(function(dataItem) {
                    return {
                        name: dataItem[0].name,
                        value: gdGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
                    };
                });
                myChart.setOption(option, true);
                setTimeout(() => { // 定时后启动飞线
                    myChart.setOption(option, true);
                }, 500)
            } else if (name == "成都市") {
                option.series[0].data = convertData1(chengdudata);
                option.series[1].data = chengdudata;
                myChart.setOption(option, true); // 赋值后初始化
                setTimeout(() => { // 定时后启动飞线
                    myChart.setOption(option, true);
                }, 500)
            } else if (name == "巴中市") {
                option.series[0].data = convertData1(bazhongdata);
                option.series[1].data = bazhongdata;
                myChart.setOption(option, true); // 赋值后初始化
                setTimeout(() => { // 定时后启动飞线
                    myChart.setOption(option, true);
                }, 500)
            } else if (name == "阿坝藏族羌族自治州") {
                option.series[0].data = convertData1(abeizangzuqiangzuzizhizhoudata);
                option.series[1].data = abeizangzuqiangzuzizhizhoudata;
                myChart.setOption(option, true); // 赋值后初始化
                setTimeout(() => { // 定时后启动飞线
                    myChart.setOption(option, true);
                }, 500)
            } else if (name == "达州市") {
                option.series[0].data = convertData1(dazhoudata);
                option.series[1].data = dazhoudata;
                myChart.setOption(option, true); // 赋值后初始化
                setTimeout(() => { // 定时后启动飞线
                    myChart.setOption(option, true);
                }, 500)
            } else if (name == "德阳市") {
                option.series[0].data = convertData1(deyangdata);
                option.series[1].data = deyangdata;
                myChart.setOption(option, true); // 赋值后初始化
                setTimeout(() => { // 定时后启动飞线
                    myChart.setOption(option, true);
                }, 500)
            } else if (name == "甘孜藏族自治州") {
                option.series[0].data = convertData1(ganzizangzuzizhizhoudata);
                option.series[1].data = ganzizangzuzizhizhoudata;
                myChart.setOption(option, true); // 赋值后初始化
                setTimeout(() => { // 定时后启动飞线
                    myChart.setOption(option, true);
                }, 500)
            } else if (name == "广安市") {
                option.series[0].data = convertData1(guangandata);
                option.series[1].data = guangandata;
                myChart.setOption(option, true); // 赋值后初始化
                setTimeout(() => { // 定时后启动飞线
                    myChart.setOption(option, true);
                }, 500)
            } else if (name == "广元市") {
                option.series[0].data = convertData1(guangyuandata);
                option.series[1].data = guangyuandata;
                myChart.setOption(option, true); // 赋值后初始化
                setTimeout(() => { // 定时后启动飞线
                    myChart.setOption(option, true);
                }, 500)
            } else if (name == "乐山市") {
                option.series[0].data = convertData1(leshandata);
                option.series[1].data = leshandata;
                myChart.setOption(option, true); // 赋值后初始化
                setTimeout(() => { // 定时后启动飞线
                    myChart.setOption(option, true);
                }, 500)
            } else if (name == "凉山彝族自治州") {
                option.series[0].data = convertData1(liangshanyizuzizhizhoudata);
                option.series[1].data = liangshanyizuzizhizhoudata;
                myChart.setOption(option, true); // 赋值后初始化
                setTimeout(() => { // 定时后启动飞线
                    myChart.setOption(option, true);
                }, 500)
            } else if (name == "泸州市") {
                option.series[0].data = convertData1(luzhoudata);
                option.series[1].data = luzhoudata;
                myChart.setOption(option, true); // 赋值后初始化
                setTimeout(() => { // 定时后启动飞线
                    myChart.setOption(option, true);
                }, 500)
            } else if (name == "眉山市") {
                option.series[0].data = convertData1(meishandata);
                option.series[1].data = meishandata;
                myChart.setOption(option, true); // 赋值后初始化
                setTimeout(() => { // 定时后启动飞线
                    myChart.setOption(option, true);
                }, 500)
            } else if (name == "绵阳市") {
                option.series[0].data = convertData1(mianyangdata);
                option.series[1].data = mianyangdata;
                myChart.setOption(option, true); // 赋值后初始化
                setTimeout(() => { // 定时后启动飞线
                    myChart.setOption(option, true);
                }, 500)
            } else if (name == "自贡市") {
                option.series[0].data = convertData1(zigongdata);
                option.series[1].data = zigongdata;
                myChart.setOption(option, true); // 赋值后初始化
                setTimeout(() => { // 定时后启动飞线
                    myChart.setOption(option, true);
                }, 500)
            } else if (name == "南充市") {
                option.series[0].data = convertData1(nanchongdata);
                option.series[1].data = nanchongdata;
                myChart.setOption(option, true); // 赋值后初始化
                setTimeout(() => { // 定时后启动飞线
                    myChart.setOption(option, true);
                }, 500)
            } else if (name == "内江市") {
                option.series[0].data = convertData1(neijiangdata);
                option.series[1].data = neijiangdata;
                myChart.setOption(option, true); // 赋值后初始化
                setTimeout(() => { // 定时后启动飞线
                    myChart.setOption(option, true);
                }, 500)
            } else if (name == "攀枝花市") {
                option.series[0].data = convertData1(panzhihuadata);
                option.series[1].data = panzhihuadata;
                myChart.setOption(option, true); // 赋值后初始化
                setTimeout(() => { // 定时后启动飞线
                    myChart.setOption(option, true);
                }, 500)
            } else if (name == "遂宁市") {
                option.series[0].data = convertData1(suiningdata);
                option.series[1].data = suiningdata;
                myChart.setOption(option, true); // 赋值后初始化
                setTimeout(() => { // 定时后启动飞线
                    myChart.setOption(option, true);
                }, 500)
            } else if (name == "雅安市") {
                option.series[0].data = convertData1(yaandata);
                option.series[1].data = yaandata;
                myChart.setOption(option, true); // 赋值后初始化
                setTimeout(() => { // 定时后启动飞线
                    myChart.setOption(option, true);
                }, 500)
            } else if (name == "宜宾市") {
                option.series[0].data = convertData1(yibindata);
                option.series[1].data = yibindata;
                myChart.setOption(option, true); // 赋值后初始化
                setTimeout(() => { // 定时后启动飞线
                    myChart.setOption(option, true);
                }, 500)
            } else if (name == '资阳市') {
                option.series[0].data = convertData1(ziyangdata);
                option.series[1].data = ziyangdata;
                myChart.setOption(option, true); // 赋值后初始化
                setTimeout(() => { // 定时后启动飞线
                    myChart.setOption(option, true);
                }, 500)
            }
        },
        // 数据展示            	
        data: []
    };


    var levelColorMap = { // level颜色
        '1': '#f44336',
        '2': '#fc9700',
        '3': '#ffde00',
        '4': '#00eaff'
    };

    var defaultOpt = {
        mapName: 'china', // 地图展示
        goDown: false, // 是否下钻
        bgColor: '#013954', // 画布背景色
        activeArea: [], // 区域高亮,同echarts配置项
        data: [],
        // 下钻回调(点击的地图名、实例对象option、实例对象)
        callback: function(name, option, instance) {}
    };
    if (opt) {
        opt1 = $.extend(defaultOpt, opt);
    }

    // 层级索引
    var name = [opt1.mapName];
    var idx = 0;
    var pos = { //层级位置
        leftPlus: 55,
        leftCur: 50,
        left: 10,
        top: 10
    };

    var line = [ //箭头
        [0, 0],
        [8, 11],
        [0, 22]
    ];

    // style样式
    var style = {
        font: '18px "Microsoft YaHei", sans-serif',
        textColor: '#eee',
        lineColor: 'rgba(147, 235, 248, .8)'
    };


    var handleEvents = {
        /**
         * i 实例对象
         * o option
         * n 地图名
         **/
        resetOption: function(i, o, n) {
            console.log(i)
            console.log(o)
            console.log(n)
            var breadcrumb = this.createBreadcrumb(n);

            var j = name.indexOf(n);
            var l = o.graphic.length;
            if (j < 0) {
                console.log('jinru1')
                o.graphic.push(breadcrumb);
                o.graphic[0].children[0].shape.x2 = 195;
                o.graphic[0].children[1].shape.x2 = 195;
                if (o.graphic.length > 2) {
                    for (var x = 0; x < opt1.data.length; x++) {
                        if (n === opt1.data[x].name + '市') {
                            o.series[0].data = handleEvents.initSeriesData(opt1.data[x].data);
                            break;
                        } else o.series[0].data = [];
                    }
                }
                name.push(n);
                idx++;
            } else {
                console.log('jinru2', j)
                o.graphic.splice(j + 2, l);
                if (o.graphic.length <= 2) {
                    o.graphic[0].children[0].shape.x2 = 85;
                    o.graphic[0].children[1].shape.x2 = 85;
                    o.series[0].data = handleEvents.initSeriesData(gdDatas);
                }
                name.splice(j + 1, l);
                idx = j;
                pos.leftCur -= pos.leftPlus * (l - j - 1);
            }

            o.geo.map = n;
            o.geo.zoom = 1;
            i.clear();
            i.setOption(o);
            this.zoomAnimation();
            opt1.callback(n, o, i);
        },

        /**
         * name 地图名
         **/
        createBreadcrumb: function(name) {
            var cityToPinyin = {
                "成都市": "chengdu",
                '巴中市': "bazhong",
                '阿坝藏族羌族自治州市': "abeizangzuqiangzuzizhizhou",
                '达州市': "dazhou",
                "德阳市": "deyang",
                "甘孜藏族自治州市": "ganzizangzuzizhizhou",
                "广安市": "guangan",
                "广元市": "guangyuan",
                "乐山市": "leshan",
                "凉山彝族自治州市": "liangshanyizuzizhizhou",
                "泸州市": "luzhou",
                "眉山市": "meishan",
                "绵阳市": "mianyang",
                "自贡市": "zigong",
                "南充市": "nanchong",
                "内江市": "neijiang",
                "攀枝花市": "panzhihua",
                "遂宁市": "suining",
                "雅安市": "yaan",
                "宜宾市": "yibin",
                "资阳市": "ziyang"
            };
            var breadcrumb = {
                type: 'group',
                id: name,
                left: pos.leftCur + pos.leftPlus,
                top: pos.top + 3,
                children: [{
                    type: 'polyline',
                    left: -90,
                    top: -5,
                    shape: {
                        points: line
                    },
                    style: {
                        stroke: '#fff',
                        key: name,
                    },
                    onclick: function() {
                        var name = this.style.key;
                        handleEvents.resetOption(myChart, option, name);
                    }
                }, {
                    type: 'text',
                    left: -68,
                    top: 'middle',
                    style: {
                        text: name,
                        textAlign: 'center',
                        fill: style.textColor,
                        font: style.font
                    },
                    onclick: function() {
                        var name = this.style.text;
                        handleEvents.resetOption(myChart, option, name);
                    }
                }, {
                    type: 'text',
                    left: -68,
                    top: 10,
                    style: {

                        name: name,
                        text: cityToPinyin[name] ? cityToPinyin[name].toUpperCase() : '',
                        textAlign: 'center',
                        fill: style.textColor,
                        font: '12px "Microsoft YaHei", sans-serif',
                    },
                    onclick: function() {
                        // console.log(this.style);
                        var name = this.style.name;
                        handleEvents.resetOption(myChart, option, name);
                    }
                }]
            }

            pos.leftCur += pos.leftPlus;

            return breadcrumb;
        },

        // 设置effectscatter
        initSeriesData: function(data) {
            console.log(data, '22222222222')
            var temp = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = gdGeoCoordMap[data[i].name];
                if (geoCoord) {
                    temp.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value, data[i].level)
                    });
                }
            }
            return temp;
        },

        zoomAnimation: function() {
            var count = null;
            var zoom = function(per) {
                if (!count) count = per;
                count = count + per;
                // console.log(per,count);
                myChart.setOption({
                    geo: {
                        zoom: count
                    }
                });
                if (count < 1) window.requestAnimationFrame(function() {
                    zoom(0.2);
                });
            };
            window.requestAnimationFrame(function() {
                zoom(0.2);
            });
        }
    };

    var convertData = function(data) {

        var res = [];
        for (var i = 0; i < data.length; i++) {
            var dataItem = data[i];
            var name = dataItem[0].name
            var fromCoord = gdGeoCoordMap[dataItem[0].name];
            var toCoord = [104.07754,30.582248]; //被攻击点坐标
            if (fromCoord && toCoord) {
                res.push([{
                    name: name,
                    coord: fromCoord,
                    value: dataItem[0].value
                }, {
                    coord: toCoord,
                }]);
            }
        }
        return res;
    };

    var convertData1 = function(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var dataItem = data[i];
            var name = dataItem.name
            var fromCoord = data[0].value.slice(0, 2)
            var toCoord = dataItem.value.slice(0, 2)
            if (fromCoord && toCoord) {
                res.push([{
                    name: name,
                    coord: fromCoord,
                    value: dataItem.value[2],
                }, {
                    coord: toCoord,
                }]);
            }
        }
        return res;
    };

    var series = [];
    [
        ['成都市', gdDatas]
    ].forEach(function(item, i) {
        console.log(item)
        series.push({
                type: 'lines',
                zlevel: 1,
                effect: {
                    show: true,
                    period: 3, //箭头指向速度，值越小速度越快
                    trailLength: 0.7, //特效尾迹长度[0,1]值越大，尾迹越长重
                    color: '#fff', //箭头图标
                    symbolSize: 3, //图标大小
                },
                lineStyle: {
                    normal: {
                        width: 0.1, //尾迹线条宽度
                        opacity: 0.2, //尾迹线条透明度
                        curveness: 0.3 //尾迹线条曲直度
                    }
                },
                data: convertData(item[1])
            }, {
                type: 'effectScatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                rippleEffect: { //涟漪特效
                    period: 4, //动画时间，值越小速度越快
                    brushType: 'stroke', //波纹绘制方式 stroke, fill
                    scale: 4 //波纹圆环最大限制，值越大波纹越大
                },
                label: {
                    normal: {
                        show: false,
                        position: 'right', //显示位置
                        offset: [5, 0], //偏移设置
                        formatter: function(params) { //圆环显示文字
                            return params.data.name;
                        },
                        fontSize: 19
                    },
                    emphasis: {
                        show: true
                    }
                },
                symbol: 'circle',
                symbolSize: function(val) {
                    return 10 + val[2] * 0; //圆环大小
                },
                itemStyle: {
                    normal: {
                        show: false,
                        color: '#f00'
                    }
                },
                data: item[1].map(function(dataItem) {
                    return {
                        name: dataItem[0].name,
                        value: gdGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
                    };
                }),
            },
            //被攻击点
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                rippleEffect: {
                    period: 4,
                    brushType: 'stroke',
                    scale: 4
                },
                label: {
                    normal: {
                        show: false,
                        position: 'right',
                        //offset:[5, 0],
                        color: '#0f0',
                        formatter: '{b}',
                        textStyle: {
                            color: "#0f0"
                        }
                    },
                    emphasis: {
                        show: false,
                        color: "#f60"
                    }
                },
                // symbol: 'pin',
                // symbolSize: 50,
                // data: [{
                //     name: item[0],
                //     value: gdGeoCoordMap[item[0]].concat([10]),
                // }],
            }
        );
    });









    option = {
            "tooltip": {
                trigger: 'item',
                backgroundColor: 'rgba(0,0,0,0)',
                formatter: function(item) {
                    console.log(item, 'item!!!!')
                    if (item.componentSubType === 'lines') {
                        var tipHtml1 = '';
                        tipHtml1 = '<div style="background:#fff;border-radius:10px;padding-top:10px;box-shadow:0 0 10px #666">' +
                            '<div style="color:#fff;height:20px;border-radius:6px;font-size:12px;line-height:20px;background-color:#5861a2;text-align:center;margin:0 2px;">' + item.data.name + '</div>' +
                            '<div style="text-align:center;color:#494949;padding:8px 6px">' +
                            '<span style="font-size:18px;font-weight:bold;">' + '总测试设备：' + item.data.value + ' ' + '</span>' +
                            '</div>' + '</div>';
                        return tipHtml1;
                    } else if (item.componentSubType === 'effectScatter') {
                        var tipHtml2 = '';
                        tipHtml2 = '<div style="background:#fff;border-radius:10px;padding-top:10px;box-shadow:0 0 10px #666">' +
                            '<div style="color:#fff;height:20px;border-radius:6px;font-size:12px;line-height:20px;background-color:#5861a2;text-align:center;margin:0 2px;">' + item.data.name + '</div>' +
                            '<div style="text-align:center;color:#494949;padding:8px 6px">' +
                            '<span style="font-size:18px;font-weight:bold;">' + '总测试设备：' + item.data.value[2] + ' ' + '</span>' +
                            '</div>' + '</div>';
                        return tipHtml2;
                    } else if (item.componentSubType === 'scatter') {
                        var tipHtml3 = '';
                        tipHtml3 = '<div style="background:#fff;border-radius:10px;padding-top:10px;box-shadow:0 0 10px #666">' +
                            '<div style="color:#fff;height:20px;border-radius:6px;font-size:12px;line-height:20px;background-color:#5861a2;text-align:center;margin:0 2px;">' + item.data.name + '</div>' +
                            '<div style="text-align:center;color:#494949;padding:8px 6px">' +
                            '<span style="font-size:18px;font-weight:bold;">' + '总测试设备：' + item.data.value[2] + ' ' + '</span>' +
                            '</div>' + '</div>';
                        return tipHtml3;
                    }
                }
            },
            backgroundColor: "#013954",
            "graphic": [{
                type: 'group',
                left: pos.left,
                top: pos.top - 4,
                children: [{
                    type: 'line',
                    left: 0,
                    top: -20,
                    shape: {
                        x1: 0,
                        y1: 0,
                        x2: 85,
                        y2: 0
                    },
                    style: {
                        stroke: style.lineColor,
                    }
                }, {
                    type: 'line',
                    left: 0,
                    top: 20,
                    shape: {
                        x1: 0,
                        y1: 0,
                        x2: 85,
                        y2: 0
                    },
                    style: {
                        stroke: style.lineColor,
                    }
                }]
            }, {
                id: name[idx],
                type: 'group',
                left: pos.left + 2,
                top: pos.top,
                children: [{
                    type: 'polyline',
                    left: 90,
                    top: -12,
                    shape: {
                        points: line
                    },
                    style: {
                        stroke: 'transparent',
                        key: name[0]
                    },
                    onclick: function() {
                        var name = this.style.key;
                        console.log(name, '111111')
                        handleEvents.resetOption(myChart, option, name);
                    }
                }, {
                    type: 'text',
                    left: 0,
                    top: 'middle',
                    style: {
                        text: name[0] === '四川' ? '四川省' : name[0],
                        textAlign: 'center',
                        fill: style.textColor,
                        font: style.font
                    },
                    onclick: function() {
                        handleEvents.resetOption(myChart, option, '四川');
                    }
                }, {
                    type: 'text',
                    left: 0,
                    top: 10,
                    style: {
                        text: 'SICHUAN',
                        textAlign: 'center',
                        fill: style.textColor,
                        font: '12px "Microsoft YaHei", sans-serif',
                    },
                    onclick: function() {
                        handleEvents.resetOption(myChart, option, '四川');
                    }
                }]
            }],
            visualMap: { //图例值控制
                min: 0,
                max: 1,
                calculable: true,
                show: false,
                color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
                textStyle: {
                    color: '#fff'
                }
            },
            "geo": {
                "map": "四川",
                "layoutCenter": ["55%", "50%"],
                "layoutSize": "109%",
                "label": {
                    "normal": {
                        "show": true,
                        "textStyle": {
                            "color": '#fff'
                        }
                    },
                    "emphasis": {
                        "textStyle": {
                            "color": '#fff'
                        }
                    }
                },
                "roam": true, //是否允许缩放
                "mapLocation": {
                    "width": "110%",
                    "height": "97%"
                },

                "itemStyle": {
                    "normal": {
                        borderColor: 'rgba(147, 235, 248, 1)',
                        borderWidth: 1,
                        areaColor: {
                            type: 'radial',
                            x: 0.5,
                            y: 0.5,
                            r: 0.8,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        },
                        shadowColor: 'rgba(128, 217, 248, 1)',
                        // shadowColor: 'rgba(255, 255, 255, 1)',
                        shadowOffsetX: -2,
                        shadowOffsetY: 2,
                        shadowBlur: 10
                    },
                    "emphasis": {
                        itemStyle: {
                            areaColor: '#FFD181',
                            borderColor: '#404a59',
                            borderWidth: 1
                        }
                    }
                }
            },
            series: series
        },
        myChart.setOption(option);
    myChart.on('click', function(params) {
        console.log(params)
        var _self = this;
        if (cityMap[params.name]) {
            var url = cityMap[params.name];
            $.get(url, function(response) {
                //console.log(response, 'res');
                curGeoJson = response;
                echarts.registerMap(params.name, response);
                handleEvents.resetOption(_self, option, params.name);
            });
        }
    });
});
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
