同步操作将从 Gitee 极速下载/ngx-echarts 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
Angular directive for echarts (version >= 3.x) (The project is renamed from angular2-echarts)
ngx-echarts
is an Angular (ver >= 2.x) directive for ECharts (ver >= 3.x).
Latest version @npm:
v5.x
for Angular >= 6v2.3.1
for Angular < 6 (Please refer to https://github.com/xieziyu/ngx-echarts/blob/v2.x/README.md)A starter project on Github: https://github.com/xieziyu/ngx-echarts-starter
NgxEchartsModule
provides .forRoot()
method to inject echarts
core..forRoot
method, we can do custom build without NgxEchartsCoreModule
. Just import the echarts
core from echarts/src/echarts
, and other necessary charts.NgxEchartsCoreModule
is removed.[detectEventChanges]
is removed.Since v5.0
# if you use npm
npm install echarts -S
npm install ngx-echarts -S
# or if you use yarn
yarn add echarts
yarn add ngx-echarts
If you need ECharts GL support, please install it first:
npm install echarts-gl -S
# or
yarn add echarts-gl
Import other extentions such as themes or echarts-gl
in your main.ts
: ECharts Extensions
echarts
and provide it in NgxEchartsModule.forRoot({ echarts })
.NgxEchartsCoreModule
is removed.Please refer to the demo page.
Firstly, import NgxEchartsModule
in your app module (or any other proper angular module):
import { NgxEchartsModule } from 'ngx-echarts';
/**
* This will import all modules from echarts.
* If you only need custom modules,
* please refer to [Custom Build] section.
*/
import * as echarts from 'echarts';
@NgModule({
imports: [
NgxEchartsModule.forRoot({
echarts,
}),
],
})
export class AppModule {}
Then: use echarts
directive in a div which has pre-defined height. (From v2.0, it has default height: 400px)
Simple example:
<div echarts [options]="chartOption" class="demo-chart"></div>
.demo-chart {
height: 400px;
}
import { EChartOption } from 'echarts';
// ...
chartOption: EChartOption = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value',
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
},
],
};
echarts
directive support following input porperties:
Input | Type | Default | Description |
---|---|---|---|
[options] |
object | null | It's the same with the options in official demo site. |
[merge] |
object | null | You can use it to update 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 . So you can refer to ECharts documentation for details |
[loading] |
boolean | false | Use it to toggle the echarts loading animation when your data is not ready. |
[autoResize] |
boolean | true | Charts will be automatically resized when container's width changed. |
[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 for details |
[theme] |
string | null | Use it to init echarts with theme. You need to import the theme file in main.ts . |
[loadingOpts] |
object | null | Input an object to customize loading style. Refer to ECharts documentation for details. |
By default, loadingOpts
is:
{
text: 'loading',
color: '#c23531',
textColor: '#000',
maskColor: 'rgba(255, 255, 255, 0.8)',
zlevel: 0
}
If you need echarts API such as echarts.graphic
, please import it from echarts. For example:
import { graphic } from 'echarts';
new graphic.LinearGradient(/** ... */);
echartsInstance
is exposed (since v1.1.6) in (chartInit)
event. So you can directly call the APIs just like: resize()
, showLoading()
, etc. For example:
<div echarts class="demo-chart" [options]="chartOptions" (chartInit)="onChartInit($event)"></div>
onChartInit(ec) {
this.echartsIntance = ec;
}
resizeChart() {
if (this.echartsIntance) {
this.echartsIntance.resize();
}
}
Import echarts theme files or other extension files after you imported echarts
core. For example:
import * as echarts from 'echarts';
/** echarts extensions: */
import 'echarts-gl';
import 'echarts/theme/macarons.js';
import 'echarts/dist/extension/bmap.min.js';
NgxEchartsService
has been obsoleted since v4.0
As echarts support the 'click'
, 'dblclick'
, 'mousedown'
, 'mouseup'
, 'mouseover'
, 'mouseout'
, 'globalout'
mouse events, our ngx-echarts
directive also support the same mouse events but with additional chart
prefix.
<div echarts class="demo-chart" [options]="chartOptions" (chartClick)="onChartClick($event)"></div>
It supports following event outputs:
@Output | Event |
---|---|
chartInit | Emitted when chart is intialized |
chartClick | echarts event: 'click'
|
chartDblClick | echarts event: 'dblclick'
|
chartMouseDown | echarts event: 'mousedown'
|
chartMouseMove | echarts event: 'mousemove'
|
chartMouseUp | echarts event: 'mouseup'
|
chartMouseOver | echarts event: 'mouseover'
|
chartMouseOut | echarts event: 'mouseout'
|
chartGlobalOut | echarts event: 'globalout'
|
chartContextMenu | echarts event: 'contextmenu'
|
chartLegendSelectChanged | echarts event: 'legendselectchanged'
|
chartLegendSelected | echarts event: 'legendselected'
|
chartLegendUnselected | echarts event: 'legendunselected'
|
chartLegendScroll | echarts event: 'legendscroll'
|
chartDataZoom | echarts event: 'datazoom'
|
chartDataRangeSelected | echarts event: 'datarangeselected'
|
chartTimelineChanged | echarts event: 'timelinechanged'
|
chartTimelinePlayChanged | echarts event: 'timelineplaychanged'
|
chartRestore | echarts event: 'restore'
|
chartDataViewChanged | echarts event: 'dataviewchanged'
|
chartMagicTypeChanged | echarts event: 'magictypechanged'
|
chartPieSelectChanged | echarts event: 'pieselectchanged'
|
chartPieSelected | echarts event: 'pieselected'
|
chartPieUnselected | echarts event: 'pieunselected'
|
chartMapSelectChanged | echarts event: 'mapselectchanged'
|
chartMapSelected | echarts event: 'mapselected'
|
chartMapUnselected | echarts event: 'mapunselected'
|
chartAxisAreaSelected | echarts event: 'axisareaselected'
|
chartFocusNodeAdjacency | echarts event: 'focusnodeadjacency'
|
chartUnfocusNodeAdjacency | echarts event: 'unfocusnodeadjacency'
|
chartBrush | echarts event: 'brush'
|
chartBrushSelected | echarts event: 'brushselected'
|
chartRendered | echarts event: 'rendered'
|
chartFinished | echarts event: 'finished'
|
You can refer to the echarts tutorial: Events and Actions in ECharts for more details of the event params. You can also refer to the demo page for the detailed example.
Please refer to ECharts Document for more details.
If you want to custom build echarts, prepare a file like custom-echarts.ts
:
// custom-echarts.ts
export * from 'echarts/src/echarts';
import 'echarts/src/chart/line';
import 'echarts/src/chart/bar';
// component examples:
import 'echarts/src/component/tooltip';
import 'echarts/src/component/title';
import 'echarts/src/component/toolbox';
And then inject it in your NgxEchartsModule
:
import { NgxEchartsModule } from 'ngx-echarts';
import * as echarts from './custom-echarts';
@NgModule({
imports: [
NgxEchartsModule.forRoot({
echarts,
}),
],
})
export class AppModule {}
And if you want to use the global echarts
object, please import it from lib
or src
instead:
import * as echarts from 'echarts/lib/echarts';
If you need to import theme files, remember to change their 'echarts'
path to 'echarts/lib/echarts'
, for example:
// ... part of echarts/theme/dark.js:
function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['exports', 'echarts/lib/echarts'], factory);
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
// CommonJS
factory(exports, require('echarts/lib/echarts'));
} else {
// Browser globals
factory({}, root.echarts);
}
}
You can clone this repo to your working copy and then launch the demo page in your local machine:
npm install
npm run demo
# or
yarn install
yarn demo
The demo page server is listening to: http://localhost:4202
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。