python得到地區資訊，並讀取檔案資料，然後視覺化實現資料下鑽

yesyes1發表於2024-03-10
Python視覺化

具體程式碼（我擷取了原檔案的幾條資料資訊，節省一下訪問百度的額度）

# 這裡面有轉換地區程式碼、讀取檔案資訊程式碼、分析檔案內容編碼、資料可視乎編碼

from pyecharts.charts import Map
from pyecharts import options as opts
from pyecharts.globals import ThemeType
import urllib.request, urllib.parse, urllib.error
import json
import hashlib
import numpy as np
import pandas as pd

MyAK = 'sIWgaZ4ypVeGYGwnMPfUDB1FHV0dLgtC'
MySK = 'GucWw7tIwOzHvlwWyloQHNLqzc8iAb2U'

lat=0.0
lng=0.0
#處理得到url
def get_url(name):
    #GET請求 http://api.map.baidu.com/geocoding/v3/?address=北京市海淀區上地十街10號&output=json&ak=您的ak&callback=showLocation
    queryStr = '/geocoding/v3/?address={}&output=json&ak={}'.format(name,MyAK)
    # 對queryStr進行轉碼，safe內的保留字元不轉換
    encodedStr = urllib.parse.quote(queryStr, safe="/:=&?#+!$,;'@()*[]")
    # 在最後追加sk
    rawStr = encodedStr + MySK
    # 計算sn
    sn = (hashlib.md5(urllib.parse.quote_plus(rawStr).encode("utf8")).hexdigest())
    #由於URL裡面含有中文，所以需要用parse.quote進行處理，然後返回最終可呼叫的url
    url = urllib.parse.quote("http://api.map.baidu.com" + queryStr + "&sn=" + sn, safe="/:=&?#+!$,;'@()*[]")
    #print('URL:', url)
    return url

#得到json資料
def get_json(url):
    # 從API讀取資料
    req = urllib.request.urlopen(url)
    res = req.read().decode()

    # 解析資料
    try:
        # 將 JSON 物件轉換為 Python 字典
        json_data = json.loads(res)
    except:
        json_data = "地址未知"
    if not json_data or 'status' not in json_data or json_data['status'] != 0:
        print('json資料獲取失敗',json_data['status'])
    '''else:
        #輸出Json資料
        print(json.dumps(json_data, indent=4, ensure_ascii=False))'''
    return json_data

# 獲取經緯度座標
def get_lnglat(json_data):
    #Python中定義函式時，若想在函式內部對函式外的變數進行操作，就需要在函式內部宣告其為global
    global lat,lng
    lat = json_data["result"]["location"]["lat"]
    lng = json_data["result"]["location"]["lng"]
    #print('緯度', lat, '經度', lng)

def get_url2(lat,lng):
    #GET請求 http://api.map.baidu.com/reverse_geocoding/v3/?ak=您的ak&output=json&coordtype=wgs84ll&location=31.225696563611,121.49884033194
    queryStr = '/reverse_geocoding/v3/?ak={}&output=json&coordtype=wgs84ll&location={},{} '.format(MyAK,str(lat),str(lng))
    # 對queryStr進行轉碼，safe內的保留字元不轉換
    encodedStr = urllib.parse.quote(queryStr, safe="/:=&?#+!$,;'@()*[]")
    # 在最後追加sk
    rawStr = encodedStr + MySK
    # 計算sn
    sn = (hashlib.md5(urllib.parse.quote_plus(rawStr).encode("utf8")).hexdigest())
    #由於URL裡面含有中文，所以需要用parse.quote進行處理，然後返回最終可呼叫的url
    url = urllib.parse.quote("http://api.map.baidu.com" + queryStr + "&sn=" + sn, safe="/:=&?#+!$,;'@()*[]")
    #print('URL:', url)
    return url

