MapChart 地图

MapChart 地图 的基础用法、公开 API 与示例。

基础示例

示例使用本地演示数据；上传、校验和提交不会连接业务后端。

<script setup lang="ts">
import { ref, } from "vue";
import { MapChart } from "@/components/chart/map-chart";

const demoProps = { height: "360px", mapData: [{ name: "北京市", value: 80 }, { name: "上海市", value: 60 }] };
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <MapChart v-bind="demoProps"></MapChart>
    </div>
  </ClientOnly>
</template>

隐藏源代码

引入方式

import { MapChart } from "@/components/chart/map-chart";

Props

参数	说明	类型	默认值	必填
height	图表高度	string	"calc(100vh - 120px)"	否
loading	是否加载中	boolean	false	否
isEmpty	是否为空数据	boolean	false	否
colors	颜色配置	string[]	-	否
mapData	地图区域数据	MapDataItem[]	[]	否
scatterData	地图散点数据	MapScatterDataItem[]	[]	否
selectedRegion	选中区域	string	""	否
showLabels	是否显示标签	boolean	true	否
showScatter	是否显示散点	boolean	true	否

Events

事件名	说明	回调参数
renderComplete	地图渲染完成时触发。	-
regionClick	点击地图区域时触发。	region: { name: string; adcode: string; level: string }

Slots

插槽名	说明	参数
-	该组件未声明 Slots。	-

Expose

名称	说明	类型
-	该组件未声明 Expose。	-

Module API

名称	说明	类型
MapChart	导出 MapChart 供业务侧复用。	useInstall(index)

Types

MapChartProps

地图图表 Props

字段	说明	类型	默认值	必填
height	图表高度	string	-	否
loading	是否加载中	boolean	-	否
isEmpty	是否为空数据	boolean	-	否
colors	颜色配置	string[]	-	否
mapData	地图区域数据	MapDataItem[]	-	否
scatterData	地图散点数据	MapScatterDataItem[]	-	否
selectedRegion	选中区域	string	-	否
showLabels	是否显示标签	boolean	-	否
showScatter	是否显示散点	boolean	-	否

MapDataItem

地图区域数据项

字段	说明	类型	默认值	必填
name	区域名称	string	-	是
value	区域数据值	number	-	否
adcode	行政区划代码	string | number	-	否
level	区域级别	string	-	否
selected	是否选中	boolean	-	否

MapScatterDataItem

地图散点数据项

字段	说明	类型	默认值	必填
name	散点名称	string	-	是
value	经纬度与可选业务值	[number, number, number?]	-	是

API 根据当前组件源码生成；同步版本与验证记录见维护说明。