疫情大屏優化-ECharts 地圖下鑽功能實現

最近在網絡上看到了不少地圖下鑽的文章，感受都很不錯，正好本身也在研究這部分知識，就想着把下鑽這個功能結合到疫情大屏中來，這樣就可以更好的展現不一樣省份的疫情信息了。廢話很少說，直接來乾貨！

下鑽功能思路

我這裏仍是使用 ECharts 來處理，有一個 API 是 registerMap，能夠用來生成地圖。它有兩個比較重要的參數，mapName 和 geoJson。

mapName 顧名思義，就是該註冊地圖的名稱。
而對於 geoJson 呢，須要是 GeoJson 格式的數據，具體格式能夠參見 http://geojson.org/。說白了就是包含了經緯度信息和地理名稱的 json 數據，這種數據不少網站都有提供，我選取了以下的網站獲取

https://data.jianshukeji.com/geochina/tianjin.json

能夠看出，只要替換 json 名稱，如：tianjin，就能夠獲取到天津對應的 geojson 數據。

下面就是正常的繪製地圖了，只須要注意把 mapType 設置爲前面註冊的地圖名稱便可。

後臺數據準備

因爲如今要展現各個市級別的數據，那麼咱們就須要從新準備下後臺的數據接口，把各省的地級市信息撈取出來，注意對於直轄市須要特殊處理

def get_chart_city_map_data():
    city_map_dict = {}
    map_data = json.loads(rd.get('trend'))
    city_data = map_data['data']['areaTree'][0]
    special = ['北京', '天津', '上海', '重慶', '香港', '澳門']
    for data in city_data['children']:
        city_list = []
        if data['name'] in special:
            for inner_data in data['children']:
                if '區' in inner_data['name']:
                    city_list.append({'name': inner_data['name'], 'value': inner_data['total']['confirm']})
                else:
                    city_list.append({'name': inner_data['name'] + '區', 'value': inner_data['total']['confirm']})
        else:
            for inner_data in data['children']:
                city_list.append({'name': inner_data['name'], 'value': inner_data['total']['confirm']})
        city_map_dict[data['name']] = city_list
    return city_map_dict
複製代碼

而後統一到一個接口中返回

@app.route('/get_map_data')
def get_map_data():
    map_data = get_chart_map_data()
    city_data = get_chart_city_map_data()
    return jsonify({'country': map_data, 'city': city_data})
複製代碼

前端功能實現

下面咱們來根據思路編寫前端代碼，首先在中國地圖上設置點擊事件，更加當前點擊的省份信息來請求 geojson 數據並註冊地圖。

mapChart.on('click', function (params) {//點擊事件
                if (params.name in provinces) {
                    $.getJSON('https://data.jianshukeji.com/geochina/' + provinces[params.name] + '.json', function (jsondata) {
                        echarts.registerMap(params.name, jsondata);
                        var d = [];
                        for (var i = 0; i < jsondata.features.length; i++) {
                            d.push({
                              name: jsondata.features[i].properties.name
                              })
                          }
                            renderMap(params.name, data)
                    })
                }
            })
複製代碼

接下來就是 renderMap 函數，其實就是正常的繪製地圖代碼

function renderMap (map, data) {
            // 初始化繪製省市地圖配置
            var cityMapContainer = document.getElementById('map_1');
            var myMapChart = echarts.init(cityMapContainer);
            option.title = {
                text: map + '疫情地圖',
                subtext: '點擊標題返回全國地圖',
                triggerEvent: true
            };
            option.tooltip = {
                    trigger: 'item'
                };
            option.visualMap = {
                min: 0,
                max: 1500,
                show: false,
                left: 'right',
                top: 'bottom',
                text: ['高', '低'], // 文本，默認爲數值文本
                calculable: true,
                textStyle: {
                    color: '#fff'
                }
            };
            option.series = [
              {
                name: '確診人數',
                type: 'map',
                mapType: map,
                roam: false,
                data: data['city'][map],
                label: {
                    show: true,
                    emphasis: {//對應的鼠標懸浮效果
                        show: false,
                        textStyle:{color:"#800080"}
                    }
                },
                itemStyle: {
                    normal: {
                        borderWidth: .5,//區域邊框寬度
                        borderColor: '#002097',//區域邊框顏色
                        areaColor:"#4c60ff",//區域顏色
                    },
                    emphasis: {
                        borderWidth: .5,
                        borderColor: '#4b0082',
                        areaColor:"#ffdead",
                    }
                }
              }
            ];
            // 渲染地圖
            myMapChart.setOption(option);
            myMapChart.on('click', function (params) {
                if (params.componentType == 'title') {
                    mymap(local_var)
                }
            })
        }
複製代碼

這裏又作了一個判斷，若是用戶點擊標題，則會調用建立中國地圖的函數，以此來達到返回全國地圖的效果！

最後咱們來看下效果圖，因爲從 geojson 拿到的數據和從網上接口拿到的地級市名稱不盡相同，因此有一些地級市的數據沒法顯示，暫時尚未很好的解決辦法，無奈！