基于VUE+TS中引用ECharts的中国地图和世界地图密度表

首先先附上官网 http://echarts.baidu.com/option.html#series-line.label 以及密度表对应geo配置文档 http://echarts.baidu.com/option.html#geo

以下仅是个人在开发中逐步摸索出来的。demo目前没出问题。如果有错误地方请留言指出  （若转载请标注出处）

直接上效果图，对应代码在效果图下面

安装：

1. npm install echarts --save2. npm install --save @types/echarts3. 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的中国地图和世界地图密度表


原文地址：https://www.cnblogs.com/xiaozhu007/p/9029071.html
				


				
时间： 2024-10-19 17:09:35 

		


		


	

	
	

		


		
基于VUE+TS中引用ECharts的中国地图和世界地图密度表的相关文章


								

		

			

                如何在vue项目中使用echarts和高德地图绘制折线和热力图
			

		

		

									

				1.先下载相关的依赖,这里echarts和高德地图放到一起.(高德地图需要先去申请一个key) // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router fr			

		

	

				

		

			

                Vuex的this.$store.commit和在Vue项目中引用公共方法
			

		

		

									

				2018年11月22日 20:50:29 Funfction_Zero 阅读数 3230 1.在Vue项目中引用公共方法 作为一个新人小白,在使用vue的过程中,难免会遇到很多的问题,比如某个方法在很多组件中都能用的上,如果在每个组件上都去引用一次的话,会比较麻烦,增加代码量.怎么做比较好呢,话不多说直接看代码把 首先 要在main.js中引入公共js.然后,将方法赋在Vue的原型链上.像图中这样. 然后在需要的组件上去引入这个方法 mouted (){ //调用方法 this.common.l			

		

	

				

		

			

                Vue系列——在vue项目中使用echarts
			

		

		

									

				安装echarts依赖 npm install echarts -S 创建图表 全局引入 main.js // 引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts Hello.vue <div id="myChart" :style="{width: '300px', height: '300px'}"></div> export default {			

		

	

				

		

			

                基于echarts的中国地图
			

		

		

									

				HTML: <div id="china_map" style='margin-top: -120px;width:100%x;height:600px;'></div> 以下是echarts地图相关代码 dataList () { // 初始化echarts实例 this.chinachart = echarts.init(document.getElementById('china_map')) // 进行相关配置 var chartOption = { t			

		

	

				

		

			

                echarts实现中国地图数据展示
			

		

		

									

				在项目中运用到图形展示数据太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts: 一般运用到条形.折线.扇形图,今天说一说在中国地图上展示各地数据: 首先要准备中国地图的JS文件,可以在网盘下载,链接: https://pan.baidu.com/s/1j_edGU2ka9YeHBTErqDWdg 密码: ft9n 也可以在github上克隆下来:https://github.com/Luna829/incubator-echarts/blob/master/m			

		

	

				

		

			

                1、ECharts（中国地图篇）的使用
			

		

		

									

				一.网址:            http://echarts.baidu.com/download.html点击:            完整下载文件:        echarts.min.js 网址:            http://echarts.baidu.com/download-map.html点击:            中国地图 - JS下载文件:        china.js 二.代码示例 <!DOCTYPE html> <html> <head&g			

		

	

				

		

			

                echarts画中国地图并上色
			

		

		

									

				任务是画一个中国地图,并在指定区域上颜色,学姐说用arcgis画,乖乖,4个g的安装文件,算了, 还是echarts大法好..如果想熟悉这个牛X的工具,请移步https://www.w3cschool.cn/echarts_tutorial/ 如果是写论文作图需要添加应用哦 最终效果如下: 参考了这个网址:https://www.cnblogs.com/luna666/p/9007263.html 另外还有个百度官方的例子:http://www.echartsjs.com/gallery/edi			

		

	

				

		

			

                echarts画中国地图，省市区地图分享
			

		

		

									

				中国地图 四川地图 重庆地图 源码分享: https://github.com/livelyPeng/ec-map 原文地址:https://www.cnblogs.com/plBlog/p/11725632.html			

		

	

				

		

			

                在vue项目中封装echarts的正确姿势
			

		

		

									

				为什么需要封装echarts 每个开发者在制作图表时都需要从头到尾书写一遍完整的option配置,十分冗余 在同一个项目中,各类图表设计十分相似,甚至是相同,没必要一直做重复工作 可能有一些开发者忘记考虑echarts更新数据的特性,以及窗口缩放时的适应问题.这样导致数据更新了echarts视图却没有更新,窗口缩放引起echarts图形变形问题 我希望这个echarts组件能设计成什么样 业务数据和样式配置数据分离,我只需要传入业务数据就行了 它的大小要完全由使用者决定 不会因为缩放出现变形问题