SxMapChart (地图)
- Implemented
NextUI 扩展图表。专门针对地图场景优化的封装组件。
使用场景
- 地理数据可视化
- 区域统计展示
- 销售分布图
- 人口密度图
约束说明
Options提供时将直接透传到 ECharts。- 未提供
Options时使用Data/MapName生成默认配置。 - 需要注册地图数据才能使用，参见下方注册说明。
行为说明
- 首次渲染初始化 ECharts 实例。
Disabled为真时不更新图表数据。- 支持散点图和热力图叠加。
地图数据注册
使用地图前需要先注册地图 GeoJSON 数据：
// 在 JavaScript 中注册地图
fetch('/data/china.json')
.then(response => response.json())
.then(geoJson => {
echarts.registerMap('china', geoJson);
});
常用地图资源：
- DataV.GeoAtlas - 中国各省市地图
- Natural Earth - 世界地图
API
Parameters (参数)
| 状态 | 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|---|
| Implemented | Data |
object? |
null |
数据源，包含 name 和 value 属性。 |
| Implemented | MapName |
string |
"china" |
已注册的地图名称。 |
| Implemented | NameField |
string? |
null |
地区名称字段名。 |
| Implemented | ValueField |
string? |
null |
数值字段名。 |
| Implemented | Roam |
bool |
true |
是否开启鼠标缩放和平移漫游。 |
| Implemented | ShowLabel |
bool |
false |
是否显示地区标签。 |
| Implemented | Min |
double? |
null |
视觉映射最小值。 |
| Implemented | Max |
double? |
null |
视觉映射最大值。 |
| Implemented | SeriesName |
string? |
null |
系列名称，用于图例显示。 |
| Implemented | Options (继承) |
object? |
null |
覆盖 ECharts 配置。 |
| Implemented | Disabled (继承) |
bool |
false |
禁用状态。 |
| Implemented | Id (继承) |
string? |
null |
组件的物理 Id。 |
| Implemented | Class (继承) |
string? |
null |
自定义 CSS 类名。 |
| Implemented | Style (继承) |
string? |
null |
自定义样式。 |
| Implemented | Title (继承) |
string? |
null |
HTML title 属性。 |
| Implemented | AdditionalAttributes (继承) |
IEnumerable<KeyValuePair<string, object>>? |
null |
捕获不匹配的 HTML 属性。 |
示例
基础地图
<SxMapChart MapName="china" />
带数据的地图
<SxMapChart MapName="china" Data="@mapData" />
@code {
private object[] mapData = new object[]
{
new { name = "北京", value = 100 },
new { name = "上海", value = 80 },
new { name = "广东", value = 90 }
};
}
显示标签
<SxMapChart MapName="china" ShowLabel="true" Roam="true" />