vue+echarts实现中国地图流动效果(步骤详解)

2024-10-03 06:11:39

@vue+echarts实现中国地图流动效果

#话不多说看效果图

操作步骤：

执行命令:npm run echarts -s 并回车

看到这样的提示代表安装成功 PS：网络不好的情况建议用cnpm淘宝镜像（全局终端执行命令：npm i -g cnpm --registry=https://registry.npm.taobao.org）

下载china.js

链接: https://pan.baidu.com/s/1EODVh9tJNEbFebbrhKyd_Q 提取码: gjz4

引入

import echarts from 'echarts/lib/echarts';
import '@/map/china.js';

写一个echarts容器绑定ref

<div class="wrapper">
 <div class="map-container" style="width: 100%; height: 100%" ref="myEchart" ></div>
</div>

配置option (有必要的注释都已标记)

<script>
let echarts = require("echarts");
import "echarts/lib/component/markLine";
mounted(){
 let data = [
 			{ "name": "北京", "dataCount": [0, 1, 0, 0, 0, 0, 1], "id": "247" }, {
 			"name": "天津",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "248"
 		}, { "name": "河北", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "249" }, {
 			"name": "山西",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "250"
 		}, { "name": "内蒙古", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "251" }, {
 			"name": "辽宁",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "252"
 		}, { "name": "吉林", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "253" }, {
 			"name": "黑龙江",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "254"
 		}, { "name": "上海", "dataCount": [0, 1, 0, 0, 0, 0, 0], "id": "255" }, {
 			"name": "江苏",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "256"
 		}, { "name": "浙江", "dataCount": [0, 1, 0, 0, 0, 0, 0], "id": "257" }, {
 			"name": "安徽",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "258"
 		}, { "name": "福建", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "259" }, {
 			"name": "江西",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "260"
 		}, { "name": "山东", "dataCount": [14235, 820, 0, 35, 0, 0, 4], "id": "261" }, {
 			"name": "河南",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "262"
 		}, { "name": "湖北", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "263" }, {
 			"name": "湖南",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "264"
 		}, { "name": "广东", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "265" }, {
 			"name": "广西",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "266"
 		}, { "name": "海南", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "267" }, {
 			"name": "重庆",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "268"
 		}, { "name": "四川", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "269" }, {
 			"name": "贵州",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "270"
 		}, { "name": "云南", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "271" }, {
 			"name": "西藏",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "272"
 		}, { "name": "陕西", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "273" }, {
 			"name": "甘肃",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "274"
 		}, { "name": "青海", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "275" }, {
 			"name": "宁夏",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "276"
 		}, { "name": "新疆", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "277" }, {
 			"name": "台湾",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "278"
 		}, { "name": "香港", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "279" }, {
 			"name": "澳门",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "280"
 }]
 let chinaGeoCoordMap ={
 					'黑龙江': [127.9688, 45.368,1],
 					'内蒙古': [110.3467, 41.4899,1],
 					'吉林': [125.8154, 44.2584,1],
 					'北京': [116.4551, 40.2539,2],
 					'辽宁': [123.1238, 42.1216,1],
 					'河北': [114.4995, 38.1006,1],
 					'天津': [117.4219, 39.4189,1],
 					'山西': [112.3352, 37.9413,1],
 					'陕西': [109.1162, 34.2004,1],
 					'甘肃': [103.5901, 36.3043,1],
 					'宁夏': [106.3586, 38.1775,1],
 					'青海': [101.4038, 36.8207,1],
 					'新疆': [87.9236, 43.5883,1],
 					'西藏': [91.11, 29.97,1],
 					'四川': [103.9526, 30.7617,1],
 					'重庆': [108.384366, 30.439702,1],
 					'山东': [117.1582, 36.8701,1],
 					'河南': [113.4668, 34.6234,1],
 					'江苏': [118.8062, 31.9208,1],
 					'安徽': [117.29, 32.0581,1],
 					'湖北': [114.3896, 30.6628,1],
 					'浙江': [119.5313, 29.8773,1],
 					'福建': [119.4543, 25.9222,1],
 					'江西': [116.0046, 28.6633,1],
 					'湖南': [113.0823, 28.2568,1],
 					'贵州': [106.6992, 26.7682,1],
 					'云南': [102.9199, 25.4663,1],
 					'广东': [113.12244, 23.009505,1],
 					'广西': [108.479, 23.1152,1],
 					'海南': [110.3893, 19.8516,1],
 					'上海': [121.4648, 31.2891,1],
 					'台湾': [120.991676054688, 24.7801149726563,1],
 					'澳门': [113.33, 22.11,1],
 					'香港': [114.15, 22.15,1]
 }
 for (let i=0;i<data.length;i++){
 			var da = chinaGeoCoordMap[data[i].name];
 			chinaGeoCoordMap[data[i].name]=[...da,...data[i].dataCount];
 }
 let chinaDatas = [
 			[{
 			name: '北京',
 			value: 2
 			}], [{
 			name: '黑龙江',
 			value: 1
 			}], [{
 			name: '内蒙古',
 			value: 1
 			}], [{
 			name: '吉林',
 			value: 1
 			}], [{
 			name: '辽宁',
 			value: 1
 			}], [{
 			name: '河北',
 			value: 1
 			}], [{
 			name: '天津',
 			value: 1
 			}], [{
 			name: '山西',
 			value: 1
 			}], [{
 			name: '陕西',
 			value: 1
 			}], [{
 			name: '甘肃',
 			value: 1
 			}], [{
 			name: '宁夏',
 			value: 1
 			}], [{
 			name: '青海',
 			value: 1
 			}], [{
 			name: '新疆',
 			value: 1
 			}], [{
 			name: '西藏',
 			value: 1
 			}], [{
 			name: '四川',
 			value: 1
 			}], [{
 			name: '重庆',
 			value: 1
 			}], [{
 			name: '山东',
 			value: 1
 			}], [{
 			name: '河南',
 			value: 1
 			}], [{
 			name: '江苏',
 			value: 1
 			}], [{
 			name: '安徽',
 			value: 1
 			}], [{
 			name: '湖北',
 			value: 1
 			}], [{
 			name: '浙江',
 			value: 1
 			}], [{
 			name: '福建',
 			value: 1
 			}], [{
 			name: '江西',
 			value: 1
 			}], [{
 			name: '湖南',
 			value: 1
 			}], [{
 			name: '贵州',
 			value: 1
 			}], [{
 			name: '广东',
 			value: 1
 			}], [{
 			name: '广西',
 			value: 1
 			}], [{
 			name: '云南',
 			value: 1
 			}], [{
 			name: '海南',
 			value: 1
 			}], [{
 			name: '上海',
 			value: 1
 			}], [{
 			name: '台湾',
 			value: 1
 			}], [{
 			name: '澳门',
 			value: 1
 			}], [{
 			name: '香港',
 			value: 1
 			}]
 ]
 let convertData = function (data) {
 			var res = [];
 			for (var i = 0; i < data.length; i++) {
 			var dataItem = data[i];
 			var fromCoord = [chinaGeoCoordMap[dataItem[0].name][0], chinaGeoCoordMap[dataItem[0].name][1]];
 			var toCoord = [117.1582, 36.8701];
 			if (fromCoord && toCoord) {
 				res.push([{
 				coord: fromCoord,
 				value: dataItem[0].value
 				}, {
 				coord: toCoord,
 				}]);
 			}
 			}
 			return res;
 };
 let seriesA = []
 seriesA.push(
 	{
 	type: 'lines',
 	zlevel: 1,
 	effect: {
 		show: true,
 		period: 4, //箭头指向速度，值越小速度越快
 		trailLength: 0.3, //特效尾迹长度[0,1]值越大，尾迹越长重
 		symbol: 'pin', //箭头图标
 		symbolSize: 8, //图标大小
 		color: '#2a6fd9'
 	},
 	lineStyle: {
 		normal: {
 		color: '#003262',
 		width: 1,//尾迹线条宽度
 		opacity: .9, //尾迹线条透明度
 		curveness: .3 //尾迹线条曲直度
 		}
 	},
 	data: convertData(chinaDatas)
 	},
 	{
 	type: 'effectScatter',
 	coordinateSystem: 'geo',
 	zlevel: 2,
 	rippleEffect: { // 涟漪特效
 		period: 2, // 动画时间，值越小速度越快
 		brushType: 'fill', // 波纹绘制方式 stroke, fill
 		scale: 6, // 波纹圆环最大限制，值越大波纹越大
 		color: '#003262' // 涟漪的颜色，默认为散点的颜色。
 	},
 	label: {
 		normal: {
 		show: true,
 		color: '#283c64',
 		position: 'top', // 显示位置
 		offset: [0, 0], // 偏移设置
 		formatter: function (params) { // 圆环显示文字
 			return params.data.name
 		},
 		fontSize: 13
 		},
 		emphasis: {
 		show: false
 		}
 	},
 	symbol: 'circle',
 	symbolSize: function (val) {
 		return 1 + val[2] * 5 // 圆环大小
 	},
 	itemStyle: {
 	 color: "#2a6fd9",
   shadowBlur: 4,
   shadowColor: "#2a6fd9",
 	},
 	data: chinaDatas.map(function (dataItem) {
 		return {
 		name: dataItem[0].name,
 		value: chinaGeoCoordMap[dataItem[0].name],
 		itemStyle: {
 			 color: "#2a6fd9",
   shadowBlur: 4,
   shadowColor: "#2a6fd9",
 		}
 		}
 	})
 	},
 	//被攻击点
 	{
 	type: 'scatter',
 	coordinateSystem: 'geo',
 	zlevel: 2,
 	label: {
 		normal: {
 		show: false,
 		position: 'right',
 		color: 'red',
 		formatter: '{b}',
 		textStyle: {
 			color: "red"
 		}
 		},
 		emphasis: {
 		show: true,
 		color: "red"
 		}
 	},
 	symbol: 'pin',
 	symbolSize: 0,
 	data: [{
 		name: '山东',
 		value: chinaGeoCoordMap['山东'].concat([10]),
 	}],
 	}
 );

 let option = {
 	tooltip: {
 		show: true,
 		trigger: 'item',
 		backgroundColor: '#2e65fd',
 		borderColor: '#FFFFCC',
 		showDelay: 0,
 		hideDelay: 0,
 		enterable: true,
 		transitionDuration: 0,
 		extraCssText: 'z-index:100',
 		formatter: function (params, ticket, callback) {
 			console.log(params)
 			// 根据业务自己拓展要显示的内容
 			var res = ''
 			var name = params.name
 			var value1 = params.value[params.seriesIndex + 3] || 0
 			var value2 = params.value[params.seriesIndex + 4] || 0
 			var value3 = params.value[params.seriesIndex + 5] || 0
 			var value4 = params.value[params.seriesIndex + 6] || 0
 			var value5 = params.value[params.seriesIndex + 7] || 0
 			var value6 = params.value[params.seriesIndex + 8] || 0
 			var value7 = params.value[params.seriesIndex + 9] || 0
 			res = "<span style='color:#fff'>" + name + '</span>' +
 					'<br/>' +
 					'<i class="icon icon-xuesheng"></i> 学生：' + value1+
 					'<br/>' +
 					'<i class="icon icon-laoshi_huaban"></i> 老师：'+value2+
 					'<br/>' +
 					'<i class="icon icon-baoanxiehui"></i> 青企协：'+value3+
 					'<br/>' +
 					'<i class="icon icon-rencaizhengce"></i> 青年企业家：'+value4+
 					'<br/>' +
 					'<i class="icon icon-investmentinstitutions"></i> 十强产业：'+value5+
 					'<br/>' +
 					'<i class="icon icon-caozuoyaoqingjiabin"></i> 峰会嘉宾：'+value6+
 					'<br/>' +
 					'<i class="icon icon-rencai"></i> 高端人才：'+value7
 			return res
 		}
 	},
 	  regions: [
   //隐藏南海
   {
   name: "南海诸岛",
   itemStyle: {
    normal: {
    borderColor: "red",
    borderWidth: 20, //设置外层边框
    opacity: 0, // 为 0 时不绘制该图形
    },
   },
   label: {
    show: false, // 隐藏文字
   },
   },
 	 ],
  backgroundColor: "rgba(0, 0, 0, 0.1)",
 	geo: {
 	map: 'china',
 	zoom: 1.2,
 	label: {
 		normal: {
 		color: '#1e2d4c'
 		},
 		emphasis: {
 		show: false
 		}
 	},
 	roam: false, // 是否允许缩放
 	  itemStyle: {
   normal: {
   //地图便框设置
   borderColor: "#003262",
   borderWidth: 11, //设置外层边框
   },
   emphasis: {
   areaColor: "#003262",
   shadowColor: "#003262",
   },
  },
 	itemStyle: {
 		normal: {
 		color: '', // 地图背景色
 		borderColor: '#5ea8ff', // 省市边界线00fcff 516a89
 		borderWidth: 1
 		},
 		emphasis: {
 			color: '#81acff' // 悬浮背景
 		}
 	}
 	},
 	series: seriesA
 }
 }
 </script>