# 解析Json資料
def get_province(json_data):
    if json_data != "地址未知":
        province=json_data["result"]["addressComponent"]["province"]
        city=json_data["result"]["addressComponent"]["city"]
        district=json_data["result"]["addressComponent"]["district"]
        # adcode=json_data["result"]["addressComponent"]["adcode"]
        # print("地理：",province+city+district)
        result = province
    else:
        result = json_data
    return result
    # print("行政程式碼："+adcode)

def get_city(json_data):
    if json_data != "地址未知":
        province=json_data["result"]["addressComponent"]["province"]
        city=json_data["result"]["addressComponent"]["city"]
        district=json_data["result"]["addressComponent"]["district"]
        # adcode=json_data["result"]["addressComponent"]["adcode"]
        # print("地理：",province+city+district)
        result = city
    else:
        result = json_data
    return result
    # print("行政程式碼："+adcode)

def get_district(json_data):
    if json_data != "地址未知":
        province=json_data["result"]["addressComponent"]["province"]
        city=json_data["result"]["addressComponent"]["city"]
        district=json_data["result"]["addressComponent"]["district"]
        # adcode=json_data["result"]["addressComponent"]["adcode"]
        # print("地理：",province+city+district)
        result = district
    else:
        result = json_data
    return result
    # print("行政程式碼："+adcode)

# 讀取csv檔案相關資料
df = pd.read_csv("D:/12140/Desktops/111/222/zzz.csv", encoding="utf-8")  # 編碼預設UTF-8，若亂碼自行更改

province_data = df[['城市']]

gdp_data = df[['gdp']]

province_data_array = np.array(province_data.stack())  # 首先將pandas讀取的資料轉化為array
province_map_data = province_data_array.tolist()  # 然後轉化為list形式

gdp_data_array = np.array(gdp_data.stack())
gdp_map_data = gdp_data_array.tolist()

ppp_list = []
ccc_list = []
ddd_list = []

# 得到各個地址所對應的省市
for i in range(0, len(province_map_data)):
    uu = get_url(province_map_data[i])
    json_data = get_json(uu)
    if json_data['status'] != 1:
        lnglat = get_lnglat(json_data)
        uu2 = get_url2(lat, lng)
        json_data = get_json(uu2)
        province = get_province(json_data)
        city = get_city(json_data)
        district = get_district(json_data)
        ppp_list.append(province)
        ccc_list.append(city)
        ddd_list.append(district)

df['省份'] = ppp_list
df['城市'] = ccc_list
df['區縣'] = ddd_list

new_ppp_list = [x[:-1] for x in ppp_list]
new_ccc_list = [x[:-1] for x in ccc_list]
new_ddd_list = [x[:-1] for x in ddd_list]

df.to_csv("D:/12140/Desktops/111/222/zzz.csv", index=False)

# 讀取資料，進行地圖下鑽
data = pd.read_csv('D:/12140/Desktops/111/222/zzz.csv')
province = list(data["省份"])
gdp = list(data["gdp"])
list_province_gdp = [list(z) for z in zip(province, gdp)]

city = list(data['城市'])
gdp = list(data["gdp"])
list_city_gdp = [list(z) for z in zip(city, gdp)]

district = list(data['區縣'])
gdp = list(data["gdp"])
list_district_gdp = [list(z) for z in zip(district, gdp)]

# 生成全國地圖
c = (
    Map(init_opts=opts.InitOpts(width="1000px", height="600px"))
    .set_global_opts(
        title_opts=opts.TitleOpts(title="全國地圖"),
        visualmap_opts=opts.VisualMapOpts(
            type_="scatter"
        )
    )
    .add("GDP", list_province_gdp, maptype="china")
    .render("Modern地圖.html")
)

# 對應的省市地圖的生成
for i in new_ppp_list:
    province_city = (
        Map(init_opts=opts.InitOpts(width="1500px", height="800px", theme=ThemeType.VINTAGE))
        .add("",
             list_city_gdp,
             i)
        .set_global_opts(
            title_opts=opts.TitleOpts(title=i + "地圖"),
            visualmap_opts=opts.VisualMapOpts(
                min_=1,
                max_=17,
                is_piecewise=True
            )
        )
        .render(path=i + "地圖.html")
    )

