关键词：
首先先附上官网 http://echarts.baidu.com/option.html#series-line.label 以及密度表对应geo配置文档 http://echarts.baidu.com/option.html#geo
以下仅是个人在开发中逐步摸索出来的。demo目前没出问题。如果有错误地方请留言指出 （若转载请标注出处）
直接上效果图，对应代码在效果图下面
安装：
1. npm install echarts --saveimport * as echarts from \'echarts\'（
2. npm install --save @types/echarts
3.在所需要用到的组件中TS引入，也可以在main.ts里面引入）
1. 因为typescript的限制原因，在引入的时候校对以上步骤。然后在需要用到的组件中ts文件引入对应的地图js
例如：
<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更改对应的字段。
如下：(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\': \'几内亚比绍\', 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: \'巴哈马查看详情vue封装echarts组件
...一般的图表都是比较好绘制的，稍微比较难的世界地图和中国地图的绘制。在vue中引入echarts，分两种情况引入，一种值npm安装包，另一种是cdn外部引入，但是这个对于一般的echarts绘制是没有影响的。首先安装echarts依赖你可选择... 查看详情
不习惯的vue3起步六のecharts绘制下钻地图(代码片段)
...;做一个展示中国城市的下钻地图使用：Vue3ViteTypescriptecharts实现效果：准备工作创建项目因为准备使用Vue3+Vite+Typescript所以使用yarncreateviteecharts-component--templatevue-ts命令创建出项目在项目的配置时，需要安装一些... 查看详情
vue3+typescript实战记录一
...类型，需要使用defineComponent全局方法定义组件。参考文档引用第三方库时，如果第三方类库并没有ts的.d.ts类型的声明文件，则无法在项目中正常使用。如果要顺利使用这些库，就需要我们添加声明文件。通过此地址可以查找当... 查看详情
关于vue+echarts地图引用空间文件或gis(.shp)
...为他在合并的时候我不是很理解，毕竟太过跨越了；关于引用空间文件1.首先你需要得到一些.shp文件，当然是越轻量级越好；2.你需要将你得到的空间文件在https://mapshaper.org/这个网站进行转化为geoJSON；3.你转换的是geoJSON但是到... 查看详情
echarts基于百度地图实现地图飞线
参考技术Aechart社区例子都是基于geo底图实现的底图飞线，现实现基于在线地图实现地图飞线：原例子MakeAPie-模拟迁徙+百度地图(1条消息)利用ECharts3来实现ECharts2实例中的模拟迁徙效果，即背景地图为百度地图。_GiScript的博客-CSDN... 查看详情
vue框架下echarts导入地图和调用百度地图接口
...面，同时尽量按照原型设计的完成。一. 在vue框架下导入中国地图及下钻到各省市地图第一步需要下载echarts插件，需要命令窗口cd到项目根目录下，执行cnpminstallecharts--save-dev的命令。第二步在在m 查看详情
2021-06-06在vue中使用echarts3d地图
...地图main.js中package.json使用版本在vue文件中使用3d地图示例中国地图json数据import'@/components/china'varmyChart=this.echarts.registerMap("china",china);//china为上图中的json数据constmyChart=this.$echarts.init(document.getElementById('main'));opt... 查看详情
echarts3地图不显示地图显示为啥有问题
...示的问题。这个问题是因为echarts3的地图的geo数据以前的中国地图是内置了，现在新版本需要自己下载的china的js或json数据，引用了之后就可以显示了。 参考技术BECharts开源来自百度商业前端数据可视化团队，基于html5Canvas，是一... 查看详情
请教百度echarts的使用问题
...名不要改变，zrender和echarts在同一个目录下面。在项目中引用相关文件。我想要用echarts画地图，引用了map.js。引用地图的paths设置比较特殊，中我写的是'echarts/chart/map':'../../Scripts/js/echarts/map',后面写的是map在项目中的... 查看详情
vue中使用vue-echarts引入百度地图实现数据可视化(代码片段)
安装v-chartsnpm安装$npminstallechartsvue-echarts在使用v-chart前必须安装echarts在main.js中进行注册importEChartsfrom'vue-echarts'Vue.component('v-chart',ECharts)在页面进行使用1.页面中使用v-chart<template><v- 查看详情
在vue中使用百度echarts
...mounted中初始化。很麻烦。vue-echarts是ECharts的Vue.js组件，基于EChartsv4.1.0+开发，依赖Vue.jsv2.2.6+，意思就是可以直接把echarts实例当中vue中的组件来使用，不用每次都获取dom、挂在dom，轻松使用echarts的所用功能。。。v-charts是基于vue2... 查看详情
如何在vue2.0项目中引用element-ui和echart.js
1.1直接在packjson 里面的 dependencies 配置 "element-ui":"^1.3.3", "echarts":"^3.5.3", 然后在npminstall。 或者直接npminstallelement-ui--save。我如果直接npminstallechart.js--save会报错。不晓得什么原因。有会用的大牛麻烦... 查看详情
vue2.0全局引入echarts以及按需引用echarts(代码片段)
echarts官方文档中的“在webpack中使用eCharts” 链接 http://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts在所需项目中安装完了之后：全局引用main.js中配置importechartsfrom‘echarts‘// 查看详情
vue中使用echarts实现中国地图(代码片段)
第一种效果：不同省份颜色不同代码：注意：①要实现这种效果，地图数据的name一定要是省份的名字，要不然颜色出不来；②一定要有visualMap配置，并且它的seriesIndex属性对应的是series的数组下标；... 查看详情
echart移动端优化
...s和f2要大，技术选型上可以考虑一下其他方案。）从全局引用，优化为按需引用。引用echarts压缩过的省份地图的js数据，json数据会大一些，还需要registerMap。优化2:路由懒加载，vue异步组件，vendor分包，首屏加载速度加快。将路... 查看详情
ionic3引用外部插件--百度地图及echart报表的使用(代码片段)
前言ionic3提供的组件已经相当丰富咯，但是事实上有些特殊的需求，比如使用百度地图，或者第三方插件echart报表插件是，就不能用传统的方式去使用第三方插件咯，如何在Ionic3项目中使用第三方JavaScript库?.其实特别简单啦，跟... 查看详情
vue3.0+ts使用原生高德地图解决方法
...运用到它的类型提醒功能，那么必不可少地需要引入高德地图的声明文件，由于官方也没有给出，我们只能根据api文档来自己书写自己需要用到的函数声明，下面是我们项目中大部分会用到的声明，可以在src目录下新建一个types... 查看详情