vue中使用echarts实现省市地图绘制，根据数据在地图上显示柱状图信息，增加涟漪特效动画效果

2023-12-20 14:15
文章标签 javascript 数据 实现 使用 显示 特效 vue 效果 绘制 信息 省市 地图 frontend 动画 增加 echarts 柱状图 涟漪

本文主要是介绍vue中使用echarts实现省市地图绘制，根据数据在地图上显示柱状图信息，增加涟漪特效动画效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在这里插入图片描述

一、实现效果
  • 使用echarts实现省市地图绘制
  • 根据数据在地图显示柱状图
  • 根据数据显示数据，涟漪效果
二、实现方法
1、安装echarts插件
npm install echarts --save
2、获取省市json数据

https://datav.aliyun.com/portal/school/atlas/area_selector

通过 阿里旗下的高德地图提供的api ，可以获取到中国各个省份/区级/县级的json数据，但是区级和县级，并没有包含街道和乡镇的数据。

3、本例中data 数据

本文以吉林省地图为例，来实现吉林省下所有市的柱状图显示效果。
你也可以显示中国地图或其他身份地图。原理是一样的哦。

  • 定义一个容器map
<template><div class="map" id="map"></div>
</template>
  • 导入插件及吉林省数据
import * as echarts from "echarts";
import jilin from "./json/jilin.json";
  • 准备数据数据

后面这些数据是通过接口来获取的，本示例写的是静态测试数据