# 對應的區縣地圖的生成
for i in new_ccc_list:
    city_qu = (
        Map(init_opts=opts.InitOpts(width="1500px", height="800px", theme=ThemeType.VINTAGE))
        .add("",
             list_district_gdp,
             i)
        .set_global_opts(
            title_opts=opts.TitleOpts(title=i + "地圖"),
            visualmap_opts=opts.VisualMapOpts(
                min_=1,
                max_=17,
                is_piecewise=True
            )
        )
        .render(path=i + "地圖.html")
    )

# Modern地圖.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
                <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/echarts.min.js"></script>
            <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/maps/china.js"></script>

</head>
<body >
    <div id="e58b2c7818cb445890766c7fd8703013" class="chart-container" style="width:1000px; height:600px; "></div>
    <script>
        var chart_e58b2c7818cb445890766c7fd8703013 = echarts.init(
            document.getElementById('e58b2c7818cb445890766c7fd8703013'), 'white', {renderer: 'canvas'});
        var option_e58b2c7818cb445890766c7fd8703013 = {
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "aria": {
        "enabled": false
    },
    "color": [
        "#5470c6",
        "#91cc75",
        "#fac858",
        "#ee6666",
        "#73c0de",
        "#3ba272",
        "#fc8452",
        "#9a60b4",
        "#ea7ccc"
    ],
    "series": [
        {
            "type": "map",
            "name": "GDP",
            "label": {
                "show": true,
                "margin": 8
            },
            "map": "china",
            "data": [
                {
                    "name": "\u6cb3\u5317\u7701",
                    "value": 20
                },
                {
                    "name": "\u6cb3\u5317\u7701",
                    "value": 25
                },
                {
                    "name": "\u6cb3\u5317\u7701",
                    "value": 18
                },
                {
                    "name": "\u5929\u6d25\u5e02",
                    "value": 16
                },
                {
                    "name": "\u5929\u6d25\u5e02",
                    "value": 21
                },
                {
                    "name": "\u5317\u4eac\u5e02",
                    "value": 26
                },
                {
                    "name": "\u6cb3\u5317\u7701",
                    "value": 28
                },
                {
                    "name": "\u5929\u6d25\u5e02",
                    "value": 19
                },
                {
                    "name": "\u6cb3\u5317\u7701",
                    "value": 32
                },
                {
                    "name": "\u6cb3\u5317\u7701",
                    "value": 34
                }
            ],
            "roam": true,
            "aspectScale": 0.75,
            "nameProperty": "name",
            "selectedMode": false,
            "zoom": 1,
            "zlevel": 0,
            "z": 2,
            "seriesLayoutBy": "column",
            "datasetIndex": 0,
            "mapValueCalculation": "sum",
            "showLegendSymbol": true,
            "emphasis": {}
        }
    ],
    "legend": [
        {
            "data": [
                "GDP"
            ],
            "selected": {},
            "show": true,
            "padding": 5,
            "itemGap": 10,
            "itemWidth": 25,
            "itemHeight": 14,
            "backgroundColor": "transparent",
            "borderColor": "#ccc",
            "borderWidth": 1,
            "borderRadius": 0,
            "pageButtonItemGap": 5,
            "pageButtonPosition": "end",
            "pageFormatter": "{current}/{total}",
            "pageIconColor": "#2f4554",
            "pageIconInactiveColor": "#aaa",
            "pageIconSize": 15,
            "animationDurationUpdate": 800,
            "selector": false,
            "selectorPosition": "auto",
            "selectorItemGap": 7,
            "selectorButtonGap": 10
        }
    ],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "showContent": true,
        "alwaysShowContent": false,
        "showDelay": 0,
        "hideDelay": 100,
        "enterable": false,
        "confine": false,
        "appendToBody": false,
        "transitionDuration": 0.4,
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0,
        "padding": 5,
        "order": "seriesAsc"
    },
    "title": [
        {
            "show": true,
            "text": "\u5168\u56fd\u5730\u56fe",
            "target": "blank",
            "subtarget": "blank",
            "padding": 5,
            "itemGap": 10,
            "textAlign": "auto",
            "textVerticalAlign": "auto",
            "triggerEvent": false
        }
    ],
    "visualMap": {
        "show": true,
        "type": "continuous",
        "min": 0,
        "max": 100,
        "inRange": {},
        "calculable": true,
        "inverse": false,
        "splitNumber": 5,
        "hoverLink": true,
        "orient": "vertical",
        "padding": 5,
        "showLabel": true,
        "itemWidth": 20,
        "itemHeight": 140,
        "borderWidth": 0
    }
};
        chart_e58b2c7818cb445890766c7fd8703013.setOption(option_e58b2c7818cb445890766c7fd8703013);
        chart_e58b2c7818cb445890766c7fd8703013.on('click', function (param){
            var selected = param.name;
                if (selected) {
                    switch(selected){
                        case '北京市':
                            location.href = "./北京地圖.html";
                            break;
                        case '天津市':
                            location.href = "./天津地圖.html";
                            break;
                        case '河北省':
                            location.href = "./河北地圖.html";
                            break;
                        default:
                            break;
                    }

            }
      });
    </script>
