1 | # ngx-echarts
|
2 |
|
3 |
|
4 |
|
5 | [![npm](https://img.shields.io/npm/v/ngx-echarts.svg)][npm-badge-url]
|
6 | [![npm](https://img.shields.io/npm/dm/ngx-echarts.svg)][npm-badge-url]
|
7 | [![Build Status](https://github.com/xieziyu/ngx-echarts/actions/workflows/ci.yaml/badge.svg)][ci-url]
|
8 |
|
9 | Angular directive for [Apache ECharts (incubating)](https://github.com/apache/incubator-echarts)
|
10 | (version >= 3.x) (The project is renamed from **angular2-echarts**)
|
11 |
|
12 | - [Online Demo](https://xieziyu.github.io/ngx-echarts)
|
13 | - [Online Docs](https://xieziyu.github.io/ngx-echarts/api-doc)
|
14 | - [Starter Project](https://github.com/xieziyu/ngx-echarts-starter)
|
15 | - [Changelog](https://xieziyu.github.io/ngx-echarts/#/changelogs)
|
16 |
|
17 | ## Table of contents
|
18 |
|
19 | - [ngx-echarts](#ngx-echarts)
|
20 | - [Table of contents](#table-of-contents)
|
21 | - [Getting Started](#getting-started)
|
22 | - [Latest Update](#latest-update)
|
23 | - [Installation](#installation)
|
24 | - [Upgrade from v4.x](#upgrade-from-v4x)
|
25 | - [Usage](#usage)
|
26 | - [Standalone](#standalone)
|
27 | - [NgModule](#ngmodule)
|
28 | - [Directive](#directive)
|
29 | - [API](#api)
|
30 | - [Directive](#directive-1)
|
31 | - [ECharts API](#echarts-api)
|
32 | - [ECharts Instance](#echarts-instance)
|
33 | - [ECharts Extensions](#echarts-extensions)
|
34 | - [Service](#service)
|
35 | - [Events](#events)
|
36 | - [Custom Build](#custom-build)
|
37 | - [Treeshaking Custom Build](#treeshaking-custom-build)
|
38 | - [Legacy Custom Build](#legacy-custom-build)
|
39 | - [Custom Locale](#custom-locale)
|
40 | - [Demo](#demo)
|
41 |
|
42 | # Getting Started
|
43 |
|
44 | `ngx-echarts` is an Angular (ver >= 2.x) directive for ECharts (ver >= 3.x).
|
45 |
|
46 | Latest version @npm:
|
47 |
|
48 | - `v17.1.0` for Angular 17
|
49 | - `v16.2.0` for Angular 16
|
50 | - `v15.0.3` for Angular 15
|
51 | - `v14.0.0` for Angular 14
|
52 | - `v8.0.1` for Angular 13
|
53 | - `v7.1.0` for Angular >= 11, < 13
|
54 | - `v6.0.1` for Angular >= 10, < 11
|
55 | - `v5.2.2` for Angular >= 6, < 10
|
56 | - `v2.3.1` for Angular < 6 (Please refer to https://github.com/xieziyu/ngx-echarts/blob/v2.x/README.md)
|
57 |
|
58 | A starter project on Github: https://github.com/xieziyu/ngx-echarts-starter
|
59 |
|
60 | # Latest Update
|
61 |
|
62 | - 2023.11.10: v17.1.0 / v16.2.0:
|
63 |
|
64 | - Feat: Exported standalone `NgxEchartsDirective`, `provideEcharts` and `provideEchartsCore`
|
65 |
|
66 | - 2023.11.08: v17.0.1:
|
67 |
|
68 | - Feat: upgrade to Angular 17
|
69 |
|
70 | - 2023.10.11: v16.1.0:
|
71 |
|
72 | - Feat: Add types to `chartXXX` EventEmitters. Support new events such as: `'selectchanged'`
|
73 |
|
74 | - 2023.05.10: v16.0.0:
|
75 |
|
76 | - Feat: upgrade to Angular 16
|
77 | - Chore: replaced tslint with eslint.
|
78 |
|
79 | - 2023.03.27: v15.0.3:
|
80 |
|
81 | - Fix: `[loading]=true` is not triggered when chart initialized.
|
82 |
|
83 | - 2023.03.20: v15.0.2:
|
84 |
|
85 | - Fix: unsubscribe ChangeFilter subscriptions onDestroy.
|
86 |
|
87 | - 2022.12.01: v15.0.1:
|
88 |
|
89 | - Feat: Support nullable @Inputs. Issue [#378](https://github.com/xieziyu/ngx-echarts/issues/378)
|
90 |
|
91 | - 2022.11.23: v15.0.0:
|
92 |
|
93 | - Feat: upgrade to Angular 15
|
94 |
|
95 | - 2022.06.21: v14.0.0:
|
96 |
|
97 | - Feat: upgrade to Angular 14
|
98 |
|
99 | - 2021.12.07: v8.0.1:
|
100 |
|
101 | - Fix: NgxEchartsModule.forChild() issue [#334](https://github.com/xieziyu/ngx-echarts/issues/334)
|
102 |
|
103 | - 2021.11.08: v8.0.0 / v7.1.0:
|
104 |
|
105 | - Fix: remove @juggle/resize-observer from the peer dependencies
|
106 | - Perf: fix performance issue [#330](https://github.com/xieziyu/ngx-echarts/issues/330)
|
107 |
|
108 | - 2021.05.17: v7.0.0:
|
109 |
|
110 | - Feat: support Angular v11, ECharts v5
|
111 | - Feat: support echart theme object
|
112 | - Perf: resize animation
|
113 |
|
114 | - 2021.01.10: v6.0.1:
|
115 |
|
116 | - [PR #295](https://github.com/xieziyu/ngx-echarts/pull/295): Guard dispose (by [taipeiwu](https://github.com/taipeiwu))
|
117 |
|
118 | - 2021.01.10: v6.0.0:
|
119 |
|
120 | - [PR #285](https://github.com/xieziyu/ngx-echarts/pull/285): Guard dispose (by [gjsmith66](https://github.com/gjsmith66))
|
121 | - update demo to use echarts v5.0
|
122 | - [PR #282](https://github.com/xieziyu/ngx-echarts/pull/282): fix avoid "ResizeObserver loop limit exceeded" error (by [parkdihoon](https://github.com/parkdihoon))
|
123 | - [PR #272](https://github.com/xieziyu/ngx-echarts/pull/272): Angular 10 support (by [Ghostbird](https://github.com/Ghostbird))
|
124 |
|
125 | - 2020.11.07: v5.2.1:
|
126 |
|
127 | - Required `resize-observer-polyfill`
|
128 | - [PR #271](https://github.com/xieziyu/ngx-echarts/pull/271): Fix autoResize functionality (by [ThomasBower](https://github.com/ThomasBower))
|
129 | - Exposed methods: `refreshChart()` and `resize()`
|
130 |
|
131 | - 2020.07.24: v5.1.0:
|
132 |
|
133 | - [PR #240](https://github.com/xieziyu/ngx-echarts/pull/240): Added output 'optionsError' (by [trajnisz](https://github.com/trajnisz))
|
134 | - [PR #242](https://github.com/xieziyu/ngx-echarts/pull/242): Add output for brushEnd event (by [Uular](https://github.com/Uular))
|
135 | - [PR #246](https://github.com/xieziyu/ngx-echarts/pull/246): Allow loading echarts library lazily via native import (by [smnbbrv](https://github.com/smnbbrv))
|
136 |
|
137 | - 2020.05.19: v5.0.0
|
138 | - **BREAKING CHANGES**:
|
139 | - `NgxEchartsModule` provides `.forRoot()` method to inject `echarts` core.
|
140 | - Due to `.forRoot` method, we can do custom build without `NgxEchartsCoreModule`. Just import the `echarts` core from `echarts/src/echarts`, and other necessary charts.
|
141 | - `NgxEchartsCoreModule` is removed.
|
142 | - `[detectEventChanges]` is removed.
|
143 |
|
144 | # Installation
|
145 |
|
146 | - Since v5.0
|
147 |
|
148 | ```bash
|
149 | # if you use npm
|
150 | npm install echarts -S
|
151 | npm install ngx-echarts -S
|
152 |
|
153 | # or if you use yarn
|
154 | yarn add echarts
|
155 | yarn add ngx-echarts
|
156 | ```
|
157 |
|
158 | - If you need ECharts GL support, please install it first:
|
159 |
|
160 | ```bash
|
161 | npm install echarts-gl -S
|
162 |
|
163 | # or
|
164 | yarn add echarts-gl
|
165 | ```
|
166 |
|
167 | - Import other extensions such as themes or `echarts-gl` in your `main.ts`: [ECharts Extensions](#echarts-extensions)
|
168 |
|
169 | ## Upgrade from v4.x
|
170 |
|
171 | 1. import `echarts` and provide it in `NgxEchartsModule.forRoot({ echarts })`.
|
172 | 2. `NgxEchartsCoreModule` is removed.
|
173 |
|
174 | # Usage
|
175 |
|
176 | Please refer to the [demo](https://xieziyu.github.io/ngx-echarts) page.
|
177 |
|
178 | ## Standalone
|
179 |
|
180 | import `NgxEchartsDirective` and `provideEcharts`. Or you can use `provideEchartsCore` to do treeshaking custom build.
|
181 |
|
182 | ```typescript
|
183 | import { NgxEchartsDirective, provideEcharts } from 'ngx-echarts';
|
184 |
|
185 | @Component({
|
186 | selector: 'app-root',
|
187 | standalone: true,
|
188 | imports: [CommonModule, NgxEchartsDirective],
|
189 | templateUrl: './app.component.html',
|
190 | styleUrls: ['./app.component.scss'],
|
191 | providers: [
|
192 | provideEcharts(),
|
193 | ]
|
194 | })
|
195 | export class AppComponent {}
|
196 | ```
|
197 |
|
198 | ## NgModule
|
199 |
|
200 | import `NgxEchartsModule`:
|
201 |
|
202 | ```typescript
|
203 | import { NgxEchartsModule } from 'ngx-echarts';
|
204 |
|
205 | @NgModule({
|
206 | imports: [
|
207 | NgxEchartsModule.forRoot({
|
208 | /**
|
209 | * This will import all modules from echarts.
|
210 | * If you only need custom modules,
|
211 | * please refer to [Custom Build] section.
|
212 | */
|
213 | echarts: () => import('echarts'), // or import('./path-to-my-custom-echarts')
|
214 | }),
|
215 | ],
|
216 | })
|
217 | export class AppModule {}
|
218 | ```
|
219 |
|
220 | The echarts library will be imported **only when it gets called the first time** thanks to the function that uses the native import.
|
221 |
|
222 | You can also directly pass the echarts instead which will slow down initial rendering because it will load the whole echarts into your main bundle.
|
223 |
|
224 | ```typescript
|
225 | import * as echarts from 'echarts';
|
226 | import { NgxEchartsModule } from 'ngx-echarts';
|
227 |
|
228 | @NgModule({
|
229 | imports: [
|
230 | NgxEchartsModule.forRoot({ echarts }),
|
231 | ],
|
232 | })
|
233 | export class AppModule {}
|
234 | ```
|
235 |
|
236 | ## Directive
|
237 |
|
238 | use `echarts` directive in a div which has **pre-defined height**. (From v2.0, it has default height: 400px)
|
239 |
|
240 | - html:
|
241 |
|
242 | ```html
|
243 | <div echarts [options]="chartOption" class="demo-chart"></div>
|
244 | ```
|
245 |
|
246 | - css:
|
247 |
|
248 | ```css
|
249 | .demo-chart {
|
250 | height: 400px;
|
251 | }
|
252 | ```
|
253 |
|
254 | - component:
|
255 |
|
256 | ```typescript
|
257 | import { EChartsOption } from 'echarts';
|
258 |
|
259 | // ...
|
260 |
|
261 | chartOption: EChartsOption = {
|
262 | xAxis: {
|
263 | type: 'category',
|
264 | data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
265 | },
|
266 | yAxis: {
|
267 | type: 'value',
|
268 | },
|
269 | series: [
|
270 | {
|
271 | data: [820, 932, 901, 934, 1290, 1330, 1320],
|
272 | type: 'line',
|
273 | },
|
274 | ],
|
275 | };
|
276 | ```
|
277 |
|
278 | # API
|
279 |
|
280 | ### Directive
|
281 |
|
282 | `echarts` directive support following input properties:
|
283 |
|
284 | | Input | Type | Default | Description |
|
285 | | --------------- | ------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
286 | | `[options]` | object | null | The same as the options on the official demo site. |
|
287 | | `[merge]` | object | null | Used to update a part of the `options`, especially helpful when you need to update the chart data. In fact, the value of `merge` will be used in `echartsInstance.setOption()` with `notMerge = false`. Refer to [ECharts documentation](https://echarts.apache.org/en/api.html#echartsInstance.setOption) for details. |
|
288 | | `[loading]` | boolean | false | Used to toggle the echarts loading animation when your data is not ready. |
|
289 | | `[autoResize]` | boolean | true | If set to `true`, the chart will be automatically resized when the window's width is changed. |
|
290 | | `[initOpts]` | object | null | The value of `[initOpts]` will be used in `echarts.init()`. It may contain `devicePixelRatio`, `renderer`, `width` or `height` properties. Refer to [ECharts documentation](https://echarts.apache.org/en/api.html#echarts.init) for details. |
|
291 | | `[theme]` | string | null | Used it to initialize echarts with theme. The theme file must also be imported in `main.ts`. |
|
292 | | `[loadingOpts]` | object | null | Input an object to customize the loading style. Refer to [ECharts documentation](https://echarts.apache.org/en/api.html#echartsInstance.showLoading) for details. |
|
293 |
|
294 | By default, `loadingOpts` is:
|
295 |
|
296 | ```javascript
|
297 | {
|
298 | text: 'loading',
|
299 | color: '#c23531',
|
300 | textColor: '#000',
|
301 | maskColor: 'rgba(255, 255, 255, 0.8)',
|
302 | zlevel: 0
|
303 | }
|
304 | ```
|
305 |
|
306 | ### ECharts API
|
307 |
|
308 | If you need to access parts of the ECharts API such as `echarts.graphic`, please import it from echarts. For example:
|
309 |
|
310 | ```typescript
|
311 | import { graphic } from 'echarts';
|
312 |
|
313 | new graphic.LinearGradient(/* ... */);
|
314 | ```
|
315 |
|
316 | ### ECharts Instance
|
317 |
|
318 | `echartsInstance` is exposed (since v1.1.6) in the `(chartInit)` event, enabling you to directly call functions like: `resize()`, `showLoading()`, etc. For example:
|
319 |
|
320 | - html:
|
321 |
|
322 | ```html
|
323 | <div echarts class="demo-chart" [options]="chartOptions" (chartInit)="onChartInit($event)"></div>
|
324 | ```
|
325 |
|
326 | - component:
|
327 |
|
328 | ```typescript
|
329 | onChartInit(ec) {
|
330 | this.echartsInstance = ec;
|
331 | }
|
332 |
|
333 | resizeChart() {
|
334 | if (this.echartsInstance) {
|
335 | this.echartsInstance.resize();
|
336 | }
|
337 | }
|
338 | ```
|
339 |
|
340 | ### ECharts Extensions
|
341 |
|
342 | Import echarts theme files or other extension files after you have imported `echarts` core. For example:
|
343 |
|
344 | ```typescript
|
345 | import * as echarts from 'echarts';
|
346 |
|
347 | /** echarts extensions: */
|
348 | import 'echarts-gl';
|
349 | import 'echarts/theme/macarons.js';
|
350 | import 'echarts/dist/extension/bmap.min.js';
|
351 | ```
|
352 |
|
353 | ### Service
|
354 |
|
355 | `NgxEchartsService` has been obsolete since v4.0
|
356 |
|
357 | # Events
|
358 |
|
359 | As ECharts supports the `'click'`, `'dblclick'`, `'mousedown'`, `'mouseup'`, `'mouseover'`, `'mouseout'`, and `'globalout'` mouse events, our `ngx-echarts` directive also supports the same mouse events but with an additional `chart` prefix. For example:
|
360 |
|
361 | - html:
|
362 |
|
363 | ```html
|
364 | <div echarts class="demo-chart" [options]="chartOptions" (chartClick)="onChartClick($event)"></div>
|
365 | ```
|
366 |
|
367 | - The '\$event' is same with the 'params' that ECharts dispatches.
|
368 |
|
369 | It supports following event outputs:
|
370 |
|
371 | | @Output | Event |
|
372 | | ------------------------------ | -------------------------------------- |
|
373 | | chartInit | Emitted when the chart is initialized |
|
374 | | chartClick | echarts event: `'click'` |
|
375 | | chartDblClick | echarts event: `'dblclick'` |
|
376 | | chartMouseDown | echarts event: `'mousedown'` |
|
377 | | chartMouseMove | echarts event: `'mousemove'` |
|
378 | | chartMouseUp | echarts event: `'mouseup'` |
|
379 | | chartMouseOver | echarts event: `'mouseover'` |
|
380 | | chartMouseOut | echarts event: `'mouseout'` |
|
381 | | chartGlobalOut | echarts event: `'globalout'` |
|
382 | | chartContextMenu | echarts event: `'contextmenu'` |
|
383 | | chartHighlight | echarts event: `'highlight'` |
|
384 | | chartDownplay | echarts event: `'downplay'` |
|
385 | | chartSelectChanged | echarts event: `'selectchanged'` |
|
386 | | chartLegendSelectChanged | echarts event: `'legendselectchanged'` |
|
387 | | chartLegendSelected | echarts event: `'legendselected'` |
|
388 | | chartLegendUnselected | echarts event: `'legendunselected'` |
|
389 | | chartLegendLegendSelectAll | echarts event: `'legendselectall'` |
|
390 | | chartLegendLegendInverseSelect | echarts event: `'legendinverseselect'` |
|
391 | | chartLegendScroll | echarts event: `'legendscroll'` |
|
392 | | chartDataZoom | echarts event: `'datazoom'` |
|
393 | | chartDataRangeSelected | echarts event: `'datarangeselected'` |
|
394 | | chartGraphRoam | echarts event: `'graphroam'` |
|
395 | | chartGeoRoam | echarts event: `'georoam'` |
|
396 | | chartTreeRoam | echarts event: `'treeroam'` |
|
397 | | chartTimelineChanged | echarts event: `'timelinechanged'` |
|
398 | | chartTimelinePlayChanged | echarts event: `'timelineplaychanged'` |
|
399 | | chartRestore | echarts event: `'restore'` |
|
400 | | chartDataViewChanged | echarts event: `'dataviewchanged'` |
|
401 | | chartMagicTypeChanged | echarts event: `'magictypechanged'` |
|
402 | | chartGeoSelectChanged | echarts event: `'geoselectchanged'` |
|
403 | | chartGeoSelected | echarts event: `'geoselected'` |
|
404 | | chartGeoUnselected | echarts event: `'geounselected'` |
|
405 | | chartAxisAreaSelected | echarts event: `'axisareaselected'` |
|
406 | | chartBrush | echarts event: `'brush'` |
|
407 | | chartBrushEnd | echarts event: `'brushend'` |
|
408 | | chartBrushSelected | echarts event: `'brushselected'` |
|
409 | | chartGlobalCursorTaken | echarts event: `'globalcursortaken'` |
|
410 | | chartRendered | echarts event: `'rendered'` |
|
411 | | chartFinished | echarts event: `'finished'` |
|
412 |
|
413 | You can refer to the ECharts tutorial: [Events and Actions in ECharts](https://echarts.apache.org/en/tutorial.html#Events%20and%20Actions%20in%20ECharts) for more details of the event params. You can also refer to the [demo](https://xieziyu.github.io/#/ngx-echarts/demo) page for a detailed example.
|
414 |
|
415 | # Custom Build
|
416 |
|
417 | ## Treeshaking Custom Build
|
418 |
|
419 | > Since version 5.0.1 ECharts supports [Treeshaking with NPM](https://echarts.apache.org/en/tutorial.html#Use%20ECharts%20with%20bundler%20and%20NPM).
|
420 |
|
421 | The `app.modules.ts` should look like this:
|
422 |
|
423 | ```typescript
|
424 | import { BrowserModule } from '@angular/platform-browser';
|
425 | import { NgModule } from '@angular/core';
|
426 | import { HttpClientModule } from '@angular/common/http';
|
427 |
|
428 | import { NgxEchartsDirective, provideEchartsCore } from 'ngx-echarts';
|
429 |
|
430 | import { AppComponent } from './app.component';
|
431 |
|
432 | // Import the echarts core module, which provides the necessary interfaces for using echarts.
|
433 | import * as echarts from 'echarts/core';
|
434 |
|
435 | // Import bar charts, all suffixed with Chart
|
436 | import { BarChart } from 'echarts/charts';
|
437 |
|
438 | // Import the tooltip, title, rectangular coordinate system, dataset and transform components
|
439 | import {
|
440 | TitleComponent,
|
441 | TooltipComponent,
|
442 | GridComponent,
|
443 | DatasetComponent,
|
444 | TransformComponent
|
445 | } from 'echarts/components';
|
446 |
|
447 | // Features like Universal Transition and Label Layout
|
448 | import { LabelLayout, UniversalTransition } from 'echarts/features';
|
449 |
|
450 | // Import the Canvas renderer
|
451 | // Note that including the CanvasRenderer or SVGRenderer is a required step
|
452 | import { CanvasRenderer } from 'echarts/renderers';
|
453 |
|
454 | // Import the theme
|
455 | import 'echarts/theme/macarons.js';
|
456 |
|
457 | // Register the required components
|
458 | echarts.use([
|
459 | BarChart,
|
460 | TitleComponent,
|
461 | TooltipComponent,
|
462 | GridComponent,
|
463 | DatasetComponent,
|
464 | TransformComponent,
|
465 | LabelLayout,
|
466 | UniversalTransition,
|
467 | CanvasRenderer
|
468 | ]);
|
469 |
|
470 | @NgModule({
|
471 | declarations: [AppComponent],
|
472 | imports: [
|
473 | BrowserModule,
|
474 | HttpClientModule,
|
475 | // import standalone directive:
|
476 | NgxEchartsDirective,
|
477 | ],
|
478 | providers: [{
|
479 | // Provide custom builded ECharts core:
|
480 | provideEchartsCore({ echarts })
|
481 | }],
|
482 | bootstrap: [AppComponent],
|
483 | })
|
484 | export class AppModule {}
|
485 | ```
|
486 |
|
487 | ## Legacy Custom Build
|
488 |
|
489 | > Please refer to [ECharts Documentation](https://echarts.apache.org/en/tutorial.html#Create%20Custom%20Build%20of%20ECharts) for more details.
|
490 |
|
491 | If you want to produce a custom build of ECharts, prepare a file like `custom-echarts.ts`:
|
492 |
|
493 | ```ts
|
494 | // custom-echarts.ts
|
495 | export * from 'echarts/src/echarts';
|
496 |
|
497 | import 'echarts/src/chart/line';
|
498 | import 'echarts/src/chart/bar';
|
499 | // component examples:
|
500 | import 'echarts/src/component/tooltip';
|
501 | import 'echarts/src/component/title';
|
502 | import 'echarts/src/component/toolbox';
|
503 | ```
|
504 |
|
505 | And then inject it in your `NgxEchartsModule`:
|
506 |
|
507 | ```ts
|
508 | import { NgxEchartsModule } from 'ngx-echarts';
|
509 | import * as echarts from './custom-echarts';
|
510 |
|
511 | @NgModule({
|
512 | imports: [
|
513 | NgxEchartsModule.forRoot({
|
514 | echarts,
|
515 | }),
|
516 | ],
|
517 | })
|
518 | export class AppModule {}
|
519 | ```
|
520 |
|
521 | And if you want to use the global `echarts` object, please import it from `lib` or `src` instead:
|
522 |
|
523 | ```ts
|
524 | import * as echarts from 'echarts/lib/echarts';
|
525 | ```
|
526 |
|
527 | If you need to import theme files, remember to change the `'echarts'` path to `'echarts/lib/echarts'`, for example:
|
528 |
|
529 | ```ts
|
530 | // ... part of echarts/theme/dark.js:
|
531 | function (root, factory) {
|
532 | if (typeof define === 'function' && define.amd) {
|
533 | // AMD. Register as an anonymous module.
|
534 | define(['exports', 'echarts/lib/echarts'], factory);
|
535 | } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
|
536 | // CommonJS
|
537 | factory(exports, require('echarts/lib/echarts'));
|
538 | } else {
|
539 | // Browser globals
|
540 | factory({}, root.echarts);
|
541 | }
|
542 | }
|
543 | ```
|
544 |
|
545 | # Custom Locale
|
546 |
|
547 | You can change the chart locale registering a built-in locale (located in `node_modules/echarts/lib/i18n/`) or a custom locale object. To register a locale, you will need to change the module that echart is being imported (usually `app.module.ts`).
|
548 |
|
549 | ```ts
|
550 | import {NgxEchartsModule} from "ngx-echarts";
|
551 | import * as echarts from 'echarts/core';
|
552 | import langCZ from 'echarts/lib/i18n/langCZ';
|
553 |
|
554 | echarts.registerLocale("CZ", langCZ)
|
555 |
|
556 | @NgModule({
|
557 | imports: [NgxEchartsModule.forRoot({echarts})],
|
558 | declarations: [],
|
559 | providers: [],
|
560 | bootstrap: [AppComponent]
|
561 | })
|
562 | ```
|
563 |
|
564 | and in your HTML file use:
|
565 |
|
566 | ```html
|
567 | <div echarts [initOpts]="{ locale: 'CZ' }" [options]="options" class="demo-chart"></div>
|
568 | ```
|
569 |
|
570 | # Demo
|
571 |
|
572 | You can clone this repo to your working copy and then launch the demo page in your local machine:
|
573 |
|
574 | ```bash
|
575 | npm install
|
576 | npm run demo
|
577 |
|
578 | # or
|
579 | yarn install
|
580 | yarn demo
|
581 | ```
|
582 |
|
583 | The demo page server is listening on: http://localhost:4202
|
584 |
|
585 | [npm-badge-url]: https://www.npmjs.com/package/ngx-echarts
|
586 | [ci-url]: https://github.com/xieziyu/ngx-echarts/actions/workflows/ci.yaml
|