Appearance
地图使用手册
应用包：lc-zkmap 类型：高级部件
一、效果预览
二、配置说明
2.1 基础配置
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| initCode | null/数值 | null | 地图初始化加载显示哪个地区，可以是某市的代码，其中浙江省区县地图为3300，全省为33 |
| initSelect | null/数值 | null | 默认选中某一地区，可以是市或区县 |
注意
所有行政区划代码均以数值类型进行配置和使用，使用字符串类型可能会导致部分功能异常
2.2 省市本级
| 名称（base） | 类型 | 默认值 | 描述 |
|---|---|---|---|
| hide | 布尔/数组 | false | 是否隐藏本级，数组情况下code在其中时会隐藏本级，如[330000, 330101]表示不显示省本级和杭州市本级 |
| size | 数值 | 0.3 | 本级和主地图之间的比例，0.3=30% |
2.3 地图形状
| 名称（mapShape） | 类型 | 默认值 | 描述 |
|---|---|---|---|
| lift | 数值 | 0.4 | 悬浮提亮比例，悬浮时会让地图变得更白，取值范围0~1，数值越大越接近白色 |
包含多状态通用样式配置，详见下方
2.4 地图名称
| 名称（mapName） | 类型 | 默认值 | 描述 |
|---|---|---|---|
| show | 布尔 | true | 是否显示名称 |
| formatter | 函数 | d=>d | 地图名称的规整化，可批量修改 |
包含多状态通用样式配置，详见下方
2.4 地图数值
| 名称（mapValue） | 类型 | 默认值 | 描述 |
|---|---|---|---|
| show | 布尔 | true | 是否显示数值 |
| outside | 布尔 | false | 地图名称位置是否在外侧 |
| formatter | 函数 | d=>d | 地图名称的规整化，可批量修改，包含两个参数，第一个是value字段值，第二个是整个数据对象 |
包含多状态通用样式配置，详见下方
2.5 数值连线
当数值在外时显示的连线样式 包含多状态通用样式配置，详见下方
2.6 悬浮框
| 名称（tooltip） | 类型 | 默认值 | 描述 |
|---|---|---|---|
| offset | 数组 | [15, 10] | 悬浮框相对鼠标偏移量，[向右, 向下] |
2.7 市边界线
当显示地区为浙江省区县（3300）时，可配置市的边框线样式
| 名称（stroke） | 类型 | 默认值 | 描述 |
|---|---|---|---|
| show | 布尔 | true | 是否显示市边框线 |
| style.stroke | 颜色 | #000 | 边框线颜色 |
| style.lineWidth | 数值 | 2 | 边框粗细 |
2.8 填色规则
| 名称（rule） | 类型 | 默认值 | 描述 |
|---|---|---|---|
| baseColor | 颜色 | #ccc | 基础填充色,无匹配颜色时使用 |
| key | 颜色 | #000 | 用数据的哪个字段计算颜色 |
rule.categoryList：数组格式，配置多条匹配规则，定义范围和数值
| 名称（rule.categoryList的某一项） | 类型 | 默认值 | 描述 |
|---|---|---|---|
| min | 数值 | null | 该区段的最小值，null为不限制，可理解负无穷 |
| max | 数值 | null | 该区段的最大值，null为不限制，可理解正无穷 |
| color | 颜色 | 该区段对应的颜色 | |
| label | 文本 | 该区段图例的名称 | |
2.9 其他
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| blankBack | 布尔 | true | 点击空白是否能返回 |
| beforeCodeChange | 函数 | ()=>true | 地图下钻/返回前的钩子，返回false会阻止该行为 |
| beforeSelectChange | 函数 | ()=>true | 地图选中/取消选中前的钩子，返回false会阻止该行为 |
beforeCodeChange、beforeSelectChange是两个钩子函数，其会接收一个参数newCode，代表即将显示某地区地图或即将选中某地区，可以根据这个参数进行逻辑判断，以决定是否允许该操作：
js
// 限制宁波不能下钻
beforeCodeChange: (newCode)=>!(newCode == 330200)
// 限制地图为杭州或浙江
beforeCodeChange: (newCode)=>(newCode === 330100 || newCode === 33)
// 限制仅可选中西湖区和宁波市
beforeSelectChange: (newCode)=>(newCode === 330106 || newCode === 330200)注意
当配置项发生改变时，组件会自动重绘刷新
三、通用样式配置
由于底层使用zrender进行开发制作，为了保证组件的开放性，更好地提供用户配置，其本质支持了zrender支持的配置项这里面的所有配置项，其中将部分通用性较强的配置总结出来加上可视化配置，即提供了上述9个配置项。
其中状态分为三种：默认、悬浮、选中，其中选中状态优先级＞悬浮，可根据需要配置合适的样式。
四、数据
数据是一个数组格式的数据，其中包含两个必填字段：code（行政代码）、value（数值），其中code必须为数值类型，全省为33，省本级为330000，市本级为01结尾如330101。除了这两个字段，可根据业务需求添加任意字段，在formatter中均能够读到任一地区的对应的一条数据，也可以用于悬浮框里展示多条数据。
当数据发生更新时，视图会自动监听并刷新。
json
[
{"code": 33, "value": 98.1},
{"code": 330000, "value": 91.4},
{"code": 330100, "value": 98.1},
{"code": 330102, "value": 97.9},
]五、事件
select 选中地区改变 参数：properties（当前选中地区的详情，其中有adcode属性为地区行政编码）, adcode（当前地图绘制的地区编码）
六、插槽
默认插槽（直接放入，不用定义插槽名） 部件默认携带经过封装的图例组件，可以通过配置修改其样式，图例组件会自动读取地图组件的填色规则并按顺序显示图例内容，可根据需要移动该组件的位置。
悬浮框（tooltip） 需定义插槽名为tooltip并设置插槽参数名如scope，通过scope.properties可以读取到当前选中地区的属性，通过scope.data可以读取到当前选中地区的数据，自定进行字段选用和结构的拼凑、样式的定义。
插槽本身已经完成了对悬浮窗的定位，因此使用时只需配置其内容和样式即可，不用关心位置逻辑和显隐逻辑。
七、专项答疑
- 如何在tab切换时改变地图数据和填色规则？
答：地图组件本身监听了数据和配置项，当数据、配置发生更新时，组件会自动刷新视图，因此可以将响应部分内容替换成变量，当tab操作时控制这些变量值发生改变即可。