</body>
</html>


# 北京地圖.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
                <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/echarts.min.js"></script>
            <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/maps/beijing.js"></script>
            <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/themes/vintage.js"></script>

</head>
<body >
    <div id="e3d16d70c65440bc90f1c939f9ab2653" class="chart-container" style="width:1500px; height:800px; "></div>
    <script>
        var chart_e3d16d70c65440bc90f1c939f9ab2653 = echarts.init(
            document.getElementById('e3d16d70c65440bc90f1c939f9ab2653'), 'vintage', {renderer: 'canvas'});
        var option_e3d16d70c65440bc90f1c939f9ab2653 = {
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "aria": {
        "enabled": false
    },
    "series": [
        {
            "type": "map",
            "label": {
                "show": true,
                "margin": 8
            },
            "map": "\u5317\u4eac",
            "data": [
                {
                    "name": "\u8fd0\u6cb3\u533a",
                    "value": 20
                },
                {
                    "name": "\u5e7f\u9633\u533a",
                    "value": 25
                },
                {
                    "name": "\u7ade\u79c0\u533a",
                    "value": 18
                },
                {
                    "name": "\u6cb3\u897f\u533a",
                    "value": 16
                },
                {
                    "name": "\u6cb3\u897f\u533a",
                    "value": 21
                },
                {
                    "name": "\u4e1c\u57ce\u533a",
                    "value": 26
                },
                {
                    "name": "\u7ade\u79c0\u533a",
                    "value": 28
                },
                {
                    "name": "\u6cb3\u897f\u533a",
                    "value": 19
                },
                {
                    "name": "\u4e1b\u53f0\u533a",
                    "value": 32
                },
                {
                    "name": "\u957f\u5b89\u533a",
                    "value": 34
                }
            ],
            "roam": true,
            "aspectScale": 0.75,
            "nameProperty": "name",
            "selectedMode": false,
            "zoom": 1,
            "zlevel": 0,
            "z": 2,
            "seriesLayoutBy": "column",
            "datasetIndex": 0,
            "mapValueCalculation": "sum",
            "showLegendSymbol": true,
            "emphasis": {}
        }
    ],
    "legend": [
        {
            "data": [
                ""
            ],
            "selected": {},
            "show": true,
            "padding": 5,
            "itemGap": 10,
            "itemWidth": 25,
            "itemHeight": 14,
            "backgroundColor": "transparent",
            "borderColor": "#ccc",
            "borderWidth": 1,
            "borderRadius": 0,
            "pageButtonItemGap": 5,
            "pageButtonPosition": "end",
            "pageFormatter": "{current}/{total}",
            "pageIconColor": "#2f4554",
            "pageIconInactiveColor": "#aaa",
            "pageIconSize": 15,
            "animationDurationUpdate": 800,
            "selector": false,
            "selectorPosition": "auto",
            "selectorItemGap": 7,
            "selectorButtonGap": 10
        }
    ],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "showContent": true,
        "alwaysShowContent": false,
        "showDelay": 0,
        "hideDelay": 100,
        "enterable": false,
        "confine": false,
        "appendToBody": false,
        "transitionDuration": 0.4,
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0,
        "padding": 5,
        "order": "seriesAsc"
    },
    "title": [
        {
            "show": true,
            "text": "\u5317\u4eac\u5730\u56fe",
            "target": "blank",
            "subtarget": "blank",
            "padding": 5,
            "itemGap": 10,
            "textAlign": "auto",
            "textVerticalAlign": "auto",
            "triggerEvent": false
        }
    ],
    "visualMap": {
        "show": true,
        "type": "piecewise",
        "min": 1,
        "max": 17,
        "inRange": {
            "color": [
                "#50a3ba",
                "#eac763",
                "#d94e5d"
            ]
        },
        "calculable": true,
        "inverse": false,
        "splitNumber": 5,
        "hoverLink": true,
        "orient": "vertical",
        "padding": 5,
        "showLabel": true,
        "itemWidth": 20,
        "itemHeight": 14,
        "borderWidth": 0
    }
};
        chart_e3d16d70c65440bc90f1c939f9ab2653.setOption(option_e3d16d70c65440bc90f1c939f9ab2653);
        chart_e3d16d70c65440bc90f1c939f9ab2653.on('click', function (param){
            var selected = param.name;
                if (selected) {
                    switch(selected){
                        case '東城區':
                            location.href = "./東城地圖.html";
                            break;
                        default:
                            break;
                    }

            }
      });
    </script>