初始化echarts就可以了

this.myEchart = echarts.init(this.$refs.myEchart);
this.myEchart.setOption(option);

到此这篇关于vue+echarts实现中国地图流动效果的文章就介绍到这了,更多相关vue+echarts中国地图内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能

随着前端技术的飞速发展,大数据时代的来临,我们在开发项目时越来越多的客户会要求我们做一个数据展示的大屏,可以直观的展示用户想要的数据,同时炫酷的界面也会深受客户的喜欢. 大屏展示其实就是一堆的图表能够让人一目了然地看到该系统下的一些基本数据信息的汇总,也会有一些实时数据刷新,信息预警之类的.笔者在之前也做过一些大屏类的数据展示,但是由于都是一些图表类的,觉得没什么可说的,加之数据也都牵扯到公司,所以没有沉淀下来什么. 最近有朋友要做一个大屏,问了自己一个问题,自己也刚好做了一个简单的大屏数据展示
vue中echarts引入中国地图的案例

如下所示: <div id="myChartChina" :style="{width: '100%', height: '500px'}"></div> mounted() { this.drawLine(); }, drawLine(){ // 基于准备好的dom,初始化echarts实例 var myChartContainer = document.getElementById('myChartChina'); var resizeM
vue+vuex+axios+echarts画一个动态更新的中国地图的方法

本文介绍了vue+vuex+axios+echarts画一个动态更新的中国地图的方法,分享给大家,具体如下: 一. 生成项目及安装插件 # 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china-map # 安装项目依赖 npm install # 安装 vuex npm install vuex --save # 安装 axios npm install axios --save
vue+echarts实现中国地图流动效果(步骤详解)

@vue+echarts实现中国地图流动效果 #话不多说看效果图操作步骤: 执行命令:npm run echarts -s 并回车看到这样的提示代表安装成功 PS:网络不好的情况建议用cnpm淘宝镜像(全局终端执行命令:npm i -g cnpm --registry=https://registry.npm.taobao.org) 下载china.js 链接: https://pan.baidu.com/s/1EODVh9tJNEbFebbrhKyd_Q 提取码: gjz4 引入 impo
Vue+ECharts实现中国地图的绘制及各省份自动轮播高亮显示

目录实现效果完整代码+详细注释要点小结实现效果完整代码+详细注释 <template> <div class="echart"> <div class="content"> <div id="map_cn"></div> </div> </div> </template> <script> import echarts from
Vue echarts实例项目商家销量统计图实现详解

目录组件结构设计发送请求获取对应的数据并进行相应操作当窗口尺寸发生变化时的操作总体效果如图组件结构设计 SellerPage.vue  <template> <div class="comP1"> <Seller></Seller> </div> </template> <script> import Selle
vue项目添加多页面配置的步骤详解

公司使用 vue-cli 创建的 vue项目在初始化时并没有做多页面配置,随着需求的不断增加,发现有必要使用多页面配置.看了很多 vue多页面配置的文章,基本都是在初始化时就配置了多页面.而且如果使用这些实现,需要调整当前项目的目录结构,这点也是不能接受的. 最后,参考这些文章,在不调整当前项目目录结构实现了多页面的配置的添加.这里做下记录.总结,方便以后复用.如果还能有幸帮助到有同样需求的童鞋的话,那就更好了. 实现步骤 1.添加新增入口相关文件; 2.使用变量维护多入口: 3.开发环境读
vue项目中使用tinymce编辑器的步骤详解

Tinymce富文本也是一款很流行编辑器把文件放在static下,然后在index.html文件中引入这个文件 <script src="static/tinymce/tinymce.min.js"></script> <tinymce :height=200 ref="editor" v-model="editForm.fdcNote"></tinymce> 在其他子文件中引入这个 import
Matlab绘制中国地图超全教程详解

目录各省边界线绘图省份填色图中国公路交通图中国铁路交通图中国河流图组合美化图美化图一美化图二依旧需要用到Mapping Toolbox不会安装的可以看我上一篇虽然我们只读取shp文件,但需要保证文件夹里还有shx文件及dbf文件各省边界线绘图 provinces=shaperead('bou2_4l.shp','UseGeoCoords',true); % 绘图 worldmap('China'); geoshow(provinces) 省份填色图 provinces=sh
Vue源码之rollup环境搭建步骤详解

目录搭建环境建立rollup配置文件创建入口文件打包前准备打包测试一下搭建环境第一步进行初始化,在终端输入npm init -y生成package.json文件,可以记住所有开发相关的依赖. 第二步 --在终端输,入安装依赖 npm install rollup rollup-plugin-babel @babel/core @babel/preset-env --save-dev 注: 安装rollup打包工具,可能需要编译高级语法所以需要安装babel,安装babel需要在
vue实现书本翻页动画效果实例详解

偶然兴起,想要用vue来做一个书本的组件,有了这个想法后边开始动手,先简单地实现基本的效果,为后续封装为组件进行准备工作,实现该效果的要使用vue + css + JavaScript. 关键字 transform Transform属性应用于元素的2D或3D转换.这个属性允许你将元素旋转,缩放,移动,倾斜等. 语法为transform: none|*transform-functions*; 我们主要使用到其旋转效果,我们可以这样写. transform: rotateY(90deg) //表
vue 使用 echarts 绘制中国地图的实现代码

1. 插入echarts 所需模块 import echarts from "echarts"; import 'echarts/map/js/china' // 使用中国地图需把China.js文件引入 2. 正式代码部分 //初始化echarts实例通过传参获取要放置的id名称 var myChart = echarts.init(document.getElementById("容器的id名称")); // 指定图表的配置项和数据 var optionMap
vue使用echarts实现中国地图和点击省份进行查看功能

目录 1,实现的效果和功能 2,安装ECharts 1.1 地图数据的位置 1.2 还可以自己下载这些地图数据 3,main.js里面引入echarts 4,实现如下 5,遇到的问题 5.1 渲染中国地图时警告地图不存在: 5,2 点击tooltip提示框中的详情生产省份地图失败,警告如下: 6,用到的模拟数据 1,实现的效果和功能 vue使用echarts实现中国地图和点击省份进行查看:下面是效果图:主要实现的功能如下:1,第一张是实现中国地图,点击任意省份能够显示tooltip提示框 :2

vue+echarts实现中国地图流动效果(步骤详解)

相关推荐

随机推荐