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 | - |

支持

• 如果项目对你有帮助，请点颗星:star:，谢谢。
• 如果你对项目有想法、问题、BUG，欢迎讨论。