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>