中国地图和中国省份地图切换demoECharts Gallery

20:11:45图表已生成
代码
var uploadedDataURL = {
    "山东": [
        117,
        36.65
    ],
    "山西": [
        112.55,
        37.87
    ],
    "黑龙江": [
        126.63,
        45.75
    ],
    "吉林": [
        125.35,
        43.88
    ],
    "辽宁": [
        123.38,
        41.8
    ],
    "河北": [
        114.48,
        38.03
    ],
    "河南": [
        113.65,
        34.76
    ],
    "安徽": [
        117.27,
        31.86
    ],
    "湖北": [
        114.31,
        30.52
    ],
    "湖南": [
        113,
        28.21
    ],
    "陕西": [
        108.95,
        34.27
    ],
    "四川": [
        104.06,
        30.67
    ],
    "贵州": [
        106.71,
        26.57
    ],
    "云南": [
        102.73,
        25.04
    ],
    "江苏": [
        118.78,
        32.04
    ],
    "福建": [
        119.3,
        26.08
    ],
    "浙江": [
        120.19,
        30.26
    ],
    "江西": [
        115.89,
        28.68
    ],
    "广东": [
        113.23,
        23.16
    ],
    "广西壮族自治": [
        110.28,
        25.29
    ],
    "海南": [
        110.35,
        20.02
    ],
    "甘肃": [
        103.73,
        36.03
    ],
    "西藏": [
        91.11,
        29.97
    ],
    "新疆维吾尔自治": [
        87.68,
        43.77
    ],
    "内蒙古自治": [
        111.65,
        40.82
    ],
    "海门": [
        121.15,
        31.89
    ],
    "鄂尔多斯": [
        109.781327,
        39.608266
    ],
    "招远": [
        120.38,
        37.35
    ],
    "舟山": [
        122.207216,
        29.985295
    ],
    "齐齐哈尔": [
        123.97,
        47.33
    ],
    "盐城": [
        120.13,
        33.38
    ],
    "赤峰": [
        118.87,
        42.28
    ],
    "青岛": [
        120.33,
        36.07
    ],
    "乳山": [
        121.52,
        36.89
    ],
    "金昌": [
        102.188043,
        38.520089
    ],
    "泉州": [
        118.58,
        24.93
    ],
    "莱西": [
        120.53,
        36.86
    ],
    "日照": [
        119.46,
        35.42
    ],
    "胶南": [
        119.97,
        35.88
    ],
    "南通": [
        121.05,
        32.08
    ],
    "拉萨": [
        91.11,
        29.97
    ],
    "云浮": [
        112.02,
        22.93
    ],
    "梅州": [
        116.1,
        24.55
    ],
    "文登": [
        122.05,
        37.2
    ],
    "上海": [
        121.48,
        31.22
    ],
    "攀枝花": [
        101.718637,
        26.582347
    ],
    "威海": [
        122.1,
        37.5
    ],
    "承德": [
        117.93,
        40.97
    ],
    "厦门": [
        118.1,
        24.46
    ],
    "汕尾": [
        115.375279,
        22.786211
    ],
    "潮州": [
        116.63,
        23.68
    ],
    "丹东": [
        124.37,
        40.13
    ],
    "太仓": [
        121.1,
        31.45
    ],
    "曲靖": [
        103.79,
        25.51
    ],
    "烟台": [
        121.39,
        37.52
    ],
    "福州": [
        119.3,
        26.08
    ],
    "瓦房店": [
        121.979603,
        39.627114
    ],
    "即墨": [
        120.45,
        36.38
    ],
    "抚顺": [
        123.97,
        41.97
    ],
    "玉溪": [
        102.52,
        24.35
    ],
    "张家口": [
        114.87,
        40.82
    ],
    "阳泉": [
        113.57,
        37.85
    ],
    "莱州": [
        119.942327,
        37.177017
    ],
    "湖州": [
        120.1,
        30.86
    ],
    "汕头": [
        116.69,
        23.39
    ],
    "昆山": [
        120.95,
        31.39
    ],
    "宁波": [
        121.56,
        29.86
    ],
    "湛江": [
        110.359377,
        21.270708
    ],
    "揭阳": [
        116.35,
        23.55
    ],
    "荣成": [
        122.41,
        37.16
    ],
    "连云港": [
        119.16,
        34.59
    ],
    "葫芦岛": [
        120.836932,
        40.711052
    ],
    "常熟": [
        120.74,
        31.64
    ],
    "东莞": [
        113.75,
        23.04
    ],
    "河源": [
        114.68,
        23.73
    ],
    "淮安": [
        119.15,
        33.5
    ],
    "泰州": [
        119.9,
        32.49
    ],
    "南宁": [
        108.33,
        22.84
    ],
    "营口": [
        122.18,
        40.65
    ],
    "惠州": [
        114.4,
        23.09
    ],
    "江阴": [
        120.26,
        31.91
    ],
    "蓬莱": [
        120.75,
        37.8
    ],
    "韶关": [
        113.62,
        24.84
    ],
    "嘉峪关": [
        98.289152,
        39.77313
    ],
    "广州": [
        113.23,
        23.16
    ],
    "延安": [
        109.47,
        36.6
    ],
    "太原": [
        112.53,
        37.87
    ],
    "清远": [
        113.01,
        23.7
    ],
    "中山": [
        113.38,
        22.52
    ],
    "昆明": [
        102.73,
        25.04
    ],
    "寿光": [
        118.73,
        36.86
    ],
    "盘锦": [
        122.070714,
        41.119997
    ],
    "长治": [
        113.08,
        36.18
    ],
    "深圳": [
        114.07,
        22.62
    ],
    "珠海": [
        113.52,
        22.3
    ],
    "宿迁": [
        118.3,
        33.96
    ],
    "咸阳": [
        108.72,
        34.36
    ],
    "铜川": [
        109.11,
        35.09
    ],
    "平度": [
        119.97,
        36.77
    ],
    "佛山": [
        113.11,
        23.05
    ],
    "海口": [
        110.35,
        20.02
    ],
    "江门": [
        113.06,
        22.61
    ],
    "章丘": [
        117.53,
        36.72
    ],
    "肇庆": [
        112.44,
        23.05
    ],
    "大连": [
        121.62,
        38.92
    ],
    "临汾": [
        111.5,
        36.08
    ],
    "吴江": [
        120.63,
        31.16
    ],
    "石嘴山": [
        106.39,
        39.04
    ],
    "沈阳": [
        123.38,
        41.8
    ],
    "苏州": [
        120.62,
        31.32
    ],
    "茂名": [
        110.88,
        21.68
    ],
    "嘉兴": [
        120.76,
        30.77
    ],
    "长春": [
        125.35,
        43.88
    ],
    "胶州": [
        120.03336,
        36.264622
    ],
    "银川": [
        106.27,
        38.47
    ],
    "张家港": [
        120.555821,
        31.875428
    ],
    "三门峡": [
        111.19,
        34.76
    ],
    "锦州": [
        121.15,
        41.13
    ],
    "南昌": [
        115.89,
        28.68
    ],
    "柳州": [
        109.4,
        24.33
    ],
    "三亚": [
        109.511909,
        18.252847
    ],
    "自贡": [
        104.778442,
        29.33903
    ],
    "阳江": [
        111.95,
        21.85
    ],
    "泸州": [
        105.39,
        28.91
    ],
    "西宁": [
        101.74,
        36.56
    ],
    "宜宾": [
        104.56,
        29.77
    ],
    "呼和浩特": [
        111.65,
        40.82
    ],
    "成都": [
        104.06,
        30.67
    ],
    "大同": [
        113.3,
        40.12
    ],
    "镇江": [
        119.44,
        32.2
    ],
    "桂林": [
        110.28,
        25.29
    ],
    "张家界": [
        110.479191,
        29.117096
    ],
    "宜兴": [
        119.82,
        31.36
    ],
    "北海": [
        109.12,
        21.49
    ],
    "西安": [
        108.95,
        34.27
    ],
    "金坛": [
        119.56,
        31.74
    ],
    "东营": [
        118.49,
        37.46
    ],
    "牡丹江": [
        129.58,
        44.6
    ],
    "遵义": [
        106.9,
        27.7
    ],
    "绍兴": [
        120.58,
        30.01
    ],
    "扬州": [
        119.42,
        32.39
    ],
    "常州": [
        119.95,
        31.79
    ],
    "潍坊": [
        119.1,
        36.62
    ],
    "重庆": [
        106.54,
        29.59
    ],
    "台州": [
        121.420757,
        28.656386
    ],
    "南京": [
        118.78,
        32.04
    ],
    "滨州": [
        118.03,
        37.36
    ],
    "贵阳": [
        106.71,
        26.57
    ],
    "无锡": [
        120.29,
        31.59
    ],
    "本溪": [
        123.73,
        41.3
    ],
    "克拉玛依": [
        84.77,
        45.59
    ],
    "渭南": [
        109.5,
        34.52
    ],
    "马鞍山": [
        118.48,
        31.56
    ],
    "宝鸡": [
        107.15,
        34.38
    ],
    "焦作": [
        113.21,
        35.24
    ],
    "句容": [
        119.16,
        31.95
    ],
    "北京": [
        116.46,
        39.92
    ],
    "徐州": [
        117.2,
        34.26
    ],
    "衡水": [
        115.72,
        37.72
    ],
    "包头": [
        110,
        40.58
    ],
    "绵阳": [
        104.73,
        31.48
    ],
    "乌鲁木齐": [
        87.68,
        43.77
    ],
    "枣庄": [
        117.57,
        34.86
    ],
    "杭州": [
        120.19,
        30.26
    ],
    "淄博": [
        118.05,
        36.78
    ],
    "鞍山": [
        122.85,
        41.12
    ],
    "溧阳": [
        119.48,
        31.43
    ],
    "库尔勒": [
        86.06,
        41.68
    ],
    "安阳": [
        114.35,
        36.1
    ],
    "开封": [
        114.35,
        34.79
    ],
    "济南": [
        117,
        36.65
    ],
    "德阳": [
        104.37,
        31.13
    ],
    "温州": [
        120.65,
        28.01
    ],
    "九江": [
        115.97,
        29.71
    ],
    "邯郸": [
        114.47,
        36.6
    ],
    "临安": [
        119.72,
        30.23
    ],
    "兰州": [
        103.73,
        36.03
    ],
    "沧州": [
        116.83,
        38.33
    ],
    "临沂": [
        118.35,
        35.05
    ],
    "南充": [
        106.110698,
        30.837793
    ],
    "天津": [
        117.2,
        39.13
    ],
    "富阳": [
        119.95,
        30.07
    ],
    "泰安": [
        117.13,
        36.18
    ],
    "诸暨": [
        120.23,
        29.71
    ],
    "郑州": [
        113.65,
        34.76
    ],
    "哈尔滨": [
        126.63,
        45.75
    ],
    "聊城": [
        115.97,
        36.45
    ],
    "芜湖": [
        118.38,
        31.33
    ],
    "唐山": [
        118.02,
        39.63
    ],
    "平顶山": [
        113.29,
        33.75
    ],
    "邢台": [
        114.48,
        37.05
    ],
    "德州": [
        116.29,
        37.45
    ],
    "济宁": [
        116.59,
        35.38
    ],
    "荆州": [
        112.239741,
        30.335165
    ],
    "宜昌": [
        111.3,
        30.7
    ],
    "义乌": [
        120.06,
        29.32
    ],
    "丽水": [
        119.92,
        28.45
    ],
    "洛阳": [
        112.44,
        34.7
    ],
    "秦皇岛": [
        119.57,
        39.95
    ],
    "株洲": [
        113.16,
        27.83
    ],
    "石家庄": [
        114.48,
        38.03
    ],
    "莱芜": [
        117.67,
        36.19
    ],
    "常德": [
        111.69,
        29.05
    ],
    "保定": [
        115.48,
        38.85
    ],
    "湘潭": [
        112.91,
        27.87
    ],
    "金华": [
        119.64,
        29.12
    ],
    "岳阳": [
        113.09,
        29.37
    ],
    "长沙": [
        113,
        28.21
    ],
    "衢州": [
        118.88,
        28.97
    ],
    "廊坊": [
        116.7,
        39.53
    ],
    "菏泽": [
        115.480656,
        35.23375
    ],
    "合肥": [
        117.27,
        31.86
    ],
    "武汉": [
        114.31,
        30.52
    ],
    "大庆": [
        125.03,
        46.58
    ]
}

