<dy-area-chart>
Example
Loading...
<dy-area-chart
style=${"width: 100%;"}
.fill=${true}
.aspectRatio=${4}
.smooth=${true}
.chartZoom=${true}
.yMax=${10}
.xAxi=${{"formatter": (value) => value.toFixed(2)}}
.yAxi=${{"formatter": (value) => value.toFixed(1)}}
@zoom=${(e) => e.target.range = e.detail}
.sequences=${ [ { "label": "Label", "values": [ [10,3], [15,3], [20,5], [25,4], [30,8], [35,5], [40,4], [45,5], [50,1], [55,3], [60,8], [65,5], [70,6] ] } ] }></dy-area-chart>
API
DuoyunAreaChartElement
Extends DuoyunChartBaseElement
DuoyunAreaChartElement Instance Properties
| Property(Attribute) | Reactive | Type | Description |
|---|---|---|---|
fill |
Yes | boolean |
|
stroke |
Yes | boolean |
|
stack |
Yes | boolean |
|
symbol |
Yes | boolean |
|
symbolRender |
Yes | ({ point, color, isHover, chart }: SymbolRenderOptions) => TemplateResult |
|
chartzoom |
Yes | boolean |
@deprecated |
chartZoom |
Yes | boolean |
|
range |
Yes | number[] |
|
smooth |
Yes | boolean |
|
gradient |
Yes | boolean |
|
sequences |
Yes | Sequence[] |
|
zoom |
Emitter |
DuoyunAreaChartElement Other
| Type | Value |
|---|---|
| Event | zoom |
DuoyunChartBaseElement
Shadow DOM; Extends DuoyunResizeBaseElement
DuoyunChartBaseElement Instance Properties
| Property(Attribute) | Reactive | Type |
|---|---|---|
aspectRatio |
Yes | number |
filters |
Yes | string[] |
colors |
Yes | ``#${string}[] |
xAxi |
Yes | Axi | null |
yAxi |
Yes | Axi | null |
pAxi |
Yes | Axi | null |
yMin |
Yes | number |
yMax |
Yes | number |
xStep |
Yes | number |
yStep |
Yes | number |
pStep |
Yes | number |
tooltip |
Yes | Tooltip |
markLines |
Yes | MarkLine[] |
indexclick |
Emitter<number> |
|
genGradientId |
(index: number) => string |
DuoyunChartBaseElement Other
| Type | Value |
|---|---|
| Event | indexclick |
| Part | chart |
| CSS State | loading, no-data |
TapResizeBaseElement
Extends GemElement
TapResizeBaseElement Instance Properties
| Property(Attribute) | Reactive | Type |
|---|---|---|
resize |
Emitter<ResizeDetail> |
|
resizeThrottle |
Yes | boolean |
borderBoxSize |
{ blockSize: number; inlineSize: number; } |
|
contentRect |
{ x: number; y: number; height: number; width: number; } |
TapResizeBaseElement Other
| Type | Value |
|---|---|
| Event | resize |