VUE echarts绘制省级/市级地图&自动轮循tooltip

已于 2022-03-10 15:10:49 修改
阅读量4.1k 收藏 20
点赞数 8
分类专栏： echarts地图 js vue 文章标签： echarts javascript vue.js
于 2022-03-10 15:05:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yynikki/article/details/123400291
版权
js 同时被 3 个专栏收录
7 篇文章 0 订阅
订阅专栏
vue
7 篇文章 1 订阅
订阅专栏
echarts地图
1 篇文章 0 订阅
订阅专栏

效果图

在这里插入图片描述

绘制省级地图

1.安装echarts依赖，并在main.js中准备
import echarts from "echarts"
Vue.prototype.$echarts = echarts
2.直接引入echarts里的省级地图json（江苏为例）
	import 'echarts/map/js/province/jiangsu'
3.完整代码包含自动轮循
<template>
    <div class="chartBox">
        <div id="chartMap" style="width: 100%; height: 100%;"></div>
    </div>
</template>

<script>
	export default {
		data () {
			return {
				timer:null,
			};
		},
		mounted () {
			this.draw('chartMap');
		},
		methods: {
            getData(){
      			  let _this = this
               		return new Promise(resolve => {
        			  let citys = [
                            {name: '南京市', value: 0,total:0},
                            {name: '常州市', value: 0,total:0},
                            {name: '徐州市', value: 0,total:0},
                            {name: '淮安市', value: 0,total:0},
                            {name: '南通市', value: 0,total:0},
                            {name: '宿迁市', value: 0,total:0},
                            {name: '无锡市', value: 0,total:0},
                            {name: '扬州市', value: 0,total:0},
                            {name: '盐城市', value: 0,total:0},
                            {name: '苏州市', value: 0,total:0},
                            {name: '泰州市', value: 0,total:0},
                            {name: '镇江市', value: 0,total:0},
                            {name: '连云港市', value: 0,total:0}
                        ]
                          resolve(citys)
             		 })
            },
			draw (chart) {
				let _this = this
				let myChart = this.$echarts.init(document.getElementById(chart))
				myChart.clear();

				myChart.showLoading();
				let index = -1;
				_this.timer = setInterval(function () {
					// 显示提示框
					myChart.dispatchAction({
						type: "showTip",
						seriesIndex: 0,
						dataIndex: index + 1,
					});
					// 取消高亮指定的数据图形
					myChart.dispatchAction({
						type: "downplay",
						seriesIndex: 0,
						dataIndex: index,
					});
					// 高亮指定的数据图形
					myChart.dispatchAction({
						type: "highlight",
						seriesIndex: 0,
						dataIndex: index + 1,
					});
					index++;
					if (index > 13) {
						index = -1;
					}
				}, 4000);

				myChart.on("click", function (e) {
					clearInterval(_this.timer);
					myChart.dispatchAction({
						type: "downplay",
						seriesIndex: 0,
					});
					myChart.dispatchAction({
						type: "highlight",
						seriesIndex: 0,
						dataIndex: e.dataIndex,
					});
					myChart.dispatchAction({
						type: "showTip",
						seriesIndex: 0,
						dataIndex: e.dataIndex,
					});
				});

				myChart.on("mousemove", function (e) {
					clearInterval(_this.timer);
					myChart.dispatchAction({
						type: "downplay",
						seriesIndex: 0,
					});
					myChart.dispatchAction({
						type: "highlight",
						seriesIndex: 0,
						dataIndex: e.dataIndex,
					});
					myChart.dispatchAction({
						type: "showTip",
						seriesIndex: 0,
						dataIndex: e.dataIndex,
					});
				}); //---------------------------------------------鼠标移入静止播放
				myChart.on("mouseout", function (e) {
					clearInterval(_this.timer);
					myChart.dispatchAction({
						type: "downplay",
						seriesIndex: 0,
						dataIndex: e.dataIndex,
					}); //鼠标移出后先把上次的高亮取消
					_this.timer = setInterval(function () {
						// 隐藏提示框
						myChart.dispatchAction({
							type: "hideTip",
							seriesIndex: 0,
							dataIndex: index,
						});
						// 显示提示框
						myChart.dispatchAction({
							type: "showTip",
							seriesIndex: 0,
							dataIndex: index + 1,
						});
						// 取消高亮指定的数据图形
						myChart.dispatchAction({
							type: "downplay",
							seriesIndex: 0,
							dataIndex: index,
						});
						// 高亮指定的数据图形
						myChart.dispatchAction({
							type: "highlight",
							seriesIndex: 0,
							dataIndex: index + 1,
						});
						index++;
						if (index > 13) {
							index = -1;
						}
					}, 2000);
				});
				myChart.hideLoading();

                this.getData().then(result=>{
					let citys = []
					let  cityMin = 0, cityMax = 0;
					if(result&&result.length>0){
                        citys = result
						cityMin = citys[0].value ? citys[0].value : 0;
						cityMax = citys[0].value ? citys[0].value : 0;

						for (var i = 0; i < citys.length - 1; i++) {
							cityMin = cityMin > citys[i + 1].value ? citys[i + 1].value : cityMin
							cityMax = cityMax < citys[i + 1].value ? citys[i + 1].value : cityMax
						}

                    }
					let option = {
						title: {
							text: '江苏省xx人数情况',
							left: 0,
							textStyle: {
								fontSize: 16,
								color: "#257dff",
							}
						},
						grid: {
							x:50,
							y:55,
						},
						tooltip: {
							trigger: 'item',
							showDelay: 0,
							transitionDuration: 0.2,
							formatter: function (params) {
								let zs_count = params.value?params.value:0
                                return `<span style="color: #ff0;font-weight: 700;">${params.name}</span>
<span style="color: #ff0">${((params.value > params.data.total) || ((params.value == params.data.total))) ? '(已满)' : ''}<br/>
<span style="color: #fff">已有人数：</span>
<span style="color: #ff0">${((params.value > params.data.total) || ((params.value == params.data.total))) ? params.value : ''}</span>
<span style="color: #fff">${(params.value < params.data.total) ? params.value : ''}<br/>
<span style="color: #fff">计划人数：${params.data.total} 人</span>`;
								
							},
							position:'right',
							confine: true,
						},
						visualMap: {
							left: 'left',
							min: cityMin,
							max: cityMax,
							inRange: {
								color: [
                                    '#AFEEEE',
                                    '#e0f3f8',
									'#B0C4DE',
                                    '#abd9e9',
									'#87CEFA',
                                    '#74add1',
                                    '#6495ED',
									'#4575b4',
									'#4169E1',
									'#5A4ABD',
									'#6166b5',
								]
							},
							text: ['High', 'Low'],
							calculable: true,
							show: false
						},
						series: [
							{
								name: '人数',
								type: 'map',
								roam: true,
								map: '江苏',//这里的名字和导入的echarts/map/js/province/jiangsu.js文件里的名字要对应
								label: {
									normal: {
										show: true,
										textStyle: {
											color: '#fff',
											textShadowOffsetX: 0,
											textShadowOffsetY: 0,
											textShadowBlur: 5,
											textShadowColor: '#000',
										}
									}
								},
								itemStyle: {
									emphasis: {
										label: {
											show: true,
											textStyle: {
												color: '#000',
												textShadowOffsetX: 0,
												textShadowOffsetY: 0,
												textShadowBlur: 10,
												textShadowColor: '#fff',
											}
										},
										areaColor: '#ff0'
									}
								},
								// 文本位置修正
								textFixed: {
									Alaska: [20, - 20]
								},
								data: citys,
								left: '30%',
                                top: 0,
                                right: '10%',
                                bottom: 0,
								
							}
						]
					};
					myChart.setOption(option)
				})

				
			},

		},
		beforeDestroy() {
			clearInterval(this.timer);
			this.timer = null;
		},
		destroyed () {
			window.onresize = null;
			clearInterval(this.timer);
			this.timer = null;
		}
	};