var province = [{
        name: '河北',
        value: 55,
        array: [98, 98, 200, 30]
    },
    {
        name: '福建',
        value: 77,
        array: [98, 98, 200, 30]
    },
    {
        name: '海南',
        value: 100,
        array: [98, 98, 200, 30]
    },
    {
        name: '安徽',
        value: 100,
        array: [98, 98, 200, 30]
    },
    {
        name: '陕西',
        value: 100,
        array: [98, 98, 200, 30]
    },
    {
        name: '四川',
        value: 100,
        array: [98, 98, 200, 30]
    },
    {
        name: '内蒙古',
        value: 100,
        array: [98, 98, 200, 30]
    }
]

var city = [{
        name: '邯郸',
        value: 55,
        array: [98, 98, 200, 30]
    },
    {
        name: '邢台',
        value: 77,
        array: [98, 98, 200, 30]
    },
    {
        name: '廊坊',
        value: 100,
        array: [98, 98, 200, 30]
    },
    {
        name: '秦皇岛',
        value: 60,
        array: [98, 98, 200, 30]
    },
    {
        name: '承德',
        value: 41,
        array: [98, 98, 200, 30]
    },
    {
        name: '石家庄',
        value: 35,
        array: [98, 98, 200, 30]
    },
    {
        name: '保定',
        value: 80,
        array: [98, 98, 200, 30]
    },
    {
        name: '张家口',
        value: 15,
        array: [98, 98, 200, 30]
    }
]

