57 lines
1002 B
Vue
57 lines
1002 B
Vue
|
<script setup lang="ts">
|
||
|
|
// 引入 vue-echarts 组件
|
||
|
|
import VChart from 'vue-echarts'
|
||
|
|
|
||
|
|
import { registerMap, use } from 'echarts/core'
|
||
|
|
import { EffectScatterChart, ScatterChart } from 'echarts/charts'
|
||
|
|
import {
|
||
|
|
GeoComponent,
|
||
|
|
LegendComponent,
|
||
|
|
TitleComponent,
|
||
|
|
TooltipComponent,
|
||
|
|
} from 'echarts/components'
|
||
|
|
import chinaMap from '../china.json'
|
||
|
|
|
||
|
|
const props = defineProps<{
|
||
|
|
data: {
|
||
|
|
value: number
|
||
|
|
name: string
|
||
|
|
}[]
|
||
|
|
}>()
|
||
|
|
|
||
|
|
use([
|
||
|
|
ScatterChart,
|
||
|
|
EffectScatterChart,
|
||
|
|
GeoComponent,
|
||
|
|
TitleComponent,
|
||
|
|
LegendComponent,
|
||
|
|
TooltipComponent,
|
||
|
|
])
|
||
|
|
|
||
|
|
const colorMode = useColorMode()
|
||
|
|
|
||
|
|
registerMap('china', chinaMap)
|
||
|
|
|
||
|
|
const option = shallowRef(getData())
|
||
|
|
const map = shallowRef(null)
|
||
|
|
const open = shallowRef(false)
|
||
|
|
|
||
|
|
const img = null
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<ClientOnly fallback-tag="div" fallback="Loading comments...">
|
||
|
|
<VChart
|
||
|
|
ref="map" autoresize
|
||
|
|
class="chart" :option="option"
|
||
|
|
/>
|
||
|
|
</ClientOnly>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.chart {
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
</style>
|