SxPictorialBarChart (象形柱图)

Implemented

NextUI 扩展图表。专门针对象形柱图场景优化的封装组件。

使用场景

创意数据展示
图标化柱状图
进度条可视化
信息图表制作

约束说明

Options 提供时将直接透传到 ECharts。
未提供 Options 时使用 Data/Categories 生成默认配置。
支持内置符号和 SVG 路径自定义符号。

行为说明

首次渲染初始化 ECharts 实例。
Disabled 为真时不更新图表数据。
支持符号重复填充和裁剪。

API

Parameters (参数)

状态	参数名	类型	默认值	描述
Implemented	`Data`	`object?`	`null`	数据源，数值数组或对象数组。
Implemented	`Categories`	`IEnumerable<string>?`	`null`	X 轴类别标签。
Implemented	`CategoryField`	`string?`	`null`	类别字段名（当 Data 为对象数组时）。
Implemented	`ValueField`	`string?`	`null`	值字段名（当 Data 为对象数组时）。
Implemented	`Symbol`	`string`	`"rect"`	符号类型。内置: `circle`, `rect`, `roundRect`, `triangle`, `diamond`, `pin`, `arrow`。支持 `path://` 自定义路径和 `image://` 图片。
Implemented	`SymbolSize`	`object?`	`"100%"`	符号大小，可以是数字、百分比或 `[宽, 高]` 数组。
Implemented	`SymbolRepeat`	`object?`	`false`	符号重复模式。`true`: 重复填充，`false`: 单个拉伸，数字: 固定重复次数。
Implemented	`SymbolMargin`	`object?`	`0`	重复符号之间的间隔。
Implemented	`SymbolClip`	`bool`	`true`	是否裁剪超出的符号。
Implemented	`SymbolOffset`	`object?`	`null`	符号偏移，格式为 `[x, y]`。
Implemented	`SymbolRotate`	`double?`	`null`	符号旋转角度。
Implemented	`Horizontal`	`bool`	`false`	是否水平布局。
Implemented	`BarWidth`	`object?`	`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 属性。

示例

基础象形柱图

<SxPictorialBarChart />

符号重复

<SxPictorialBarChart Data="@data"
                     Categories="@categories"
                     Symbol="circle"
                     SymbolRepeat="true"
                     SymbolSize='@(new object[] { 20, 20 })'
                     SymbolMargin="5" />

自定义 SVG 路径

<SxPictorialBarChart Symbol="path://M0,10 L10,0 L20,10 L10,20 Z"
                     SymbolClip="true" />

水平象形柱图

<SxPictorialBarChart Horizontal="true" Symbol="roundRect" />

参考设计 (References)

在 Playground 中打开 →