var levelList = {
    high: {
        name: '高危',
        min: 66,
        max: 100,
        color: '#EC2B42'
    },
    mid: {
        name: '中危',
        min: 33,
        max: 66,
        color: '#F5AB32'
    },
    low: {
        name: '低危',
        min: 0,
        max: 33,
        color: '#F7E40E'
    }
}

var convertData = function(data) {
    var res = []
    for (var i = 0; i < data.length; i++) {
        var geoCoord = uploadedDataURL[data[i].name]
        if (geoCoord) {
            var color = levelList.low.color
            if (data[i].value >= 0 && data[i].value <= 35) {
                color = levelList.low.color
            } else if (data[i].value >= 35 && data[i].value <= 80) {
                color = levelList.mid.color
            } else if (data[i].value >= 80 && data[i].value <= 100) {
                color = levelList.high.color
            }

            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value),
                tipData: data[i].array,
                ispProvince: true,
                itemStyle: {
                    normal: {
                        color: color
                    }
                }
            })
        }
    }
    return res
}

var tooltip = {
    trigger: 'item',
    formatter: function(params) {
        // var level = getLevel(params.data.tipData[0])
        return `
          数值: ${params.data.tipData.join('分，')}分 <br>
          `
    }
}

option = {
    // backgroundColor: '#1b236f',
    tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(27, 35, 110, 0.8)'
    },
    geo: {
        map: 'china',
        // map: '河北',
        label: {
            emphasis: {
                show: false
            }
        },
        zoom: 1,
        scaleLimit: {
            min: 0.6,
            max: 2
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#2e539d',
                borderColor: '#1b236f'
            },
            emphasis: {
                areaColor: '#2e539d'
            }
        }
    },
    series: [
        // 风险省份 （不包括 TOP 5）
        {
            name: '风险统计:',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData(province),
            tooltip: tooltip,
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: false
                },
                emphasis: {
                    show: true
                }
            }
        }
        // ,
        // 风险省份 TOP 5
        // {
        //   name: '风险统计:',
        //   type: 'effectScatter',
        //   coordinateSystem: 'geo',
        //   zlevel: 2,
        //   rippleEffect: {
        //     brushType: 'stroke'
        //   },
        //   tooltip: tooltip,
        //   // symbolSize: function(val) {
        //   //   return val[2] / 5
        //   // },
        //   label: {
        //     normal: {
        //       show: true,
        //       formatter: '{b}',
        //       position: 'right'
        //     },
        //     emphasis: {
        //       show: true
        //     }
        //   },
        //   data: convertData(
        //     province
        //       .sort(function(a, b) {
        //         return b.value - a.value
        //       })
        //       .slice(0, 5)
        //   )
        // }
    ]
}

