per java out borde UNC reac nta 黑龍江 unit

首先先附上官網 http://echarts.baidu.com/option.html#series-line.label 以及密度表對應geo配置文檔 http://echarts.baidu.com/option.html#geo

以下僅是個人在開發中逐步摸索出來的。demo目前沒出問題。如果有錯誤地方請留言指出 （若轉載請標註出處）

直接上效果圖，對應代碼在效果圖下面

安裝：

1. npm install echarts --save
2. npm install --save @types/echarts
3. import * as echarts from ‘echarts‘（在所需要用到的組件中TS引入，也可以在main.ts裏面引入
 
）

1. 因為typescript的限制原因，在引入的時候校對以上步驟。然後在需要用到的組件中ts文件引入對應的地圖js

例如：

import ‘../../../node_modules/echarts/map/js/world.js‘　// 引入世界地圖數據 import ‘../../../node_modules/echarts/map/js/china.js‘ // 引入中國地圖數據 2. 在vue文件中先寫好一個div用來包裹ECarts 就是id為allChart(世界地圖)和provinceChart(中國地圖)這兩個容器。為後面js操作DOM做鋪墊 P.S記得給這兩個容器寬高才能顯示地圖哦~

        <div class="table-line">
            <div class="table-title">全球地域分布數據折線表</div>
            <div id="allChart" class="charts"></div>
        </div>
        <div class="table-line">
            <div class="table-title">國內地域分布數據折線表</div>
            <div id="provinceChart" class="charts"></div>
        </div>

