xCharts 地图 opts.extra.map

以下是在 xCharts 中配置地图 opts.extra.map 的属性列表：

属性名	类型	默认值	说明
border	Boolean	true	是否绘制区域分割线
mercator	Boolean	false	是否进行 WGS84 转墨卡托投影
borderWidth	Number	2	分割线宽度
borderColor	Color	#666666	分割线颜色
fillOpacity	Number	0.6	区域内填充透明度
active	Boolean	true	是否启用点击激活变色
activeTextColor	Color	#FFFFFF	点击激活时文字颜色
activeBorderColor	Color	#F04864	点击激活时分割线颜色
activeFillColor	Color	#FACC14	点击激活时填充颜色
activeFillOpacity	Number	1	点击激活时填充透明度

新版项目中的实际写法

xcharts/map/map.uvue:12 同样默认走接口加载示例数据，但地图是最典型的“大体量本地配置”场景，因为 xcharts/map/index.uts 中包含大量 GeoJSON 坐标数据。

所以这里更应该在文档里明确说明：

• 地图能力本身支持本地配置
• 示例页走接口只是因为地图坐标数据非常大，直接长期放在演示工程里会明显增加包体和编译内存压力
• 文档里可以节选结构说明，不必把整份坐标数据全部展开

本地配置示例

xcharts/map/index.uts:1 的地图示例本质结构如下：

export default [
	{
		name: '地图',
		option: {
			animation: true,
			dataLabel: true,
			extra: {
				map: {
					activeBorderColor: '#F04864',
					activeFillColor: '#FACC14',
					activeFillOpacity: 1,
					border: true,
					borderColor: '#666666',
					borderWidth: 1,
					fillOpacity: 0.6
				},
				tooltip: {}
			},
			series: [
				{
					geometry: {
						type: 'Feature',
						coordinates: [/* 大量 GeoJSON 坐标数据 */]
					},
					name: '区域名称'
				}
			],
			type: 'map'
		}
	}
]

文档里建议重点说明结构，而不是把几万行坐标全部贴出来。

页面初始化示例

import opts from './index.uts'

function initFinished(e : ITuiCharts) {
	charts = e
	opts.forEach((item : UTSJSONObject, index : number) => {
		const chart = e.add(index, item.getJSON('option')!)
		chart.setCoordinates({ height: 287, xOffset: 0, yOffset: itemH * index })
		chart.draw()
	})
}

常见用法归纳

结合 xcharts/map/index.uts，地图图表主要覆盖这些能力：

• 区域边界绘制
• 点击激活高亮
• 区域填充透明度控制
• GeoJSON 区域数据渲染

核心配置主要集中在：

• extra.map.border
• extra.map.fillOpacity
• extra.map.active*
• series[].geometry
• mercator

动态更新示例

xcharts/map/map.uvue:33 里保留了统一的 update 演示结构，但地图类图表在实际业务里更常见的是：

• 切换整份区域数据
• 更新某些区域的颜色与激活状态
• 切换不同地图层级

如果地图数据体积很大，推荐像示例工程一样把数据放在接口侧，文档则专注讲清配置结构和字段含义。