一、实现效果
- 使用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, //动画中波纹的最大缩放比例，值越大波纹越大 4
color: '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} = this
return testData.map((item) => {
return {
coords: [geoCoordMap[item.name], [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * this.lineMaxHeight()]]
}
})
},
- 柱状体的顶部
scatterTopData() {
let {testData,geoCoordMap} = this
return testData.map((item) => {
return [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * this.lineMaxHeight(), item.value]
})
},
- 柱状体的底部
scatterBottomData() {
let {testData,geoCoordMap} = this
return 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, //动画中波纹的最大缩放比例，值越大波纹越大 4
color: '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} = this
return testData.map((item) => {
return {
coords: [geoCoordMap[item.name], [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * this.lineMaxHeight()]]
}
})
},
// 柱状体的顶部
scatterTopData() {
let {testData,geoCoordMap} = this
return testData.map((item) => {
return [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * this.lineMaxHeight(), item.value]
})
},
// 柱状体的底部
scatterBottomData() {
let {testData,geoCoordMap} = this
return testData.map((item) => {
return {
name: item.name,
value: geoCoordMap[item.name]
}
})
},
},
}
</script>
<style scoped>
.map {
width: 800px;
height: 600px;
position: relative;
}
</style>
9、效果图
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/188355.html
