Echarts中國地圖與世界地圖實(shí)戰(zhàn) 文章目錄前言一、先上代碼1.中國地圖2.世界地圖二、圖示1.中國地圖2.世界地圖二、Echarts簡介1.介紹2.實(shí)戰(zhàn)流程1.引入echarts.js2.定義一個(gè)圖表容器DIV，定義id=xxx3.初始化echarts對(duì)象并綁定到該容器(xxx)上4.給綁定的echarts容器配置圖表參數(shù)來展示數(shù)據(jù)5.全局生效3.學(xué)習(xí)網(wǎng)址總結(jié)前言

推薦整理分享Echarts中國地圖與世界地圖實(shí)戰(zhàn)(echarts中國地圖代碼)，希望有所幫助，僅作參考，歡迎閱讀內(nèi)容。

文章相關(guān)熱門搜索詞:echarts中國地圖熱力圖,echarts中國地圖酷炫特效,echarts中國地圖下鉆,echarts中國地圖下鉆,echarts中國地圖代碼,echarts中國地圖代碼,echarts中國地圖酷炫特效,echarts中國地圖審圖號(hào),內(nèi)容如對(duì)您有幫助，希望把文章鏈接給更多的朋友！

Echarts中中國地圖與世界地圖實(shí)戰(zhàn)，完整代碼。

一、先上代碼

其中 china.js 與 world.js 兩個(gè)文件已通過CDN的方法給出，而 echarts.js 大家可以自行去官網(wǎng)下載。

