Echarts實作簡單實用的中國疫情地圖

實作步驟：

在浏覽器中打開以下Echarts的官方示例連結： 示例連接配接

這個是示例，已經很類似疫情地圖啦，再進行一點修改就大功告成，在頁面左側框中輸入以下資料進行修改：

option = {
    title: {
        text: '中國疫情圖',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['中國疫情圖']
    },
    visualMap: {
        type: 'piecewise',
        pieces: [
            {min: 1000, max: 1000000, label: '大于等于1000人', color: '#372a28'},
            {min: 500, max: 999, label: '确診500-999人', color: '#4e160f'},
            {min: 100, max: 499, label: '确診100-499人', color: '#974236'},
            {min: 10, max: 99, label: '确診10-99人', color: '#ee7263'},
            {min: 1, max: 9, label: '确診1-9人', color: '#f5bba7'},
        ],
        color: ['#E0022B', '#E09107', '#A3E00B']
    },
    toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    roamController: {
        show: true,
        left: 'right',
        mapTypeControl: {
            'china': true
        }
    },
    series: [
        {
            name: '确診數',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                show: true,
                color: 'rgb(249, 249, 249)'
            },
            data: [
               {
                  name: '北京',
                  value: 212
                }, {
                  name: '天津',
                  value: 60
                }, {
                  name: '上海',
                  value: 208
                }, {
                  name: '重慶',
                  value: 337
                }, {
                  name: '河北',
                  value: 126
                }, {
                  name: '河南',
                  value: 675
                }, {
                  name: '雲南',
                  value: 117
                }, {
                  name: '遼甯',
                  value: 74
                }, {
                  name: '黑龍江',
                  value: 155
                }, {
                  name: '湖南',
                  value: 593
                }, {
                  name: '安徽',
                  value: 480
                }, {
                  name: '山東',
                  value: 270
                }, {
                  name: '新疆',
                  value: 29
                }, {
                  name: '江蘇',
                  value: 308
                }, {
                  name: '浙江',
                  value: 829
                }, {
                  name: '江西',
                  value: 476
                }, {
                  name: '湖北',
                  value: 13522
                }, {
                  name: '廣西',
                  value: 139
                }, {
                  name: '甘肅',
                  value: 55
                }, {
                  name: '山西',
                  value: 74
                }, {
                  name: '内蒙古',
                  value: 34
                }, {
                  name: '陝西',
                  value: 142
                }, {
                  name: '吉林',
                  value: 42
                }, {
                  name: '福建',
                  value: 179
                }, {
                  name: '貴州',
                  value: 56
                }, {
                  name: '廣東',
                  value: 797
                }, {
                  name: '青海',
                  value: 15
                }, {
                  name: '西藏',
                  value: 1
                }, {
                  name: '四川',
                  value: 282
                }, {
                  name: '甯夏',
                  value: 34
                }, {
                  name: '海南',
                  value: 79
                }, {
                  name: '台灣',
                  value: 10
                }, {
                  name: '香港',
                  value: 15
                }, {
                  name: '澳門',
                  value: 9
                }
            ]
        }
    ]
};

           

啦啦啦，完成，看效果：

實作解析

我們使用的Echarts的Example環境，其實已經預設幫我們加載好了中國省份地圖了。我們隻需要設定option參數就好了，下面解釋下option參數的含義：

• title：顯示圖示的标題
• tooltip：展示提示框，當你滑鼠點選某個省份時用來展示對應的确診人數
• legend：圖例，設定圖例展示的位置
• visualMap：視覺映射，每個顔色代表什麼含義
• series：地圖資料可視化，添加data資料

通過這種方式，隻需把上面配置好的資料複制到頁面中，就可以生成中國疫情地圖了。如果以後想展示其他類型的地圖區域資料可視化，例如人口密度等，也可以使用這種方式