@rainbow-d9/echarts v1.1.27
d9-echarts
Echarts.
Basic Chart
Attribute Name | Type | Description |
---|---|---|
initOptions | ChartInitOptions \| (() => Promise<ChartInitOptions>) | echarts init options. |
options | EChartsOption \| (() => EChartsOption) | echarts options, could include data. |
settings | SetOptionOpts \| (() => SetOptionOpts) | echarts settings. |
marker | text | Chart marker, global unique. |
mergeData | (options: EChartsOption, data: any) => Promise<EChartsOption> | merge data to options. |
loading | () => object \| [string, object] | echarts loading options. |
height | number, text | Chart height, default 300px. |
Basic Chart refreshes the chart by receiving external events ChartGlobalEventPrefix.DATA_CHANGED
. Before sending events to Basic Chart,
please ensure that the data required by the chart has been written to the model. Basic Chart obtains data through the defined model
properties and calls mergeData
to merge the data into echarts options, and then refreshes the chart.
A Sample
- Chart::Use Canvas, Default::first
- $fc
- options:
```javascript
return {
xAxis: {type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},
yAxis: {type: 'value'},
series: [{type: 'bar'}]
}
```
- merge:
```javascript
options.series[0].data = data;
return options;
```
Chart will not respond reaction repaint, to notify chart repaint, fire value changed event by root event bus.
Autonomous Chart
On top of Basic Chart, the following properties are added:
Attribute Name | Type | Description |
---|---|---|
fetchData | (options: FetchDataOptions) => Promise<any> | fetch chart data. |
fetchInterval | number | 10 seconds default. |
Autonomous Chart fetches data through fetchData
, making it self-refreshing.
A Sample
- AutChart::Refresh every 1 second::second
- $fc
- options:
```javascript
return {
legend: {top: 'bottom'},
series: [
{
name: 'Nightingale Chart', type: 'pie', radius: ['20%', '60%'], center: ['50%', '50%'], roseType: 'area',
itemStyle: { borderRadius: 8 }
}
]
}
```
- merge:
```javascript
options.series[0].data = data;
return options;
```
- fetch:
```typescript
return ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map(name => {
return { value: Math.ceil(Math.random() * 30) + 20, name };
});
```
- interval: 1
Reliant Chart
On top of Basic Chart, the following properties are added:
Attribute Name | Type | Description |
---|---|---|
fetchData | (options: FetchDataOptions) => Promise<any> | fetch chart data. |
fetchDefer | number | 1 seconds default. |
Reliant Chart fetches data through fetchData
. It depends on the data of other widgets, when the data of other widgets changes, it will be
refreshed after deferred time.
In order for the chart to listen for data changes from other widgets, a reaction needs to be defined. The markdown configuration has already
added the criteria
property to define this type of response, so you only need to add the properties that need to be listened to.
A Sample
- Dropdown::Month::third.criteria.weekOfYear
- options: 1:Jan; 2:Feb; 3:Mar; 4:Apr; 5:May; 6:Jun; 7:Jul; 8:Aug; 9:Sep; 10:Oct; 11:Nov; 12:Dec
- place: $row: 1, $col: 1, $cols: 3
- Dropdown::Gender::third.criteria.gender
- options: F:Female;M:Male
- place: $row: 2, $col: 1, $cols: 3
- RelChart::::third.data
- place: $row: 1, $rows: 2, $col: 4, $cols: 3
- options:
```javascript
return {
legend: {top: 'bottom'},
series: [
{
name: 'Nightingale Chart', type: 'pie', radius: ['20%', '60%'], center: ['50%', '50%'], roseType: 'area',
itemStyle: { borderRadius: 8 }
}
]
}
```
- merge:
```javascript
options.series[0].data = data;
return options;
```
- fetch:
```typescript
return ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map(name => {
return { value: Math.ceil(Math.random() * 30) + 20, name };
});
```
- criteria:
- on: /third.criteria.**
11 days ago
15 days ago
20 days ago
20 days ago
25 days ago
25 days ago
25 days ago
26 days ago
27 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago