ECharts
@xui/echartsApache ECharts behind one component. The whole chart is the option input, every ECharts event is an output, and the wrapper owns the fiddly parts: merging option changes instead of redrawing, resizing with the container, theming from the @xui/core tokens in light *and* dark, and disposing with the component. ECharts itself is provided by the app, so the choice between the full build and a tree-shaken one stays where it belongs:
Install
pnpm add @xui/echarts Add the barrel to a standalone component's imports:
import { XuiEChartImports } from '@xui/echarts';
@Component({
imports: [XuiEChartImports],
// …
})Examples
Bar
Loading preview…
<xui-echart [option]="option" class="max-w-3xl" />Series
Loading preview…
<xui-echart [option]="option" class="max-w-3xl" />Loading
Loading preview…
<xui-echart [option]="option" [loading]="loading" class="max-w-3xl" />Linked group
Loading preview…
<div xuiEChartGroup="traffic" class="grid max-w-3xl gap-4 md:grid-cols-2">
<xui-echart [option]="visits" class="h-56" />
<xui-echart [option]="errors" class="h-56" />
</div>Events
Loading preview…
<div class="max-w-3xl">
<p class="text-foreground-muted mb-2 text-sm">Clicked: <span class="text-foreground">{{ selected }}</span></p>
<xui-echart [option]="option" (chartClick)="onClick($event)" />
</div>API
Links every chart inside it, so a tooltip, a brush or a zoom on one is mirrored on the others — ECharts' connect, without the instance plumbing.
Inputs
namestringGroup name. Charts sharing a name share their interaction state.An Apache ECharts chart as an Angular component.
Inputs
classClassValueExtra classes, merged into the component's own rather than replacing them.''optionEChartsOptionThe chart spec. Changes are merged into the running chart, not redrawn.{}themeXuiEChartThemeThe chart's palette, as an {@link XuiEChartTheme}: tokens derives one from the active xUI theme, a string names a registered ECharts theme, and an object is one inline. Changing it rebuilds the chart — ECharts fixes its theme at creation.this.config.themeinitOptionsEChartsInitOpts | undefinedecharts.init() options — renderer, locale, devicePixelRatio. Rebuilds the chart.this.config.initOptionsupdateOptionsSetOptionOpts | undefinedsetOption() options — notMerge, lazyUpdate, replaceMerge.this.config.updateOptionsloadingbooleanShows ECharts' loading spinner over the chart — for data still in flight.falseloadingOptionsRecord<string, unknown>Overrides for the loading spinner; merged over the token-derived defaults.autoResizebooleanKeep the chart sized to its host element as the layout changes.this.config.autoResizegroupstringLink this chart's interactions to every other chart with the same group name.ariaLabelstring | undefinedA canvas says nothing to a screen reader. Describe the chart — or better, pair it with a table view and leave this off.undefinedOutputs
chartInitEChartsTypeThe instance, as soon as ECharts has loaded and the chart is on screen.chartClickECElementEventEmits ECharts' click — a click on a data item, with the series and data index on the event.chartDblClickECElementEventEmits ECharts' dblclick on a data item.chartMouseDownECElementEventEmits ECharts' mousedown on a data item.chartMouseUpECElementEventEmits ECharts' mouseup on a data item.chartMouseOverECElementEventEmits ECharts' mouseover as the pointer enters a data item.chartMouseOutECElementEventEmits ECharts' mouseout as the pointer leaves a data item.chartGlobalOutECElementEventEmits ECharts' globalout as the pointer leaves the chart altogether.chartContextMenuECElementEventEmits ECharts' contextmenu on a data item.chartHighlightXuiEChartEventEmits ECharts' highlight when a data item is emphasised, whether by the pointer or by a dispatched action.chartDownplayXuiEChartEventEmits ECharts' downplay when a data item's emphasis is removed.chartSelectChangedXuiEChartEventEmits ECharts' selectchanged when the set of selected data items changes.chartLegendSelectChangedXuiEChartEventEmits ECharts' legendselectchanged when a legend entry is toggled.chartDataZoomXuiEChartEventEmits ECharts' datazoom as the visible data window changes.chartRestoreXuiEChartEventEmits ECharts' restore when the toolbox reset returns the chart to its initial state.chartMagicTypeChangedXuiEChartEventEmits ECharts' magictypechanged when the toolbox switches the chart between types.chartBrushEndXuiEChartEventEmits ECharts' brushEnd when a brush selection is finished.chartRenderedXuiEChartEventFires on every frame ECharts paints — cheap to ignore, costly to log.chartFinishedXuiEChartEventFires once a render has settled, animations included.Methods
getInstance(): EChartsType | nullThe ECharts instance, or null until it has been created.resize(): voidResize to the host element. Only needed when autoResize is off.refresh(): voidDrop the current option and apply the bound one from scratch.clear(): voidRemove everything drawn, keeping the instance.dispatch(action: XuiEChartEvent): voidTrigger an ECharts action — { type: 'highlight', seriesIndex: 0 } and friends.getDataURL(options?: Parameters<EChartsType['getDataURL']>[0]): string | undefinedThe chart as a data URL, for downloads and exports.