一、實(shí)現(xiàn)效果
- 使用echarts實(shí)現(xiàn)省市地圖繪制，你也可以繪制全國(guó)地圖。
- 根據(jù)數(shù)據(jù)在地圖顯示柱狀圖，根據(jù)經(jīng)緯度實(shí)現(xiàn)定位。
- 根據(jù)數(shù)據(jù)顯示數(shù)據(jù)，漣漪動(dòng)態(tài)效果。
- 當(dāng)然你也可以根據(jù)你自己的需求，增刪效果哦。
二、實(shí)現(xiàn)方法
1、安裝echarts插件
npm install echarts --save
2、獲取省市json數(shù)據(jù)
https://datav.aliyun.com/portal/school/atlas/area_selector
通過(guò) 阿里旗下的高德地圖提供的api ，可以獲取到中國(guó)各個(gè)省份/區(qū)級(jí)/縣級(jí)的json數(shù)據(jù)，但是區(qū)級(jí)和縣級(jí)，并沒(méi)有包含街道和鄉(xiāng)鎮(zhèn)的數(shù)據(jù)。
3、本例中data 數(shù)據(jù)
本文以吉林省地圖為例，來(lái)實(shí)現(xiàn)吉林省下所有市的柱狀圖顯示效果。
你也可以顯示中國(guó)地圖或其他身份地圖。原理是一樣的哦。
- 定義一個(gè)容器map，最好是定義一個(gè)是ID名字的
<template>
<div class="map" id="map"></div>
</template>
- 導(dǎo)入插件及吉林省數(shù)據(jù)，如果你是其他省份的，或全國(guó)的，一樣的導(dǎo)入哦。
import * as echarts from "echarts";
import jilin from "./json/jilin.json";
- 準(zhǔn)備數(shù)據(jù)數(shù)據(jù)
后面這些數(shù)據(jù)是通過(guò)接口來(lái)獲取的，本示例寫的是靜態(tài)測(cè)試數(shù)據(jù)，我這里是前端提前查詢號(hào)的。你也可以自己查詢。
經(jīng)緯度查詢定位
export default {
data() {
return {
//城市坐標(biāo)數(shù)據(jù)
geoCoordMap: {
"長(zhǎng)春市": [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],
},
//吉林省下所有市的測(cè)試數(shù)據(jù)
testData: [
{
name: '長(zhǎng)春市',
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：地理坐標(biāo)系組件。用于地圖的繪制，支持在地理坐標(biāo)系上繪制散點(diǎn)圖，線集。geo 區(qū)域的顏色也可以被 map series 所控制。
ECharts 可以使用 GeoJSON 格式的數(shù)據(jù)作為地圖的輪廓，你可以獲取第三方的 GeoJSON 數(shù)據(jù)注冊(cè)到 ECharts 中。
geo: [
{
map: 'jilin',
zoom: 1.2, // 默認(rèn)顯示級(jí)別
itemStyle: { //設(shè)置地圖板塊配置選項(xiàng)
normal: {
// 圖形的描邊顏色
borderColor: '#55aaff',
// 描邊線寬。
borderWidth: 1,
// 柱條的描邊類型。
borderType: 'solid',
areaColor: '#083D7E',
},
// // 鼠標(biāo)放上去后，樣式改變
emphasis: {
// 圖形的描邊顏色
borderColor: '#1DF9FC',
borderWidth: '2',
// 陰影色
areaColor: '#3099E2',
},
},
label: {
show: false,
formatter: '',
},
},
],
geo屬性說(shuō)明：
- map：使用 registerMap 注冊(cè)的地圖名稱。
- zoom：當(dāng)前視角的縮放比例。
- itemStyle：地圖區(qū)域的多邊形 圖形樣式。
- emphasis：高亮狀態(tài)下的多邊形和標(biāo)簽樣式。
- label：圖形上的文本標(biāo)簽，可用于說(shuō)明圖形的一些數(shù)據(jù)信息，比如值，名稱等。
5、柱狀圖樣式
柱狀圖是利用3個(gè)樣式層疊實(shí)現(xiàn)的。
1、頂部橢圓樣式：type: ‘lines’
2、中部矩形樣式：type: ‘scatter’
3、底部橢圓樣式：type: ‘scatter’
type: 'lines',
zlevel: 5,
effect: {
show: false,
symbolSize: 5 // 圖標(biāo)大小
},
lineStyle: {
width: 20, // 尾跡線條寬度
color: 'rgb(22,255,255, .6)',
opacity: 1, // 尾跡線條透明度
curveness: 0 // 尾跡線條曲直度
},
6、設(shè)置柱狀底部漣漪特效樣式
帶有漣漪特效動(dòng)畫的散點(diǎn)（氣泡）圖。利用動(dòng)畫特效可以將某些想要突出的數(shù)據(jù)進(jìn)行視覺(jué)突出。
漣漪特效相關(guān)配置見(jiàn)下方代碼注釋。
type: 'effectScatter',
rippleEffect: { //漣漪特效相關(guān)配置
period: 4, //動(dòng)畫的周期，秒數(shù)，值越小速度越快
brushType: "stroke", //波紋的繪制方式，可選 'stroke' 和 'fill'
scale: 2, //動(dòng)畫中波紋的最大縮放比例，值越大波紋越大 4
color: 'rgb(22,255,255, 1)',//漣漪的顏色
number: 2//波紋的數(shù)量
},
7、數(shù)據(jù)處理
根據(jù)接口數(shù)據(jù)，及經(jīng)緯度坐標(biāo)處理數(shù)據(jù)。
- 動(dòng)態(tài)計(jì)算柱形圖的高度
lineMaxHeight() {
const maxValue = Math.max(...this.testData.map(item => item.value))
return 0.9 / maxValue
},
- 柱狀體的主干數(shù)據(jù)
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]
}
})
},
三、示例代碼已上傳，去頂部可下載
附全部代碼文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-774630.html
<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: {
"長(zhǎng)春市": [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: '長(zhǎng)春市',
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, // 默認(rèn)顯示級(jí)別
itemStyle: { //設(shè)置地圖板塊配置選項(xiàng)
normal: {
// 圖形的描邊顏色
borderColor: '#55aaff',
// 描邊線寬。
borderWidth: 1,
// 柱條的描邊類型。
borderType: 'solid',
areaColor: '#083D7E',
},
// // 鼠標(biāo)放上去后，樣式改變
emphasis: {
// 圖形的描邊顏色
borderColor: '#1DF9FC',
borderWidth: '2',
// 陰影色
areaColor: '#3099E2',
},
},
label: {
show: false,
formatter: '',
},
},
],
series: [
// 柱狀體的主干
{
type: 'lines',
zlevel: 5,
effect: {
show: false,
symbolSize: 5 // 圖標(biāo)大小
},
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 `數(shù)值：${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: '',
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: { //漣漪特效相關(guān)配置
period: 4, //動(dòng)畫的周期，秒數(shù)，值越小速度越快
brushType: "stroke", //波紋的繪制方式，可選 'stroke' 和 'fill'
scale: 2, //動(dòng)畫中波紋的最大縮放比例，值越大波紋越大 4
color: 'rgb(22,255,255, 1)',//漣漪的顏色
number: 2//波紋的數(shù)量
},
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)
},
// 動(dòng)態(tài)計(jì)算柱形圖的高度
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>
四、效果展示
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-774630.html
到了這里，關(guān)于vue中使用echarts實(shí)現(xiàn)省市地圖繪制，根據(jù)數(shù)據(jù)在地圖上顯示柱狀圖信息，增加漣漪特效動(dòng)畫效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
