1.通过阿里的datav:https://datav.aliyun.com/portal/school/atlas/area_generator#8.82/119.751701/28.967880
或者 https://hxkj.vip/demo/echartsMap/ 下载对应边界数据的.geoJson文件数据
2.引入
const uploadedDataURL = '/wyx.geoJson'
注意:
vue-cli3.0用axios加载本地json数据需要先将静态文件放在public文件夹中,把路径换成本地服务地址 + public + 文件名,不然通过axios获取数据404
获取到的数据结构如下图:
效果图:
完整代码如下图:
<template>
<div ref="about" id="main" class="about" style="height:100vh;width:100%;">
</div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
import axios from 'axios'
const uploadedDataURL = '/wyx.geoJson'
const about = ref(null)
// console.log(about)
const getChart = () => {
let data = []
axios.get(uploadedDataURL).then(json => {
console.log(json)
const myChart = echarts.init(about.value)
echarts.registerMap('金华', json.data)
data = json.data.features.map((item) => { // 显示窗口的数据转换
return {
value: (Math.random() * 1000).toFixed(2),
name: item.properties.name
}
})
myChart.setOption({
backgroundColor: '#404a59', // 背景
tooltip: { // 窗口外框
backgroundColor: 'rgba(0,0,0,0)',
trigger: 'item'
},
title: {
show: true,
x: 'center',
text: '金华市行政区域图',
textStyle: {
color: '#2980b9',
fontSize: 16
}
},
legend: {
show: false
},
series: [{
tooltip: { // 显示的窗口
trigger: 'item'
},
name: '',
type: 'map',
map: '金华', // 自定义扩展图表类型
zoom: 0.65, // 缩放
showLegendSymbol: true,
label: { // 文字
show: true,
color: '#fff',
fontSize: 15,
formatter: (params) => {
return params.name
}
},
itemStyle: { // 地图样式
borderColor: 'rgba(147, 235, 248, 1)',
borderWidth: 1,
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [{
offset: 0,
color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
shadowColor: 'rgba(128, 217, 248, 1)',
// shadowColor: 'rgba(255, 255, 255, 1)',
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10
},
emphasis: { // 鼠标移入动态的时候显示的默认样式
itemStyle: {
areaColor: '#FFD181',
borderColor: '#404a59',
borderWidth: 1
}
},
layoutCenter: ['45%', '45%'],
layoutSize: '100%',
markPoint: {
symbol: 'none'
},
data: data
}]
}
)
})
}
onMounted(() => {
getChart()
})
</script>