export default {data() {return {//城市坐标数据geoCoordMap: {"长春市": [125.31787, 44.05534],"吉林市": [126.68595, 43.85034],"通化市": [125.76539, 41.68568],"四平市": [124.02419, 43.48220],"白山市": [127.15109, 42.00513],"辽源市": [125.15042, 42.89406],"白城市": [122.83774, 45.07098],"延边朝鲜族自治州": [129.01009, 42.79950],"松原市": [124.55833, 44.94686],},//吉林省下所有市的测试数据testData: [{name: '长春市',value: '80',},{name: '吉林市',value: '70',},{name: '通化市',value: '60',},{name: '四平市',value: '50',},{name: '白山市',value: '90',},{name: '辽源市',value: '30',},{name: '白城市',value: '40',},{name: '延边朝鲜族自治州',value: '30',},{name: '松原市',value: '20',}]};},
}
4、吉林省地图的绘制

geo：地理坐标系组件。用于地图的绘制，支持在地理坐标系上绘制散点图，线集。geo 区域的颜色也可以被 map series 所控制。

ECharts 可以使用 GeoJSON 格式的数据作为地图的轮廓，你可以获取第三方的 GeoJSON 数据注册到 ECharts 中。

geo: [{map: 'jilin',zoom: 1.2, // 默认显示级别itemStyle: { //设置地图板块配置选项normal: {// 图形的描边颜色borderColor: '#55aaff',// 描边线宽。borderWidth: 1,// 柱条的描边类型。borderType: 'solid',areaColor: '#083D7E',},// // 鼠标放上去后，样式改变emphasis: {// 图形的描边颜色borderColor: '#1DF9FC',borderWidth: '2',// 阴影色areaColor: '#3099E2',},},label: {show: false,formatter: '',},},
],

geo属性说明：

  • map：使用 registerMap 注册的地图名称。
  • zoom：当前视角的缩放比例。
  • itemStyle：地图区域的多边形 图形样式。
  • emphasis：高亮状态下的多边形和标签样式。
  • label：图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
5、柱状图样式

柱状图是利用3个样式层叠实现的。
1、顶部椭圆样式：type: ‘lines’
2、中部矩形样式：type: ‘scatter’
3、底部椭圆样式：type: ‘scatter’

type: 'lines',
zlevel: 5,
effect: {show: false,symbolSize: 5 // 图标大小
},
lineStyle: {width: 20, // 尾迹线条宽度color: 'rgb(22,255,255, .6)',opacity: 1, // 尾迹线条透明度curveness: 0 // 尾迹线条曲直度
},
6、设置柱状底部涟漪特效样式

带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出。

涟漪特效相关配置见下方代码注释。

type: 'effectScatter',
rippleEffect: { //涟漪特效相关配置period: 4, //动画的周期，秒数，值越小速度越快brushType: "stroke", //波纹的绘制方式，可选 'stroke' 和 'fill'scale: 2, //动画中波纹的最大缩放比例，值越大波纹越大 4color: 'rgb(22,255,255, 1)',//涟漪的颜色number: 2//波纹的数量
},
7、数据处理

根据接口数据，及经纬度坐标处理数据。

  • 动态计算柱形图的高度
lineMaxHeight() {const maxValue = Math.max(...this.testData.map(item => item.value))return 0.9 / maxValue
},
  • 柱状体的主干数据
lineData() {let {testData,geoCoordMap} = thisreturn testData.map((item) => {return {coords: [geoCoordMap[item.name], [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * this.lineMaxHeight()]]}})
},
  • 柱状体的顶部
scatterTopData() {let {testData,geoCoordMap} = thisreturn testData.map((item) => {return [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * this.lineMaxHeight(), item.value]})
},
  • 柱状体的底部
scatterBottomData() {let {testData,geoCoordMap} = thisreturn testData.map((item) => {return {name: item.name,value: geoCoordMap[item.name]}})
},
8、示例代码已上传，去顶部可下载

附全部代码

<template><div class="map" id="map"></div>
</template><script>
import * as echarts from "echarts";
import jilin from "@/json/jilin.json";
export default {data() {return {geoCoordMap: {"长春市": [125.31787, 44.05534],"吉林市": [126.68595, 43.85034],"通化市": [125.76539, 41.68568],"四平市": [124.02419, 43.48220],"白山市": [127.15109, 42.00513],"辽源市": [125.15042, 42.89406],"白城市": [122.83774, 45.07098],"延边朝鲜族自治州": [129.01009, 42.79950],"松原市": [124.55833, 44.94686],},testData: [{name: '长春市',value: '80',},{name: '吉林市',value: '70',},{name: '通化市',value: '60',},{name: '四平市',value: '50',},{name: '白山市',value: '90',},{name: '辽源市',value: '30',},{name: '白城市',value: '40',},{name: '延边朝鲜族自治州',value: '30',},{name: '松原市',value: '20',}]};},created() {},mounted() {this.drawMap()},methods: {drawMap() {// 判断地图是否渲染let myChart = echarts.getInstanceByDom(document.getElementById("map"))// 如果渲染则清空地图 if (myChart != null) {myChart.dispose()}// 初始化地图myChart = echarts.init(document.getElementById("map"));echarts.registerMap("jilin", jilin)var option = {geo: [{map: 'jilin',zoom: 1.2, // 默认显示级别itemStyle: { //设置地图板块配置选项normal: {// 图形的描边颜色borderColor: '#55aaff',// 描边线宽。borderWidth: 1,// 柱条的描边类型。borderType: 'solid',areaColor: '#083D7E',},// // 鼠标放上去后，样式改变emphasis: {// 图形的描边颜色borderColor: '#1DF9FC',borderWidth: '2',// 阴影色areaColor: '#3099E2',},},label: {show: false,formatter: '',},},],series: [// 柱状体的主干{type: 'lines',zlevel: 5,effect: {show: false,symbolSize: 5 // 图标大小},lineStyle: {width: 20, // 尾迹线条宽度color: 'rgb(22,255,255, .6)',opacity: 1, // 尾迹线条透明度curveness: 0 // 尾迹线条曲直度},silent: true,data: this.lineData()},// 柱状体的顶部{type: 'scatter',coordinateSystem: 'geo',geoIndex: 0,zlevel: 5,label: {show: true,formatter: function (e) {return `数值：${e.data[2]}`},position: "top"},symbol: 'circle',symbolSize: [20, 10],itemStyle: {color: 'rgb(22,255,255, 1)',opacity: 1},silent: true,data: this.scatterTopData()},// 柱状体的底部{type: 'scatter',coordinateSystem: 'geo',geoIndex: 0,zlevel: 4,label: {// 这儿是处理的formatter: '{b}',position: 'bottom',color: '#fff',fontSize: 12,distance: 10,show: true},symbol: 'circle',symbolSize: [20, 10],itemStyle: {// color: '#F7AF21',color: 'rgb(22,255,255, 1)',opacity: 1},silent: true,data: this.scatterBottomData()},// 底部外框{type: 'effectScatter',rippleEffect: { //涟漪特效相关配置period: 4, //动画的周期，秒数，值越小速度越快brushType: "stroke", //波纹的绘制方式，可选 'stroke' 和 'fill'scale: 2, //动画中波纹的最大缩放比例，值越大波纹越大 4color: 'rgb(22,255,255, 1)',//涟漪的颜色number: 2//波纹的数量},coordinateSystem: 'geo',geoIndex: 0,zlevel: 4,label: {show: false},symbol: 'circle',symbolSize: [40, 20],itemStyle: {color: {type: 'radial',x: 0.5,y: 0.5,r: 0.5,colorStops: [{offset: 0, color: 'rgb(22,255,255, 0)' // 0% 处的颜色},{offset: .74, color: 'rgb(22,255,255, 0)' // 100% 处的颜色},{offset: .75, color: 'rgb(22,255,255, 1)' // 100% 处的颜色},{offset: 1, color: 'rgb(22,255,255, 1)' // 100% 处的颜色}],},},data: this.scatterBottomData()}]}myChart.setOption(option)},// 动态计算柱形图的高度lineMaxHeight() {const maxValue = Math.max(...this.testData.map(item => item.value))return 0.9 / maxValue},// 柱状体的主干lineData() {let {testData,geoCoordMap} = thisreturn testData.map((item) => {return {coords: [geoCoordMap[item.name], [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * this.lineMaxHeight()]]}})},// 柱状体的顶部scatterTopData() {let {testData,geoCoordMap} = thisreturn testData.map((item) => {return [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * this.lineMaxHeight(), item.value]})},// 柱状体的底部scatterBottomData() {let {testData,geoCoordMap} = thisreturn testData.map((item) => {return {name: item.name,value: geoCoordMap[item.name]}})},},
}
</script><style scoped>
.map {width: 800px;height: 600px;position: relative;
}
</style>
9、效果图

在这里插入图片描述

这篇关于vue中使用echarts实现省市地图绘制，根据数据在地图上显示柱状图信息，增加涟漪特效动画效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/516338。

相关文章

golang版本升级如何实现

golang版本升级如何实现

《golang版本升级如何实现》：本文主要介绍golang版本升级如何实现问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录golanwww.chinasem.cng版本升级linux上golang版本升级删除golang旧版本安装golang最新版本总结gola
阅读更多...
SpringBoot中SM2公钥加密、私钥解密的实现示例详解

SpringBoot中SM2公钥加密、私钥解密的实现示例详解

《SpringBoot中SM2公钥加密、私钥解密的实现示例详解》本文介绍了如何在SpringBoot项目中实现SM2公钥加密和私钥解密的功能,通过使用Hutool库和BouncyCastle依赖,简化... 目录一、前言1、加密信息(示例)2、加密结果(示例)二、实现代码1、yml文件配置2、创建SM2工具
阅读更多...
Mysql实现范围分区表(新增、删除、重组、查看)

Mysql实现范围分区表(新增、删除、重组、查看)

《Mysql实现范围分区表(新增、删除、重组、查看)》MySQL分区表的四种类型（范围、哈希、列表、键值）,主要介绍了范围分区的创建、查询、添加、删除及重组织操作,具有一定的参考价值,感兴趣的可以了解... 目录一、mysql分区表分类二、范围分区（Range Partitioning1、新建分区表：2、分
阅读更多...
MySQL 定时新增分区的实现示例

MySQL 定时新增分区的实现示例

《MySQL定时新增分区的实现示例》本文主要介绍了通过存储过程和定时任务实现MySQL分区的自动创建,解决大数据量下手动维护的繁琐问题,具有一定的参考价值,感兴趣的可以了解一下... mysql创建好分区之后，有时候会需要自动创建分区。比如，一些表数据量非常大，有些数据是热点数据，按照日期分区MululbU
阅读更多...
Spring IoC 容器的使用详解(最新整理)

Spring IoC 容器的使用详解(最新整理)

《SpringIoC容器的使用详解(最新整理)》文章介绍了Spring框架中的应用分层思想与IoC容器原理,通过分层解耦业务逻辑、数据访问等模块,IoC容器利用@Component注解管理Bean... 目录1. 应用分层2. IoC 的介绍3. IoC 容器的使用3.1. bean 的存储3.2. 方法注
阅读更多...
MySQL 删除数据详解(最新整理)

MySQL 删除数据详解(最新整理)

《MySQL删除数据详解(最新整理)》：本文主要介绍MySQL删除数据的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、前言二、mysql 中的三种删除方式1.DELETE语句✅ 基本语法： 示例：2.TRUNCATE语句✅ 基本语
阅读更多...
MySQL中查找重复值的实现

MySQL中查找重复值的实现

《MySQL中查找重复值的实现》查找重复值是一项常见需求,比如在数据清理、数据分析、数据质量检查等场景下,我们常常需要找出表中某列或多列的重复值,具有一定的参考价值,感兴趣的可以了解一下... 目录技术背景实现步骤方法一：使用GROUP BY和HAVING子句方法二：仅返回重复值方法三：返回完整记录方法四：
阅读更多...
Python内置函数之classmethod函数使用详解

Python内置函数之classmethod函数使用详解

《Python内置函数之classmethod函数使用详解》：本文主要介绍Python内置函数之classmethod函数使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录1. 类方法定义与基本语法2. 类方法 vs 实例方法 vs 静态方法3. 核心特性与用法(1编程客
阅读更多...
IDEA中新建/切换Git分支的实现步骤

IDEA中新建/切换Git分支的实现步骤

《IDEA中新建/切换Git分支的实现步骤》本文主要介绍了IDEA中新建/切换Git分支的实现步骤,通过菜单创建新分支并选择是否切换,创建后在Git详情或右键Checkout中切换分支,感兴趣的可以了... 前提：项目已被Git托管1、点击上方栏Git->NewBrancjsh...2、输入新的分支的
阅读更多...
Linux中压缩、网络传输与系统监控工具的使用完整指南

Linux中压缩、网络传输与系统监控工具的使用完整指南

《Linux中压缩、网络传输与系统监控工具的使用完整指南》在Linux系统管理中,压缩与传输工具是数据备份和远程协作的桥梁,而系统监控工具则是保障服务器稳定运行的眼睛,下面小编就来和大家详细介绍一下它... 目录引言一、压缩与解压：数据存储与传输的优化核心1. zip/unzip：通用压缩格式的便捷操作2.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2