</script>

<style scope lang="less" type="text/less">
    .chartBox {
      //width: 100%;height: 100%;
        width: 500px;height: 500px;
    }
</style>

市级地图（在上面省级地图的基础上修改）

1.echarts中没有直接的市级json；从DataV下载（以江苏南京市为例）

在这里插入图片描述

2.创建nanjing.json，并把上图拿到的json数据放进去
3.注入南京市地图json，没有这一步就不能继续玩了
  let nj_map = require('./nanjing.json')//路径根据nanjing.json文件本地路径改变
  this.$echarts.registerMap('南京',nj_map);
4.完整代码包含自动轮循
<template>
    <div class="chartBox">
        <div id="chartMap" style="width: 100%; height: 100%;"></div>
    </div>
</template>

<script>
	export default {
		data () {
			return {
				timer:null,
			};
		},
		mounted () {
			this.draw('chartMap');
		},
		methods: {
            getData(){
      			  let _this = this
               		return new Promise(resolve => {
        			  let nanjing= require('./nanjing.json')//路径根据nanjing.json文件本地路径改变
				      let citys= []
				      let areaList = nanjing.features
				      for (let i = 0; i < areaList.length; i++) {
				        res.push({
				          name: areaList[i].properties.name,
				          value: 0,
				          total: 0
				        })
				      }
                	 resolve(citys)
             	})
            },
			draw (chart) {
				let _this = this
				let myChart = this.$echarts.init(document.getElementById(chart))
				myChart.clear();

				myChart.showLoading();
				let index = -1;
				_this.timer = setInterval(function () {
					// 显示提示框
					myChart.dispatchAction({
						type: "showTip",
						seriesIndex: 0,
						dataIndex: index + 1,
					});
					// 取消高亮指定的数据图形
					myChart.dispatchAction({
						type: "downplay",
						seriesIndex: 0,
						dataIndex: index,
					});
					// 高亮指定的数据图形
					myChart.dispatchAction({
						type: "highlight",
						seriesIndex: 0,
						dataIndex: index + 1,
					});
					index++;
					if (index > 13) {
						index = -1;
					}
				}, 4000);

				myChart.on("click", function (e) {
					clearInterval(_this.timer);
					myChart.dispatchAction({
						type: "downplay",
						seriesIndex: 0,
					});
					myChart.dispatchAction({
						type: "highlight",
						seriesIndex: 0,
						dataIndex: e.dataIndex,
					});
					myChart.dispatchAction({
						type: "showTip",
						seriesIndex: 0,
						dataIndex: e.dataIndex,
					});
				});

				myChart.on("mousemove", function (e) {
					clearInterval(_this.timer);
					myChart.dispatchAction({
						type: "downplay",
						seriesIndex: 0,
					});
					myChart.dispatchAction({
						type: "highlight",
						seriesIndex: 0,
						dataIndex: e.dataIndex,
					});
					myChart.dispatchAction({
						type: "showTip",
						seriesIndex: 0,
						dataIndex: e.dataIndex,
					});
				}); //---------------------------------------------鼠标移入静止播放
				myChart.on("mouseout", function (e) {
					clearInterval(_this.timer);
					myChart.dispatchAction({
						type: "downplay",
						seriesIndex: 0,
						dataIndex: e.dataIndex,
					}); //鼠标移出后先把上次的高亮取消
					_this.timer = setInterval(function () {
						// 隐藏提示框
						myChart.dispatchAction({
							type: "hideTip",
							seriesIndex: 0,
							dataIndex: index,
						});
						// 显示提示框
						myChart.dispatchAction({
							type: "showTip",
							seriesIndex: 0,
							dataIndex: index + 1,
						});
						// 取消高亮指定的数据图形
						myChart.dispatchAction({
							type: "downplay",
							seriesIndex: 0,
							dataIndex: index,
						});
						// 高亮指定的数据图形
						myChart.dispatchAction({
							type: "highlight",
							seriesIndex: 0,
							dataIndex: index + 1,
						});
						index++;
						if (index > 13) {
							index = -1;
						}
					}, 2000);
				});
				myChart.hideLoading();
				//注入南京市地图json，没有这一步就不能继续玩了
				 let nj_map = require('./nanjing.json')//路径根据nanjing.json文件本地路径改变
				 this.$echarts.registerMap('南京',nj_map);
 
                this.getData().then(result=>{
					let citys = []
					let  cityMin = 0, cityMax = 0;
					if(result&&result.length>0){
                        citys = result
						cityMin = citys[0].value ? citys[0].value : 0;
						cityMax = citys[0].value ? citys[0].value : 0;

						for (var i = 0; i < citys.length - 1; i++) {
							cityMin = cityMin > citys[i + 1].value ? citys[i + 1].value : cityMin
							cityMax = cityMax < citys[i + 1].value ? citys[i + 1].value : cityMax
						}

                    }
					let option = {
						title: {
							text: '南京市xx人数情况',
							left: 0,
							textStyle: {
								fontSize: 16,
								color: "#257dff",
							}
						},
						grid: {
							x:50,
							y:55,
						},
						tooltip: {
							trigger: 'item',
							showDelay: 0,
							transitionDuration: 0.2,
							formatter: function (params) {
								let zs_count = params.value?params.value:0
                                return `<span style="color: #ff0;font-weight: 700;">${params.name}</span>
<span style="color: #ff0">${((params.value > params.data.total) || ((params.value == params.data.total))) ? '(已满)' : ''}<br/>
<span style="color: #fff">已有人数：</span>
<span style="color: #ff0">${((params.value > params.data.total) || ((params.value == params.data.total))) ? params.value : ''}</span>
<span style="color: #fff">${(params.value < params.data.total) ? params.value : ''}<br/>
<span style="color: #fff">计划人数：${params.data.total} 人</span>`;
								
							},
							position:'right',
							confine: true,
						},
						visualMap: {
							left: 'left',
							min: cityMin,
							max: cityMax,
							inRange: {
								color: [
                                    '#AFEEEE',
                                    '#e0f3f8',
									'#B0C4DE',
                                    '#abd9e9',
									'#87CEFA',
                                    '#74add1',
                                    '#6495ED',
									'#4575b4',
									'#4169E1',
									'#5A4ABD',
									'#6166b5',
								]
							},
							text: ['High', 'Low'],
							calculable: true,
							show: false
						},
						series: [
							{
								name: '人数',
								type: 'map',
								roam: true,
								map: '南京',//这里的名字和上面registerMap里的名字要对应
								label: {
									normal: {
										show: true,
										textStyle: {
											color: '#fff',
											textShadowOffsetX: 0,
											textShadowOffsetY: 0,
											textShadowBlur: 5,
											textShadowColor: '#000',
										}
									}
								},
								itemStyle: {
									emphasis: {
										label: {
											show: true,
											textStyle: {
												color: '#000',
												textShadowOffsetX: 0,
												textShadowOffsetY: 0,
												textShadowBlur: 10,
												textShadowColor: '#fff',
											}
										},
										areaColor: '#ff0'
									}
								},
								// 文本位置修正
								textFixed: {
									Alaska: [20, - 20]
								},
								data: citys,
								left: '30%',
                                top: 0,
                                right: '10%',
                                bottom: 0,
								
							}
						]
					};
					myChart.setOption(option)
				})

				
			},

		},
		beforeDestroy() {
			clearInterval(this.timer);
			this.timer = null;
		},
		destroyed () {
			window.onresize = null;
			clearInterval(this.timer);
			this.timer = null;
		}
	};