3. 接下來通過function將數據轉入（這裏只舉例世界地圖的相關數據配置） P.S 在這裏面放入data數據記得格式跟ECharts相符，即對應的省份名稱例如廣東，上海，北京。黑龍江等。後面跟著對應的value值（number格式）

 chinaConfigure() {
        let myChart = echarts.init(document.getElementById(‘provinceChart‘)) //這裏是為了獲得容器所在位置
        myChart.setOption({ // 進行相關配置
            tooltip: {}, // 鼠標移到圖裏面的浮動提示框
            visualMap: { //左側小柱子的配置
                min: 0, // 最小值
                max:15000, //最大值
                left: ‘left‘, // 定位左邊
                top: ‘bottom‘, // 定位底部
                text: [‘高‘, ‘低‘], // 上下兩個文字
                seriesIndex: [1],
                inRange: {
                    color: [‘#e0ffff‘, ‘#006edd‘] // 深淺顏色
                },
                calculable: true // 顯示與否
            },
            geo: { // 這個是重點配置區
                map: ‘china‘, // 表示中國地圖
                roam: true, 
                label: {
                    normal: {
                        show: true, // 是否顯示對應地名
                        textStyle: {
                            color: ‘rgba(0,0,0,0.4)‘
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        borderColor: ‘rgba(0, 0, 0, 0.2)‘
                    },
                    emphasis: {
                        areaColor: null,
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 20,
                        borderWidth: 0,
                        shadowColor: ‘rgba(0, 0, 0, 0.5)‘
                    }
                }
            },
            series: [
                {
                    type: ‘scatter‘,
                    coordinateSystem: ‘geo‘ // 對應上方配置
                },
                {
                    name: ‘啟動次數‘, // 浮動框的標題
                    type: ‘map‘, 
                    geoIndex: 0,
                    data: [
                      {name:‘廣東‘, value: 1324}
                       ]// 這裏就是數據，即數組可以單獨放在外面也可以直接寫
                }
            ]
        })
    }        

　　以上數據data填寫完後即可看到對應的效果了。如果是後端數據返回的時候省份沒有對應的格式，則需要自己遍歷然後slice截取前兩個字。但黑龍江和內蒙古要額外處理。

　　說完中國地圖相信世界地圖也不是難事。但要註意的是。ECharts裏面提供的世界地圖js是英文版的國家名稱。在開發中難免會遇到數據返回的事中文國家名。所以這時候要在配置世界地圖的時候加入nameMap更改對應的字段。

如下：

worldConfigure() {
        let myChart = echarts.init(document.getElementById(‘allChart‘))
        myChart.setOption({
            tooltip: {},
            visualMap: {
                min: 0,
                max: this.maxValue,
                left: ‘left‘,
                top: ‘bottom‘,
                text: [‘高‘, ‘低‘],
                seriesIndex: [1],
                inRange: {
                    color: [‘#e0ffff‘, ‘#006edd‘]
                },
                calculable: true
            },
            geo: {
                map: ‘world‘,
                roam: true,
                label: {
                    normal: {
                        // show: true,
                        textStyle: {
                            color: ‘rgba(0,0,0,0.4)‘
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        borderColor: ‘rgba(0, 0, 0, 0.2)‘
                    },
                    emphasis: {
                        areaColor: null,
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 20,
                        borderWidth: 0,
                        shadowColor: ‘rgba(0, 0, 0, 0.5)‘
                    }
                },
                nameMap: {
                    Afghanistan: ‘阿富汗‘,
                    Singapore: ‘新加坡‘,
                    Angola: ‘安哥拉‘,
                    Albania: ‘阿爾巴尼亞‘,
                    ‘United Arab Emirates‘: ‘阿聯酋‘,
                    Argentina: ‘阿根廷‘,
                    Armenia: ‘亞美尼亞‘,
                    ‘French Southern and Antarctic Lands‘:
                        ‘法屬南半球和南極領地‘,
                    Australia: ‘澳大利亞‘,
                    Austria: ‘奧地利‘,
                    Azerbaijan: ‘阿塞拜疆‘,
                    Burundi: ‘布隆迪‘,
                    Belgium: ‘比利時‘,
                    Benin: ‘貝寧‘,
                    ‘Burkina Faso‘: ‘布基納法索‘,
                    Bangladesh: ‘孟加拉國‘,
                    Bulgaria: ‘保加利亞‘,
                    ‘The Bahamas‘: ‘巴哈馬‘,
                    ‘Bosnia and Herzegovina‘: ‘波斯尼亞和黑塞哥維那‘,
                    Belarus: ‘白俄羅斯‘,
                    Belize: ‘伯利茲‘,
                    Bermuda: ‘百慕大‘,
                    Bolivia: ‘玻利維亞‘,
                    Brazil: ‘巴西‘,
                    Brunei: ‘文萊‘,
                    Bhutan: ‘不丹‘,
                    Botswana: ‘博茨瓦納‘,
                    ‘Central African Republic‘: ‘中非共和國‘,
                    Canada: ‘加拿大‘,
                    Switzerland: ‘瑞士‘,
                    Chile: ‘智利‘,
                    China: ‘中國‘,
                    ‘Ivory Coast‘: ‘象牙海岸‘,
                    Cameroon: ‘喀麥隆‘,
                    ‘Democratic Republic of the Congo‘: ‘剛果民主共和國‘,
                    ‘Republic of the Congo‘: ‘剛果共和國‘,
                    Colombia: ‘哥倫比亞‘,
                    ‘Costa Rica‘: ‘哥斯達黎加‘,
                    Cuba: ‘古巴‘,
                    ‘Northern Cyprus‘: ‘北塞浦路斯‘,
                    Cyprus: ‘塞浦路斯‘,
                    ‘Czech Republic‘: ‘捷克共和國‘,
                    Germany: ‘德國‘,
                    Djibouti: ‘吉布提‘,
                    Denmark: ‘丹麥‘,
                    ‘Dominican Republic‘: ‘多明尼加共和國‘,
                    Algeria: ‘阿爾及利亞‘,
                    Ecuador: ‘厄瓜多爾‘,
                    Egypt: ‘埃及‘,
                    Eritrea: ‘厄立特裏亞‘,
                    Spain: ‘西班牙‘,
                    Estonia: ‘愛沙尼亞‘,
                    Ethiopia: ‘埃塞俄比亞‘,
                    Finland: ‘芬蘭‘,
                    Fiji: ‘斐‘,
                    ‘Falkland Islands‘: ‘福克蘭群島‘,
                    France: ‘法國‘,
                    Gabon: ‘加蓬‘,
                    ‘United Kingdom‘: ‘英國‘,
                    Georgia: ‘格魯吉亞‘,
                    Ghana: ‘加納‘,
                    Guinea: ‘幾內亞‘,
                    Gambia: ‘岡比亞‘,
                    ‘Guinea Bissau‘: ‘幾內亞比紹‘,
                    ‘Equatorial Guinea‘: ‘赤道幾內亞‘,
                    Greece: ‘希臘‘,
                    Greenland: ‘格陵蘭‘,
                    Guatemala: ‘危地馬拉‘,
                    ‘French Guiana‘: ‘法屬圭亞那‘,
                    Guyana: ‘圭亞那‘,
                    Honduras: ‘洪都拉斯‘,
                    Croatia: ‘克羅地亞‘,
                    Haiti: ‘海地‘,
                    Hungary: ‘匈牙利‘,
                    Indonesia: ‘印尼‘,
                    India: ‘印度‘,
                    Ireland: ‘愛爾蘭‘,
                    Iran: ‘伊朗‘,
                    Iraq: ‘伊拉克‘,
                    Iceland: ‘冰島‘,
                    Israel: ‘以色列‘,
                    Italy: ‘意大利‘,
                    Jamaica: ‘牙買加‘,
                    Jordan: ‘約旦‘,
                    Japan: ‘日本‘,
                    Kazakhstan: ‘哈薩克斯坦‘,
                    Kenya: ‘肯尼亞‘,
                    Kyrgyzstan: ‘吉爾吉斯斯坦‘,
                    Cambodia: ‘柬埔寨‘,
                    ‘South Korea‘: ‘韓國‘,
                    Kosovo: ‘科索沃‘,
                    Kuwait: ‘科威特‘,
                    Laos: ‘老撾‘,
                    Lebanon: ‘黎巴嫩‘,
                    Liberia: ‘利比裏亞‘,
                    Libya: ‘利比亞‘,
                    ‘Sri Lanka‘: ‘斯裏蘭卡‘,
                    Lesotho: ‘萊索托‘,
                    Lithuania: ‘立陶宛‘,
                    Luxembourg: ‘盧森堡‘,
                    Latvia: ‘拉脫維亞‘,
                    Morocco: ‘摩洛哥‘,
                    Moldova: ‘摩爾多瓦‘,
                    Madagascar: ‘馬達加斯加‘,
                    Mexico: ‘墨西哥‘,
                    Macedonia: ‘馬其頓‘,
                    Mali: ‘馬裏‘,
                    Myanmar: ‘緬甸‘,
                    Montenegro: ‘黑山‘,
                    Mongolia: ‘蒙古‘,
                    Mozambique: ‘莫桑比克‘,
                    Mauritania: ‘毛裏塔尼亞‘,
                    Malawi: ‘馬拉維‘,
                    Malaysia: ‘馬來西亞‘,
                    Namibia: ‘納米比亞‘,
                    ‘New Caledonia‘: ‘新喀裏多尼亞‘,
                    Niger: ‘尼日爾‘,
                    Nigeria: ‘尼日利亞‘,
                    Nicaragua: ‘尼加拉瓜‘,
                    Netherlands: ‘荷蘭‘,
                    Norway: ‘挪威‘,
                    Nepal: ‘尼泊爾‘,
                    ‘New Zealand‘: ‘新西蘭‘,
                    Oman: ‘阿曼‘,
                    Pakistan: ‘巴基斯坦‘,
                    Panama: ‘巴拿馬‘,
                    Peru: ‘秘魯‘,
                    Philippines: ‘菲律賓‘,
                    ‘Papua New Guinea‘: ‘巴布亞新幾內亞‘,
                    Poland: ‘波蘭‘,
                    ‘Puerto Rico‘: ‘波多黎各‘,
                    ‘North Korea‘: ‘北朝鮮‘,
                    Portugal: ‘葡萄牙‘,
                    Paraguay: ‘巴拉圭‘,
                    Qatar: ‘卡塔爾‘,
                    Romania: ‘羅馬尼亞‘,
                    Russia: ‘俄羅斯‘,
                    Rwanda: ‘盧旺達‘,
                    ‘Western Sahara‘: ‘西撒哈拉‘,
                    ‘Saudi Arabia‘: ‘沙特阿拉伯‘,
                    Sudan: ‘蘇丹‘,
                    ‘South Sudan‘: ‘南蘇丹‘,
                    Senegal: ‘塞內加爾‘,
                    ‘Solomon Islands‘: ‘所羅門群島‘,
                    ‘Sierra Leone‘: ‘塞拉利昂‘,
                    ‘El Salvador‘: ‘薩爾瓦多‘,
                    Somaliland: ‘索馬裏蘭‘,
                    Somalia: ‘索馬裏‘,
                    ‘Republic of Serbia‘: ‘塞爾維亞‘,
                    Suriname: ‘蘇裏南‘,
                    Slovakia: ‘斯洛伐克‘,
                    Slovenia: ‘斯洛文尼亞‘,
                    Sweden: ‘瑞典‘,
                    Swaziland: ‘斯威士蘭‘,
                    Syria: ‘敘利亞‘,
                    Chad: ‘乍得‘,
                    Togo: ‘多哥‘,
                    Thailand: ‘泰國‘,
                    Tajikistan: ‘塔吉克斯坦‘,
                    Turkmenistan: ‘土庫曼斯坦‘,
                    ‘East Timor‘: ‘東帝汶‘,
                    ‘Trinidad and Tobago‘: ‘特裏尼達和多巴哥‘,
                    Tunisia: ‘突尼斯‘,
                    Turkey: ‘土耳其‘,
                    ‘United Republic of Tanzania‘: ‘坦桑尼亞‘,
                    Uganda: ‘烏幹達‘,
                    Ukraine: ‘烏克蘭‘,
                    Uruguay: ‘烏拉圭‘,
                    ‘United States‘: ‘美國‘,
                    Uzbekistan: ‘烏茲別克斯坦‘,
                    Venezuela: ‘委內瑞拉‘,
                    Vietnam: ‘越南‘,
                    Vanuatu: ‘瓦努阿圖‘,
                    ‘West Bank‘: ‘西岸‘,
                    Yemen: ‘也門‘,
                    ‘South Africa‘: ‘南非‘,
                    Zambia: ‘贊比亞‘,
                    Zimbabwe: ‘津巴布韋‘
                }
            },
            series: [
                {
                    type: ‘scatter‘,
                    coordinateSystem: ‘geo‘
                },
                {
                    name: ‘啟動次數‘,
                    type: ‘map‘,
                    geoIndex: 0,
                    data: this.worldData
                }
            ]
        })
    }

　　需要的朋友可以直接復制這裏的nameMap到自己的js文件對應位置中。裏面只有一百多個常用國家的對應更改。有些還是英文的國家名需要朋友自己對照ECharts裏面地圖顯示的英文，再翻譯成中文添加在nameMap中即可。

基於VUE+TS中引用ECharts的中國地圖和世界地圖密度表