1.中國地圖<div id="china" style="height: 500px;"></div><script src="/static/js/echarts.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script><script> // 初始化echarts實(shí)例 var myEcharts = echarts.init(document.getElementById("china")); var option = { title: { //標(biāo)題樣式 text: '中國地圖', x: "center", textStyle: { fontSize: 18, color: "black" }, }, tooltip: { trigger: 'item', formatter: function (params) { console.log(params) if (params.name) { return params.name + ' : ' + (isNaN(params.value) ? 0 : parseInt(params.value)); } } }, visualMap: {//視覺映射組件 top: 'bottom', left: 'left', min: 10, max: 500000, //text: ['High', 'Low'], realtime: false, //拖拽時(shí)，是否實(shí)時(shí)更新 calculable: true, //是否顯示拖拽用的手柄 inRange: { color: ['lightskyblue', 'yellow', 'orangered'] } }, series: [ { name: '模擬數(shù)據(jù)', type: 'map', mapType: 'china', roam: false,//是否開啟鼠標(biāo)縮放和平移漫游 itemStyle: {//地圖區(qū)域的多邊形 圖形樣式 normal: {//是圖形在默認(rèn)狀態(tài)下的樣式 label: { show: true,//是否顯示標(biāo)簽 textStyle: { color: "black" } } }, zoom: 1.5, //地圖縮放比例,默認(rèn)為1 emphasis: {//是圖形在高亮狀態(tài)下的樣式,比如在鼠標(biāo)懸浮或者圖例聯(lián)動(dòng)高亮?xí)r label: {show: true} } }, top: "3%",//組件距離容器的距離 data: [ {name: '北京', value: 350000}, {name: '天津', value: 120000}, {name: '上海', value: 300000}, {name: '重慶', value: 92000}, {name: '河北', value: 25000}, {name: '河南', value: 20000}, {name: '云南', value: 500}, {name: '遼寧', value: 3050}, {name: '黑龍江', value: 80000}, {name: '湖南', value: 2000}, {name: '安徽', value: 24580}, {name: '山東', value: 40629}, {name: '新疆', value: 36981}, {name: '江蘇', value: 13569}, {name: '浙江', value: 24956}, {name: '江西', value: 15194}, {name: '湖北', value: 41398}, {name: '廣西', value: 41150}, {name: '甘肅', value: 17630}, {name: '山西', value: 27370}, {name: '內(nèi)蒙古', value: 27370}, {name: '陜西', value: 97208}, {name: '吉林', value: 88290}, {name: '福建', value: 19978}, {name: '貴州', value: 94485}, {name: '廣東', value: 89426}, {name: '青海', value: 35484}, {name: '西藏', value: 97413}, {name: '四川', value: 54161}, {name: '寧夏', value: 56515}, {name: '海南', value: 54871}, {name: '臺(tái)灣', value: 48544}, {name: '香港', value: 49474}, {name: '澳門', value: 34594} ] } ] }; // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。 myEcharts.setOption(option); </script>2.世界地圖<div id="world" style="height: 500px"></div><script src="/static/js/echarts.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script> <script> var myChart = echarts.init(document.getElementById('world')); let nameMap = { Afghanistan: '阿富汗', Singapore: '新加坡', Angola: '安哥拉', Albania: '阿爾巴尼亞', 'United Arab Emirates': '阿聯(lián)酋', Argentina: '阿根廷', Armenia: '亞美尼亞', 'French Southern and Antarctic Lands': '法屬南半球和南極領(lǐng)地', Australia: '澳大利亞', Austria: '奧地利', Azerbaijan: '阿塞拜疆', Burundi: '布隆迪', Belgium: '比利時(shí)', 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': '哥斯達(dá)黎加', Cuba: '古巴', 'Northern Cyprus': '北塞浦路斯', Cyprus: '塞浦路斯', 'Czech Republic': '捷克共和國', Germany: '德國', Djibouti: '吉布提', Denmark: '丹麥', 'Dominican Republic': '多明尼加共和國', Algeria: '阿爾及利亞', Ecuador: '厄瓜多爾', Egypt: '埃及', Eritrea: '厄立特里亞', Spain: '西班牙', Estonia: '愛沙尼亞', Ethiopia: '埃塞俄比亞', Finland: '芬蘭', Fiji: '斐', 'Falkland Islands': '?？颂m群島', France: '法國', Gabon: '加蓬', 'United Kingdom': '英國', Georgia: '格魯吉亞', Ghana: '加納', Guinea: '幾內(nèi)亞', Gambia: '岡比亞', 'Guinea Bissau': '幾內(nèi)亞比紹', 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: '柬埔寨', Kosovo: '科索沃', Kuwait: '科威特', Laos: '老撾', Lebanon: '黎巴嫩', Liberia: '利比里亞', Libya: '利比亞', 'Sri Lanka': '斯里蘭卡', Lesotho: '萊索托', Lithuania: '立陶宛', Luxembourg: '盧森堡', Latvia: '拉脫維亞', Morocco: '摩洛哥', Moldova: '摩爾多瓦', Madagascar: '馬達(dá)加斯加', 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': '巴布亞新幾內(nèi)亞', Poland: '波蘭', 'Puerto Rico': '波多黎各', 'North Korea': '北朝鮮', Portugal: '葡萄牙', Paraguay: '巴拉圭', Qatar: '卡塔爾', Romania: '羅馬尼亞', Russia: '俄羅斯', Rwanda: '盧旺達(dá)', 'Western Sahara': '西撒哈拉', 'Saudi Arabia': '沙特阿拉伯', Sudan: '蘇丹', 'South Sudan': '南蘇丹', Senegal: '塞內(nèi)加爾', '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': '特里尼達(dá)和多巴哥', Tunisia: '突尼斯', Turkey: '土耳其', 'United Republic of Tanzania': '坦桑尼亞', Uganda: '烏干達(dá)', Ukraine: '烏克蘭', Uruguay: '烏拉圭', 'United States': '美國', Uzbekistan: '烏茲別克斯坦', Venezuela: '委內(nèi)瑞拉', Vietnam: '越南', Vanuatu: '瓦努阿圖', 'West Bank': '西岸', Yemen: '也門', 'South Africa': '南非', Zambia: '贊比亞', Korea: '韓國', Tanzania: '坦桑尼亞', Zimbabwe: '津巴布韋', Congo: '剛果', 'Central African Rep.': '中非', Serbia: '塞爾維亞', 'Bosnia and Herz.': '波黑', 'Czech Rep.': '捷克', 'W. Sahara': '西撒哈拉', 'Lao PDR': '老撾', 'Dem.Rep.Korea': '朝鮮', 'Falkland Is.': '福克蘭群島', 'Timor-Leste': '東帝汶', 'Solomon Is.': '所羅門群島', Palestine: '巴勒斯坦', 'N. Cyprus': '北塞浦路斯', Aland: '奧蘭群島', 'Fr. S. Antarctic Lands': '法屬南半球和南極陸地', Mauritius: '毛里求斯', Comoros: '科摩羅', 'Eq. Guinea': '赤道幾內(nèi)亞', 'Guinea-Bissau': '幾內(nèi)亞比紹', 'Dominican Rep.': '多米尼加', 'Saint Lucia': '圣盧西亞', Dominica: '多米尼克', 'Antigua and Barb.': '安提瓜和巴布達(dá)', 'U.S. Virgin Is.': '美國原始島嶼', Montserrat: '蒙塞拉特', Grenada: '格林納達(dá)', Barbados: '巴巴多斯', Samoa: '薩摩亞', Bahamas: '巴哈馬', 'Cayman Is.': '開曼群島', 'Faeroe Is.': '法羅群島', 'IsIe of Man': '馬恩島', Malta: '馬耳他共和國', Jersey: '澤西', 'Cape Verde': '佛得角共和國', 'Turks and Caicos Is.': '特克斯和凱科斯群島', 'St. Vin. and Gren.': '圣文森特和格林納丁斯' } option = { // 圖表主標(biāo)題 title: { text: '世界地圖', // 主標(biāo)題文本，支持使用 \n 換行 //top: 20, // 定位 值: 'top', 'middle', 'bottom' 也可以是具體的值或者百分比 left: 'center', // 值: 'left', 'center', 'right' 同上 textStyle: { // 文本樣式 fontSize: 18, fontWeight: 600, color: 'black' } }, tooltip: { trigger: 'item', formatter: function (params) { console.log(params) if (params.name) { return params.name + ' : ' + (isNaN(params.value) ? 0 : parseInt(params.value)); } } }, // 視覺映射組件 visualMap: { type: 'continuous', // continuous 類型為連續(xù)型 piecewise 類型為分段型 show: true, // 是否顯示 visualMap-continuous 組件 如果設(shè)置為 false，不會(huì)顯示，但是數(shù)據(jù)映射的功能還存在 // 指定 visualMapContinuous 組件的允許的最小/大值。'min'/'max' 必須用戶指定。 // [visualMap.min, visualMax.max] 形成了視覺映射的『定義域』 // 文本樣式 textStyle: { fontSize: 14, color: '#fff' }, realtime: false, // 拖拽時(shí)，是否實(shí)時(shí)更新 calculable: true, // 是否顯示拖拽用的手柄 // 定義 在選中范圍中 的視覺元素 inRange: { color: ['#9fb5ea', '#e6ac53', '#74e2ca', '#85daef', '#9feaa5', '#5475f5'] // 圖元的顏色 } }, series: [ { name: 'World Population (2010)', type: 'map', mapType: 'world', roam: true, itemStyle: { areaColor: '#7B68EE', // 地圖區(qū)域的顏色 如果設(shè)置了visualMap，areaColor屬性將不起作用 borderWidth: 0.5, // 描邊線寬 為 0 時(shí)無描邊 borderColor: '#000', // 圖形的描邊顏色 支持的顏色格式同 color，不支持回調(diào)函數(shù) borderType: 'solid', // 描邊類型，默認(rèn)為實(shí)線，支持 'solid', 'dashed', 'dotted' emphasis: {label: {show: true}} }, label: { show: false // 是否顯示對(duì)應(yīng)地名 }, data: [ {name: '薩摩亞', value: 28397}, {name: '烏克蘭', value: 19549.124}, {name: '越南', value: 3150.143}, {name: '新西蘭', value: 8441.537}, {name: '墨西哥', value: 40374.224}, {name: '美國', value: 2963.496}, {name: '巴拿馬', value: 268.065}, {name: '澳大利亞', value: 22404.488}, ], nameMap: nameMap } ] }; myChart.setOption(option); </script>二、圖示1.中國地圖

2.世界地圖

二、Echarts簡介1.介紹

echarts.js是百度團(tuán)隊(duì)推出的一款用于圖表可視化的插件，用于以圖表的形式展現(xiàn)數(shù)據(jù)，功能強(qiáng)大，上手簡單。 版本區(qū)別：

1.完全版：echarts/dist/echarts.js，體積最大，包含所有的圖表和組件。 2.常用版：echarts/dist/echarts.common.js，體積適中，包含常見的圖表和組件。 3.精簡版：echarts/dist/echarts.simple.js，體積較小，僅包含最常用的圖表和組件。

2.實(shí)戰(zhàn)流程1.引入echarts.js<script src="/static/js/echarts.js"></script>2.定義一個(gè)圖表容器DIV，定義id=xxx<div id="xxx" style="height: 500px;"></div>3.初始化echarts對(duì)象并綁定到該容器(xxx)上 var myChart = echarts.init(document.getElementById('xxx'));4.給綁定的echarts容器配置圖表參數(shù)來展示數(shù)據(jù)data:[ {name: 'aaa', value: 111}, {name: 'bbb', value: 222}, {name: 'ccc', value: 333}, {name: 'ddd', value: 444}, {name: 'ddd', value: 555}, {name: 'eee', value: 666},],5.全局生效myChart.setOption(option);

ps：此處展示的均為靜態(tài)數(shù)據(jù)，如需動(dòng)態(tài)數(shù)據(jù)需連接后端數(shù)據(jù)庫，采用ajax技術(shù)與后臺(tái)交互數(shù)據(jù)。

3.學(xué)習(xí)網(wǎng)址

1.ECharts 菜鳥教程：https://www.runoob.com/echarts/echarts-tutorial.html 2.Echarts官方示例：https://echarts.apache.org/examples/zh/index.html 3.樣子2018師傅的漢化地圖：https://www.cnblogs.com/yang-2018/p/13812892.html 4.氵易風(fēng)灬師傅的地圖介紹：https://blog.csdn.net/qq_21963133/article/details/80012899

總結(jié)

首先感謝上文中提到的各位師傅的博文，給了我許多啟發(fā)。第一次接觸Echarts圖表可視化，還是比較有意思的。在這邊記錄一下。加油！ 2022年4月5日于家中