</body>
</html>


# 天津地圖.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
                <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/echarts.min.js"></script>
            <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/maps/tianjin.js"></script>
            <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/themes/vintage.js"></script>

</head>
<body >
    <div id="64da265d7ba04a1a8d86b732d9b7ccd6" class="chart-container" style="width:1500px; height:800px; "></div>
    <script>
        var chart_64da265d7ba04a1a8d86b732d9b7ccd6 = echarts.init(
            document.getElementById('64da265d7ba04a1a8d86b732d9b7ccd6'), 'vintage', {renderer: 'canvas'});
        var option_64da265d7ba04a1a8d86b732d9b7ccd6 = {
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "aria": {
        "enabled": false
    },
    "series": [
        {
            "type": "map",
            "label": {
                "show": true,
                "margin": 8
            },
            "map": "\u5929\u6d25",
            "data": [
                {
                    "name": "\u8fd0\u6cb3\u533a",
                    "value": 20
                },
                {
                    "name": "\u5e7f\u9633\u533a",
                    "value": 25
                },
                {
                    "name": "\u7ade\u79c0\u533a",
                    "value": 18
                },
                {
                    "name": "\u6cb3\u897f\u533a",
                    "value": 16
                },
                {
                    "name": "\u6cb3\u897f\u533a",
                    "value": 21
                },
                {
                    "name": "\u4e1c\u57ce\u533a",
                    "value": 26
                },
                {
                    "name": "\u7ade\u79c0\u533a",
                    "value": 28
                },
                {
                    "name": "\u6cb3\u897f\u533a",
                    "value": 19
                },
                {
                    "name": "\u4e1b\u53f0\u533a",
                    "value": 32
                },
                {
                    "name": "\u957f\u5b89\u533a",
                    "value": 34
                }
            ],
            "roam": true,
            "aspectScale": 0.75,
            "nameProperty": "name",
            "selectedMode": false,
            "zoom": 1,
            "zlevel": 0,
            "z": 2,
            "seriesLayoutBy": "column",
            "datasetIndex": 0,
            "mapValueCalculation": "sum",
            "showLegendSymbol": true,
            "emphasis": {}
        }
    ],
    "legend": [
        {
            "data": [
                ""
            ],
            "selected": {},
            "show": true,
            "padding": 5,
            "itemGap": 10,
            "itemWidth": 25,
            "itemHeight": 14,
            "backgroundColor": "transparent",
            "borderColor": "#ccc",
            "borderWidth": 1,
            "borderRadius": 0,
            "pageButtonItemGap": 5,
            "pageButtonPosition": "end",
            "pageFormatter": "{current}/{total}",
            "pageIconColor": "#2f4554",
            "pageIconInactiveColor": "#aaa",
            "pageIconSize": 15,
            "animationDurationUpdate": 800,
            "selector": false,
            "selectorPosition": "auto",
            "selectorItemGap": 7,
            "selectorButtonGap": 10
        }
    ],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "showContent": true,
        "alwaysShowContent": false,
        "showDelay": 0,
        "hideDelay": 100,
        "enterable": false,
        "confine": false,
        "appendToBody": false,
        "transitionDuration": 0.4,
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0,
        "padding": 5,
        "order": "seriesAsc"
    },
    "title": [
        {
            "show": true,
            "text": "\u5929\u6d25\u5730\u56fe",
            "target": "blank",
            "subtarget": "blank",
            "padding": 5,
            "itemGap": 10,
            "textAlign": "auto",
            "textVerticalAlign": "auto",
            "triggerEvent": false
        }
    ],
    "visualMap": {
        "show": true,
        "type": "piecewise",
        "min": 1,
        "max": 17,
        "inRange": {
            "color": [
                "#50a3ba",
                "#eac763",
                "#d94e5d"
            ]
        },
        "calculable": true,
        "inverse": false,
        "splitNumber": 5,
        "hoverLink": true,
        "orient": "vertical",
        "padding": 5,
        "showLabel": true,
        "itemWidth": 20,
        "itemHeight": 14,
        "borderWidth": 0
    }
};
        chart_64da265d7ba04a1a8d86b732d9b7ccd6.setOption(option_64da265d7ba04a1a8d86b732d9b7ccd6);
        chart_64da265d7ba04a1a8d86b732d9b7ccd6.on('click', function (param){
            var selected = param.name;
                if (selected) {
                    switch(selected){
                        case '東城區':
                            location.href = "./東城地圖.html";
                            break;
                        default:
                            break;
                    }

            }
      });
    </script>
