ngx-echarts
简介
Apache ECharts component for Angular（基于 Angular 的 Apache ECharts 组件）
安装
npm install echarts @twp0217/ngx-echarts --save使用
- 安装依赖包：
echarts和@twp0217/ngx-echarts
npm install echarts @twp0217/ngx-echarts --save- 在module导入
NgxEchartsModule
import { NgxEchartsModule } from '@twp0217/ngx-echarts';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
NgxEchartsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }- 准备图表数据
option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};- 在模板页面使用
<ngx-echarts [option]="option"></ngx-echarts>API
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
[option] |
图表的配置项和数据 | EChartsOption | - |
[theme] |
应用的主题 | EChartsTheme | - |
[initOpts] |
初始化附加参数 | EChartsInitOpts | - |
[setOptionOpts] |
设置图表的配置项和数据附加参数 | EChartsSetOptionOpts | - |
[autoResize] |
自适应图表 | boolean | false |
[loading] |
是否显示加载动画 | boolean | - |
[loadingConfig] |
加载动画配置 | EChartsLoadingConfig | - |
[group] |
图表的分组，用于联动 | string | - |
(onChartInit) |
图表初始化时的回调 | (echartsInstance: EchartsInstance) => void | - |
[onEvents] |
图表事件 | EchartsOnEvents | - |
支持
- 如果项目对你有帮助，请点颗星
⭐ ，谢谢。 - 如果你对项目有想法、问题、BUG，欢迎讨论。