---
lang: zh
---

# MapChart - 地图

地图

## 基础用法

地图用法。

<MapChartIci style="height: 400px"/>

````vue{2}
<template>
  <MapChartIci style="height: 400px"/>
</template>
```c

## Attributes

|  参数  |                                            说明                                            |  类型  |                                                                        可选值                                                                         |                                                               默认值                                                                |
| :----: | :----------------------------------------------------------------------------------------: | :----: | :---------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------: |
| theme  |                                           主题色                                           | String |                                                                    "light"/"dark"                                                                     |                                                               "light"                                                               |
| loading  |                           图表是否处于加载状态                                          | Boolean |                                                                    true/false                                                                     |                                                               false                                                               |
|    title    |          标题相关参数，包括标题内容，字体大小，标题离容器左侧的距离，标题离容器上侧的距离。若为字符串类型，则直接显示为标题内容。left 和 top 的值可以是像 20 这样的具体像素值，也可以是像 '20%' 这样相对于容器高宽的百分比；其中 left 也可选"left"、"center"、"right" ，top 可选"top"、"middle"、"bottom"           | String/Object | text: String, fontSize: Number, left: String/Number, top: String/Number |                         { text: null, fontSize: 18, left: "center", top: "top" }                          |
|  visualMap  |                                      视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。内容包括最小值，最大值，组件离容器左侧的距离，组件离容器上侧的距离，组件两端的文本，组件选中范围中的颜色。其中 text 、color 的顺序是由数值大到小。                                         | Object  |                      min: Number, max: Number, left: String/Number, top: String/Number, text: Array, color: Array                                                                                                                                 | { min: 0, max: 100, left: "right", top: "bottom", text: ["High", "Low"], color: ["orangered", "yellow", "lightskyblue"]} |
|  layout  |                   地图布局参数，包括地图中心离容器左侧的距离，离容器上侧的距离，地图的大小。三者都不能为空，否则不生效。支持相对于屏幕宽高的百分比或者绝对的像素大小。                         | Array  |                                                                                                                                            |["50%", "50%", "100%"]|
|  adcode  |                   中国区域编码                   | String  |                                                                                                                                            |"100000"|
|  province  |                   中国省份名称，可缩写，如新疆，广西，北京。（当 province 和 adcode 同时存在时，adcode 失效）                         | String  |                                                                                                                                            |null|
| quantifiers |     数据量词单位    |     String     |                                                                         |                                                   null                                                    |
| deep |     是否开启地图下钻功能，默认为关闭状态。    |     Boolean     |         true/false          |                                                   false                                                   |
| geoUrl |     提供地图JSON资源文件的地址    |     String     |                   |                                   |             "https://per.lctx.top/geo-data"         |
|  data  |                                          数据内容                                          | Array  |                                                                                                                                                       | null |
````