</body>
</html>


# 河北地圖.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
                <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/echarts.min.js"></script>
            <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/maps/hebei.js"></script>
            <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/themes/vintage.js"></script>

</head>
<body >
    <div id="fd40486b6fa040ea82489fd0c2a9faaa" class="chart-container" style="width:1500px; height:800px; "></div>
    <script>
        var chart_fd40486b6fa040ea82489fd0c2a9faaa = echarts.init(
            document.getElementById('fd40486b6fa040ea82489fd0c2a9faaa'), 'vintage', {renderer: 'canvas'});
        var option_fd40486b6fa040ea82489fd0c2a9faaa = {
    "animation": true,
    "animationThreshold": 2000,
    "animationDuration": 1000,
    "animationEasing": "cubicOut",
    "animationDelay": 0,
    "animationDurationUpdate": 300,
    "animationEasingUpdate": "cubicOut",
    "animationDelayUpdate": 0,
    "aria": {
        "enabled": false
    },
    "series": [
        {
            "type": "map",
            "label": {
                "show": true,
                "margin": 8
            },
            "map": "\u6cb3\u5317",
            "data": [
                {
                    "name": "\u6ca7\u5dde\u5e02",
                    "value": 20
                },
                {
                    "name": "\u5eca\u574a\u5e02",
                    "value": 25
                },
                {
                    "name": "\u4fdd\u5b9a\u5e02",
                    "value": 18
                },
                {
                    "name": "\u5929\u6d25\u5e02",
                    "value": 16
                },
                {
                    "name": "\u5929\u6d25\u5e02",
                    "value": 21
                },
                {
                    "name": "\u5317\u4eac\u5e02",
                    "value": 26
                },
                {
                    "name": "\u4fdd\u5b9a\u5e02",
                    "value": 28
                },
                {
                    "name": "\u5929\u6d25\u5e02",
                    "value": 19
                },
                {
                    "name": "\u90af\u90f8\u5e02",
                    "value": 32
                },
                {
                    "name": "\u77f3\u5bb6\u5e84\u5e02",
                    "value": 34
                }
            ],
            "roam": true,
            "aspectScale": 0.75,
            "nameProperty": "name",
            "selectedMode": false,
            "zoom": 1,
            "zlevel": 0,
            "z": 2,
            "seriesLayoutBy": "column",
            "datasetIndex": 0,
            "mapValueCalculation": "sum",
            "showLegendSymbol": true,
            "emphasis": {}
        }
    ],
    "legend": [
        {
            "data": [
                ""
            ],
            "selected": {},
            "show": true,
            "padding": 5,
            "itemGap": 10,
            "itemWidth": 25,
            "itemHeight": 14,
            "backgroundColor": "transparent",
            "borderColor": "#ccc",
            "borderWidth": 1,
            "borderRadius": 0,
            "pageButtonItemGap": 5,
            "pageButtonPosition": "end",
            "pageFormatter": "{current}/{total}",
            "pageIconColor": "#2f4554",
            "pageIconInactiveColor": "#aaa",
            "pageIconSize": 15,
            "animationDurationUpdate": 800,
            "selector": false,
            "selectorPosition": "auto",
            "selectorItemGap": 7,
            "selectorButtonGap": 10
        }
    ],
    "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
            "type": "line"
        },
        "showContent": true,
        "alwaysShowContent": false,
        "showDelay": 0,
        "hideDelay": 100,
        "enterable": false,
        "confine": false,
        "appendToBody": false,
        "transitionDuration": 0.4,
        "textStyle": {
            "fontSize": 14
        },
        "borderWidth": 0,
        "padding": 5,
        "order": "seriesAsc"
    },
    "title": [
        {
            "show": true,
            "text": "\u6cb3\u5317\u5730\u56fe",
            "target": "blank",
            "subtarget": "blank",
            "padding": 5,
            "itemGap": 10,
            "textAlign": "auto",
            "textVerticalAlign": "auto",
            "triggerEvent": false
        }
    ],
    "visualMap": {
        "show": true,
        "type": "piecewise",
        "min": 1,
        "max": 17,
        "inRange": {
            "color": [
                "#50a3ba",
                "#eac763",
                "#d94e5d"
            ]
        },
        "calculable": true,
        "inverse": false,
        "splitNumber": 5,
        "hoverLink": true,
        "orient": "vertical",
        "padding": 5,
        "showLabel": true,
        "itemWidth": 20,
        "itemHeight": 14,
        "borderWidth": 0
    }
};
        chart_fd40486b6fa040ea82489fd0c2a9faaa.setOption(option_fd40486b6fa040ea82489fd0c2a9faaa);
        chart_fd40486b6fa040ea82489fd0c2a9faaa.on('click', function (param){
            var selected = param.name;
                if (selected) {
                    switch(selected){
                        case '保定市':
                            location.href = "./保定地圖.html";
                            break;
                        case '廊坊市':
                            location.href = "./廊坊地圖.html";
                            break;
                        case '滄州市':
                            location.href = "./滄州地圖.html";
                            break;
                        case '石家莊市':
                            location.href = "./石家莊地圖.html";
                            break;
                        case '邯鄲市':
                            location.href = "./邯鄲地圖.html";
                            break;
                        default:
                            break;
                    }

            }
      });
    </script>
</body>
</html>

效果展示

相關文章