echarts3实现世界地图

基于ecahrts 版本3
需要引入的文件有 echarts.js world.js
详见 world.js
https://download.csdn.net/download/super__code/10676418
效果图

代码

 // html 文件<div id="worldMap" style="width: 1000px;height: 500px;border: 1px solid #ddd;"></div>// 引入script 文件<script src="../assets/plugins/echarts/echarts3.min.js"></script><script src="../assets/plugins/js/world.js"></script><script>// 绘制图表let worldChart = echarts.init(document.getElementById('worldMap'));// 国家名英文中文对比let  nameComparison = {'Canada':'加拿大','Russia':'俄罗斯','China':'中国','United States':'美国',// ....其他省略 ，见文章末};// 数据let dataMap = [{"name": "俄罗斯","value": 10},{"name": "加拿大","value": 0},{"name": "中国","value": 5},{"name": "美国","value": 7}]let option = {backgroundColor: "#02AFDB",title: {    //地图显示标题show: false,text: '',top:"30px",left: 'center',textStyle: {color: '#000'}},visualMap: {   //图列显示柱type: 'piecewise',left:30,realtime: false,calculable : true,color: ['green', 'lightgreen','red'],pieces: [{gte: 10, label: '大于等于10'},            // (10, Infinity]{gte: 1, lte: 9, label: '小于10'},       // (1, 9]{lt: 1,  label: '未满足'}                 // (-Infinity, 1)]},toolbox: {  //工具栏show: false,orient: 'vertical',top:50,itemGap:20,left:30,feature: {dataView: {readOnly: false},restore: {},saveAsImage: {}}},tooltip: {  //提示框组件show: true,trigger: 'item',formatter: ''},series: [{name:"使用情况",type: 'map',mapType: 'world',roam: true,zoom: 1,mapLocation: {y: 100},data: dataMap,   //绑定数据nameMap: nameComparison,symbolSize: 12,label: {normal: {show: false},emphasis: {show: true}},itemStyle: {emphasis: {borderColor: 'transparent',borderWidth: 1}}}],};worldChart.setOption(option);
</script>

国家名中英文对比

 let  nameComparison = {'Canada':'加拿大','Russia':'俄罗斯','China':'中国','United States':'美国','Singapore Rep.':'新加坡','Dominican Rep.':'多米尼加','Palestine':'巴勒斯坦','Bahamas':'巴哈马','Timor-Leste':'东帝汶','Afghanistan':'阿富汗','Guinea-Bissau':'几内亚比绍',"Côted'Ivoire":'科特迪瓦','Siachen Glacier':'锡亚琴冰川',"Br. Indian Ocean Ter.":'英属印度洋领土','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 Herz.':'波斯尼亚和黑塞哥维那','Belarus':'白俄罗斯','Belize':'伯利兹','Bermuda':'百慕大','Bolivia':'玻利维亚','Brazil':'巴西','Brunei':'文莱','Bhutan':'不丹','Botswana':'博茨瓦纳','Central African Rep.':'中非','Switzerland':'瑞士','Chile':'智利','Ivory Coast':'象牙海岸','Cameroon':'喀麦隆','Dem. Rep. Congo':'刚果民主共和国','Congo':'刚果','Colombia':'哥伦比亚','Costa Rica':'哥斯达黎加','Cuba':'古巴','N. Cyprus':'北塞浦路斯','Cyprus':'塞浦路斯','Czech Rep.':'捷克','Germany':'德国','Djibouti':'吉布提','Denmark':'丹麦','Algeria':'阿尔及利亚','Ecuador':'厄瓜多尔','Egypt':'埃及','Eritrea':'厄立特里亚','Spain':'西班牙','Estonia':'爱沙尼亚','Ethiopia':'埃塞俄比亚','Finland':'芬兰','Fiji':'斐','Falkland Islands':'福克兰群岛','France':'法国','Gabon':'加蓬','United Kingdom':'英国','Georgia':'格鲁吉亚','Ghana':'加纳','Guinea':'几内亚','Gambia':'冈比亚','Guinea Bissau':'几内亚比绍','Eq. 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':'柬埔寨','Korea':'韩国','Kosovo':'科索沃','Kuwait':'科威特','Lao PDR':'老挝','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':'波多黎各','Dem. Rep. Korea':'朝鲜','Portugal':'葡萄牙','Paraguay':'巴拉圭','Qatar':'卡塔尔','Romania':'罗马尼亚','Rwanda':'卢旺达','W. Sahara':'西撒哈拉','Saudi Arabia':'沙特阿拉伯','Sudan':'苏丹','S. Sudan':'南苏丹','Senegal':'塞内加尔','Solomon Is.':'所罗门群岛','Sierra Leone':'塞拉利昂','El Salvador':'萨尔瓦多','Somaliland':'索马里兰','Somalia':'索马里','Serbia':'塞尔维亚','Suriname':'苏里南','Slovakia':'斯洛伐克','Slovenia':'斯洛文尼亚','Sweden':'瑞典','Swaziland':'斯威士兰','Syria':'叙利亚','Chad':'乍得','Togo':'多哥','Thailand':'泰国','Tajikistan':'塔吉克斯坦','Turkmenistan':'土库曼斯坦','East Timor':'东帝汶','Trinidad and Tobago':'特里尼达和多巴哥','Tunisia':'突尼斯','Turkey':'土耳其','Tanzania':'坦桑尼亚','Uganda':'乌干达','Ukraine':'乌克兰','Uruguay':'乌拉圭','Uzbekistan':'乌兹别克斯坦','Venezuela':'委内瑞拉','Vietnam':'越南','Vanuatu':'瓦努阿图','West Bank':'西岸','Yemen':'也门','South Africa':'南非','Zambia':'赞比亚','Zimbabwe':'津巴布韦'};