let names = {
    上海: 'shanghai',
    河北: 'hebei',
    山西: 'shanxi',
    内蒙古: 'neimenggu',
    辽宁: 'liaoning',
    吉林: 'jilin',
    黑龙江: 'heilongjiang',
    江苏: 'jiangsu',
    浙江: 'zhejiang',
    安徽: 'anhui',
    福建: 'fujian',
    江西: 'jiangxi',
    山东: 'shandong',
    河南: 'henan',
    湖北: 'hubei',
    湖南: 'hunan',
    广东: 'guangdong',
    广西: 'guangxi',
    海南: 'hainan',
    四川: 'sichuan',
    贵州: 'guizhou',
    云南: 'yunnan',
    西藏: 'xizang',
    陕西: 'shanxi1',
    甘肃: 'gansu',
    青海: 'qinghai',
    宁夏: 'ningxia',
    新疆: 'xinjiang',
    北京: 'beijing',
    天津: 'tianjin',
    重庆: 'chongqing',
    香港: 'xianggang',
    澳门: 'aomen',
    台湾: 'taiwan'
}

myChart.on('click', params => {
    console.log(params)
    if (params.data && params.data.ispProvince) {
        var name = names[params.name] || 'beijing'
        var url = `/dep/echarts/map/js/province/${name}.js`;
        $.get(url, function() {
            option.geo.map = name === 'beijing' ? '北京' : params.name
            option.series[0].data = [params.data];
            myChart.setOption(option);
        });
    } else {
        option.geo.map = 'china';
        option.series[0].data = convertData(province)
        myChart.setOption(option);
    }
})
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
