前言

Echarts中中国地图与世界地图实战    
    
    
，完整代码    
    
    
。

一    
    
    
、先上代码

其中 china.js 与 world.js 两个文件已通过CDN的方法给出  


     


     


   ，而 echarts.js 大家可以自行去官网下载  


     


     


   。

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实例 var myEcharts = echarts.init(document.getElementById("china")); var option = { title: { //标题样式 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, //拖拽时


 




 




 

，是否实时更新 calculable: true, //是否显示拖拽用的手柄 inRange: { color: [lightskyblue, yellow, orangered] } }, series: [ { name: 模拟数据, type: map, mapType: china, roam: false,//是否开启鼠标缩放和平移漫游 itemStyle: {//地图区域的多边形 图形样式 normal: {//是图形在默认状态下的样式 label: { show: true,//是否显示标签 textStyle: { color: "black" } } }, zoom: 1.5, //地图缩放比例,默认为1 emphasis: {//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时 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: 内蒙古, 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: 台湾, value: 48544}, {name: 香港, value: 49474}, {name: 澳门, value: 34594} ] } ] }; // 使用刚指定的配置项和数据显示图表


 




 




 

。 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: 阿联酋, 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: 几内亚比绍, 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: 马达加斯加, 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: 赞比亚, 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: 赤道几内亚, Guinea-Bissau: 几内亚比绍, Dominican Rep.: 多米尼加, Saint Lucia: 圣卢西亚, Dominica: 多米尼克, Antigua and Barb.: 安提瓜和巴布达, U.S. Virgin Is.: 美国原始岛屿, Montserrat: 蒙塞拉特, Grenada: 格林纳达, Barbados: 巴巴多斯, Samoa: 萨摩亚, Bahamas: 巴哈马, Cayman Is.: 开曼群岛, Faeroe Is.: 法罗群岛, IsIe of Man: 马恩岛, Malta: 马耳他共和国, Jersey: 泽西, Cape Verde: 佛得角共和国, Turks and Caicos Is.: 特克斯和凯科斯群岛, St. Vin. and Gren.: 圣文森特和格林纳丁斯 } option = { // 图表主标题 title: { text: 世界地图, // 主标题文本   

   

   

，支持使用 \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 类型为连续型 piecewise 类型为分段型 show: true, // 是否显示 visualMap-continuous 组件 如果设置为 false   

     

     

  ，不会显示



  




  




  
，但是数据映射的功能还存在 // 指定 visualMapContinuous 组件的允许的最小/大值   

   

   

。min/max 必须用户指定   

     

     

  。 // [visualMap.min, visualMax.max] 形成了视觉映射的『定义域』 // 文本样式 textStyle: { fontSize: 14, color: #fff }, realtime: false, // 拖拽时  


  


  


，是否实时更新 calculable: true, // 是否显示拖拽用的手柄 // 定义 在选中范围中 的视觉元素 inRange: { color: [#9fb5ea, #e6ac53, #74e2ca, #85daef, #9feaa5, #5475f5] // 图元的颜色 } }, series: [ { name: World Population (2010), type: map, mapType: world, roam: true, itemStyle: { areaColor: #7B68EE, // 地图区域的颜色 如果设置了visualMap    
     
     
 ，areaColor属性将不起作用 borderWidth: 0.5, // 描边线宽 为 0 时无描边 borderColor: #000, // 图形的描边颜色 支持的颜色格式同 color




   




   




   ，不支持回调函数 borderType: solid, // 描边类型 



 



 



，默认为实线               ，支持 solid, dashed, dotted emphasis: {label: {show: true}} }, label: { show: false // 是否显示对应地名 }, 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是百度团队推出的一款用于图表可视化的插件




    




    




    ，用于以图表的形式展现数据














，功能强大               ，上手简单



  




  




  
。

版本区别：

1.完全版：echarts/dist/echarts.js 



     



     



    ，体积最大














，包含所有的图表和组件  


  


  


。

2.常用版：echarts/dist/echarts.common.js    
    
    
，体积适中  


     


     


   ，包含常见的图表和组件    
     
     
 。

3.精简版：echarts/dist/echarts.simple.js


 




 




 

，体积较小   

   

   

，仅包含最常用的图表和组件




   




   




   。

2.实战流程

1.引入echarts.js

<script src="/static/js/echarts.js"></script>

2.定义一个图表容器DIV   

     

     

  ，定义id=xxx

<div id="xxx" style="height: 500px;"></div>

3.初始化echarts对象并绑定到该容器(xxx)上

var myChart = echarts.init(document.getElementById(xxx));

4.给绑定的echarts容器配置图表参数来展示数据

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：此处展示的均为静态数据



  




  




  
，如需动态数据需连接后端数据库  


  


  


，采用ajax技术与后台交互数据 



 



 



。

3.学习网址

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.氵易风灬师傅的地图介绍：https://blog.csdn.net/qq_21963133/article/details/80012899

总结

首先感谢上文中提到的各位师傅的博文    
     
     
 ，给了我许多启发               。第一次接触Echarts图表可视化




   




   




   ，还是比较有意思的




    




    




    。在这边记录一下














。加油！

2022年4月5日于家中