@rainbow-d9/echarts

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