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.**