2020-09-01 02:00:51 -04:00
|
|
|
## @superset-ui/plugin-chart-echarts
|
|
|
|
|
|
2020-11-05 07:59:06 -05:00
|
|
|
[](https://www.npmjs.com/package/@superset-ui/plugin-chart-echarts)
|
2020-09-01 02:00:51 -04:00
|
|
|
[](https://david-dm.org/apache-superset/superset-ui?path=packages/superset-ui-plugin-chart-echarts)
|
|
|
|
|
|
|
|
|
|
This plugin provides Echarts viz plugins for Superset:
|
2020-12-10 16:58:10 -05:00
|
|
|
|
2020-09-01 02:00:51 -04:00
|
|
|
- Timeseries Chart (combined line, area bar with support for predictive analytics)
|
|
|
|
|
- Pie Chart
|
|
|
|
|
|
|
|
|
|
### Usage
|
|
|
|
|
|
2020-12-10 16:58:10 -05:00
|
|
|
Configure `key`, which can be any `string`, and register the plugin. This `key` will be used to
|
|
|
|
|
lookup this chart throughout the app.
|
2020-09-01 02:00:51 -04:00
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
import {
|
|
|
|
|
EchartsTimeseriesChartPlugin,
|
|
|
|
|
EchartsPieChartPlugin,
|
|
|
|
|
} from '@superset-ui/plugin-chart-echarts';
|
|
|
|
|
|
2020-12-10 16:58:10 -05:00
|
|
|
new EchartsTimeseriesChartPlugin().configure({ key: 'echarts-ts' }).register();
|
|
|
|
|
new EchartsPieChartPlugin().configure({ key: 'echarts-pie' }).register();
|
2020-09-01 02:00:51 -04:00
|
|
|
```
|
|
|
|
|
|
2020-12-10 16:58:10 -05:00
|
|
|
Then use it via `SuperChart`. See
|
|
|
|
|
[storybook](https://apache-superset.github.io/superset-ui/?selectedKind=chart-plugins-plugin-chart-echarts)
|
|
|
|
|
for more details.
|
2020-09-01 02:00:51 -04:00
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
<SuperChart
|
|
|
|
|
chartType="echarts-ts"
|
|
|
|
|
width={600}
|
|
|
|
|
height={600}
|
|
|
|
|
formData={...}
|
2020-12-29 05:10:39 -05:00
|
|
|
queriesData={[{
|
2020-09-01 02:00:51 -04:00
|
|
|
data: {...},
|
2020-12-29 05:10:39 -05:00
|
|
|
}]}
|
2020-09-01 02:00:51 -04:00
|
|
|
/>
|
|
|
|
|
```
|
