安装howuse
npm i howuse
代码如下
<div style="height: 600px;">
<how-map-chart :option="option" v-if="mapVisible" :config="{ renderer: 'svg' }" :use="ScatterChart" />
</div>
<script lang="ts" setup>
import { EChartsOption } from 'echarts';
import { ScatterChart } from 'echarts/charts';
import { HowMapChart, useGeoJsonMap } from 'howuse/echarts';
import weinanJson from '@/assets/610500_full.json';
import testGif from './test.gif';
const mapVisible = ref(false) // 控制地图显示时间,等待地图注册成功再显示,防止无意义报错
const option: EChartsOption = {
color: ["red"],
title: {
text: '陕西省渭南市',
},
tooltip: {
trigger: 'item',
showDelay: 0,
transitionDuration: 0.2
},
xAxis: {
show: false,
axisLine: {
show: false,
lineStyle: {
color: 'rgba(121,121,121,0.3)',
//color:'red'
},
},
splitLine: {
show: false,
},
},
yAxis: {
type: 'category',
axisTick: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: 'rgba(121,121,121,0.3)',
//color:'red'
},
},
axisLabel: {
show: false,
},
},
geo: {
map: 'weinan',
aspectScale: 0.98,
show: true,
roam: false,
height: '100%',
label: {
show: false,
},
itemStyle: {
areaColor: '#b0c7f6',
borderColor: '#ffffff',
shadowColor: '#1773c3',
shadowBlur: 0,
},
},
series: [
{
name: 'weinan',
type: "scatter",
coordinateSystem: 'geo',
symbol: `image://${testGif}`,
symbolSize: 100,
label: {
show: true,
formatter: function (p) {
// @ts-ignore
return p.data.name;
},
},
data: [
{
name: '白水',
label: {
show: true,
},
value: [109.594309, 35.177291],
},
]
}
]
};
useGeoJsonMap({ type: 'custom', data: weinanJson, name: "weinan" }).then(() => {
mapVisible.value = true
}) // name 是必传条件
</script>
效果
https://howuse.netlify.app/#/chart
拉到页面最后