</script>

<style scope lang="less" type="text/less">
    .chartBox {
      //width: 100%;height: 100%;
        width: 500px;height: 500px;
    }
</style>
困困自习室
关注
  • 8
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts 地图省市区边框+划过显示数据 vue
yydszxd的博客
11-08 1430
<div class="zEcharts" style="width: 500px; height: 70vh"> <div class="map-container" id="myEcharts" ref="myEchart" style="height: 100%; width: 100%" ></div>..
echarts地图的tooltip自定义样式显示图表
weixin_43931898的博客
10-18 9575
实现在Echarts地图的tooltip提示框中绘制图表 最近遇到一个需求是需要在地图中，鼠标点击或者停留在地图中某一片区域时，该区域显示亮高和显示tooltip提示框信息，但是难点在于需要在tooltip提示框中再绘制一层图表。按以往我们做过都是这种，tooltip提示框中只是单纯显示文本信息。 但是，需求要的不是这种，先不多说，直接给你们看最终展示的效果。 这里我们以广州市作为模板，可以看出这是我们想要的在tooltip提示框中绘制另外一层图表。 ok，接下来我们直接上代码。 <templat
echarts的自定义tooltip居中展示
weixin_42070393的博客
11-07 1885
echarts的自定义tooltip位置居中设置
echarts-tooltip
最新发布
m0_74019046的博客
05-19 1169
tooltip的content部分默认是用html去绘制的，所以要使用div作为echarts的容器。要使用canvas绘制，要必须使用canvas模式。tooltip后如果渲染的元素是canvans,tooltip不能显示出来。
Echarts 地图使用，以及tooltip轮播使用
qinjinhua_的博客
10-09 4958
echarts地图使用 tootip
echarts省地图例子以及tooltip自定义提示框详解
热门推荐
社会人
01-24 2万+
echarts省地图例子以及tooltip自定义提示框详解
echarts地图自定义tooltip样式
JiAyInNnNnN123的博客
05-20 7093
效果图： 自定义tooltip样式 tooltip: { position: ['50%', '50%'], trigger: 'item', backgroundColor: 'rgba(0,0,0,0)', borderColor: 'rgba(0,0,0,0)', extraCssText: 'box-shadow: 0 0 0 rgba(0, 0, 0, 0);', zInde
ECharts地图的提示框浮层设置
viviliving的专栏
04-24 3772
ECharts地图的提示框浮层设置 2020-09-08 15:41 更新 series[i]-map.tooltip 本系列特定的 tooltip 设定。 series-map.tooltip.position stringArrayFunction 注意：series.tooltip仅在tooltip.trigger为'item'时有效。 提示框浮层的位置，默认不设置时位置会跟随鼠标的位置。 可选： ​Array​ 通过数组表示提示框浮层的位置，支持数字设置绝对位置，...
echarts绘制中国地图 tooltip悬浮显示多数据且自动播放
weixin_42679187的博客
02-25 4733
echarts---中国地图 html文件 &lt;div id="chinaMap"&gt; 引入echarts-map-china.js和echarts-auto-toopltip.js文件 (function(){ chinaMapAnalysis(); })(); var timers = setInterval("chinaMapAnalysis()",2000*34); ...
Vue Echarts实现可视化世界地图代码实例
11-28
Echarts实现可视化世界地图模拟迁徙，以我自己开发过程。 下载Echarts依赖： npm install echarts 成功以后引入依赖： import echarts from 'echarts' peopleInsertCharts为生成echarts容器。 let myChart = ...
【vue+echarts】绘制中国地图,3D地图,省、市、县三级下钻以及回钻,南海诸岛小窗化显示,点位飞线图,点位名称弹窗轮播
04-25
【vue+echarts】绘制中国地图,3D地图,省、市、县三级下钻以及回钻,南海诸岛小窗化显示,点位飞线图,点位名称弹窗轮播展示,及一些常见问题,解压直接使用 【vue+echarts】绘制中国地图,3D地图,省、市、县三级下钻以及回...
2022年echarts南京市最新11区json地图
03-22
2022年自己调整过使用过的echarts南京市最新11区json地图，包括鼓楼区、玄武区、建邺区、秦淮区、雨花台区、栖霞区、六合区、浦口区、江宁区、溧水区、高淳区。echarts直接调用json文件。
vue echarts(2020/10/22更新)
10-22
echarts作为vue组件进行使用，可实现一个页面加载多个echarts实例，互不冲突。页面大小变动自适应。文章链接：https://blog.csdn.net/qq_35134375/article/details/109164031
vue echarts 以中国为中心的地图 绘制海运线和航线
08-18
vue echarts 以中国为中心的地图 绘制海运线和航线 查看具体流程 https://blog.csdn.net/Mr_WEB_Yao/article/details/126051905?spm=1001.2014.3001.5502
Vue + Echarts 实现中国地图多级钻取功能.zip
08-01
本文为 Vue 2.x + Echarts 5.x 实现中国地图多级钻取功能（基本版 未做过多功能拓展和样式优化 便于二次开发）。（更多说明移步：https://blog.csdn.net/ZYS10000/article/details/119298354）
(echarts)ECharts地图图表tooltip显示多条数据
nyf_unknow的博客
04-02 2137
【代码】(echarts)ECharts地图图表tooltip显示多条数据。
echarts市级区域地图数据展示
常小胖的博客
08-24 6307
一、原理 引用对应市区json数据（比如我就是引用的河南省驻马店市的数据），通过百度地图坐标拾取器获取地区的经纬度，将数据填在对应位置（我下面有注释），再配置下样式颜色之类的渲染上就可以了 二、看图片可能感受不大，下面是我echarts社区的主页，里面有这个例子，大家可以去看看效果 我的echarts个人主页 三、效果图 四、直接上代码，解释在注释里 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta char
Echarts 地图tooltip多行显示,当鼠标悬停地区显示数据
weixin_54685622的博客
12-30 2652
代码如下 tooltip : { trigger : 'item', // formatter: '{b}' // formatter: '{b}<br/>{c} (个)' formatter : function(params) { var res = params.name + '<br/>'; var myseries = option.series; for (var i = 0; i < myseries.length;
vue+echarts 实现地图tooltip点击事件；toolTip数据动态渲染；同时鼠标滑过涟漪点时实现地图多区域联动
qq_49496611的博客
12-30 7022
vue+echarts 实现地图tooltip点击事件；toolTip数据动态渲染；同时鼠标滑过涟漪点时实现地图多区域联动
vue-echarts绘制世界地图
03-19
vue-echarts是一个基于Vue.js的图表库，它提供了丰富的图表组件，包括绘制世界地图的功能。使用vue-echarts可以轻松地在Vue.js项目中绘制各种类型的图表，包括世界地图。 要使用vue-echarts绘制世界地图，首先需要安装vue-echarts库。可以通过npm或yarn进行安装，例如： ``` npm install vue-echarts echarts ``` 安装完成后，在Vue组件中引入vue-echarts和echarts： ```javascript import VueECharts from 'vue-echarts'; import 'echarts/map/js/world'; export default { components: { VueECharts, }, data() { return { mapData: [ // 这里是地图数据 ], }; }, }; ``` 然后，在模板中使用VueECharts组件来绘制地图： ```html <template> <div> <vue-echarts :options="mapOptions" style="height: 400px;"></vue-echarts> </div> </template> ``` 在data中定义mapData变量来存储地图数据，然后在computed属性中定义mapOptions来配置地图的样式和数据： ```javascript computed: { mapOptions() { return { series: [ { type: 'map', map: 'world', data: this.mapData, }, ], }; }, }, ``` 这样就可以使用vue-echarts绘制世界地图了。你可以根据自己的需求，通过配置mapData来展示不同的数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值