echarts3实现世界地图相关推荐

使用echarts3实现散点地图
在开发过程中,我们总会接到关于数据处理分析的需求,其中有一部分很重要就是数据统计可视化展示,对于数据可视化方面,echarts这点就做的非常好.最近研究echarts,对于散点地图这一块挺感兴趣的,在 ...
Echarts世界地图的国家名称中文化
Echarts的世界地图的国家名称是英文,但是给的数据是中文名称,会导致在地图上标出来点来,为了解决这个问题,可以参见http://echarts.baidu.com/echarts2/doc/exa ...
中国地图_铜板画地图铜地球仪高档办公室装饰用品定制铜版画地图中国地图世界地图定制惠风堂铜雕艺术...
惠风堂铜雕艺术惠风堂911期春华秋实,惠风堂与你同在!惠风堂感谢过去一年,新老顾客的支持和厚爱!新的一年我们会更加努力的,为您做出令您满意的艺术作品.感恩! 客户定制彩色地图,可以免费写赠言!15 ...
生信小白7行代码画一个高颜值的世界地图
不要害怕编程,它其实像泡方便面一样简单.先在百度搜索R,然后像安装QQ一样,一直选择下一步,安装成功后,双击打开桌面R的快捷方式. 复制粘贴下面代码,敲一个回车键,就能得到下面的世界地图.如果这个图上 ...
Open Street Map维基世界地图初探--概念、开发
from: http://blog.csdn.net/viewcode/article/details/8179289 1. 什么是open street map(osm)? 2. 开发者应该知道哪些 ...
flask+sqlite3+echarts3+ajax 异步数据加载
结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...
echarts中的世界地图
echarts中的世界地图:https://blog.csdn.net/mm_hello11/article/details/82989883
在iview项目中添加echarts3
写在前面在即将结束的iview项目中,用到了大量的echarts3内容,简要记录下,在iview项目中,如何加载使用echarts3,并使其能够自适应页面大小. 开始页面模板中添加带 id 的 d ...
在echarts3中使用字符云
echarts2的官方API里是带有字符云的,但到了echarts3就被从官网上移除了,想要使用的话可以从github上下载: 下载地址:https://github.com/ecomfe/echar ...

echarts3实现世界地图

echarts3实现世界地图相关推荐

最新文章

热门文章