NGX-ECHARTS 技术文档

NGX-ECHARTS 技术文档

ngx-echarts An angular (ver >= 2.x) directive for ECharts (ver >= 3.x) 项目地址: https://gitcode.com/gh_mirrors/ng/ngx-echarts

NGX-ECHARTS 是专为 Angular（版本 ≥ 2.x）设计的 Apache ECharts （版本 ≥ 3.x）指令，它简化了在 Angular 应用中集成 ECharts 的过程。本文档将指导您完成安装、配置以及使用此库来创建交互式图表。

安装指南

基础安装

自 v5.0 起，您需要首先安装 ECharts 和 NGX-ECHARTS：

# 使用 npm
npm install echarts ngx-echarts --save

# 或者，如果您偏好 Yarn
yarn add echarts ngx-echarts

针对 ECharts GL 支持

若您的应用需要 ECharts GL 功能，请执行额外的安装步骤：

npm install echarts-gl --save
# 或
yarn add echarts-gl

升级自 v4.x

对于从 v4.x 版本升级的情况，您需要做以下调整：

1. 在 NgxEchartsModule.forRoot() 中导入并提供 echarts。
2. 移除不再使用的 NgxEchartsCoreModule。

项目的使用说明

快速上手

1. 引入 NgxEchartsModule 到您的 AppModule：

   import { NgxEchartsModule } from 'ngx-echarts';
   
   @NgModule({
     imports: [
       NgxEchartsModule.forRoot({
         echarts: () => import('echarts'),
       }),
     ],
   })
   export class AppModule {}
   

2. 在组件中使用 ECharts 指令：

   <div echarts [options]="yourChartOptions" class="chart-container"></div>
   

   确保 .chart-container CSS 类定义了一个高度，例如：

   .chart-container {
     height: 400px;
   }
   

组件内细节

定义选项对象（chartOptions），然后在组件的 TypeScript 文件中设置数据：

chartOptions: EChartsOption = {
  xAxis: { ... },
  yAxis: { ... },
  series: [{ ... }],
};

API 使用文档

指令属性

• [options]: 图表配置项，相当于 ECharts 的配置对象。
• [merge]: 更新配置的一部分，适用于动态更新数据。
• [loading]: 控制图表加载动画显示。
• [autoResize]: 自动适应容器大小变化，默认开启。
• [initOpts]: 初始化选项，用于定制 echarts.init() 参数。
• [theme]: 主题名称，需预先在 main.ts 导入主题文件。
• [loadingOpts]: 定制加载提示样式。

访问 ECharts 实例

通过 (chartInit)="onChartInit($event)" 输出事件捕获 ECharts 实例，以便直接调用其方法：

onChartInit(ec) {
  this.chartInstance = ec;
}

项目安装方式回顾

确保按照上述安装指南进行操作，通过 npm 或 Yarn 添加必要的依赖，并正确配置模块导入，之后便可在Angular项目中顺利使用 NGX-ECHARTS。

---

本篇技术文档旨在帮助开发者快速掌握 NGX-ECHARTS 的基本使用，了解如何配置项目以利用 ECharts 的强大可视化功能。对于更高级的定制需求，如事件处理和扩展功能的应用，详细阅读官方文档将是最佳实践。

ngx-echarts An angular (ver >= 2.x) directive for ECharts (ver >= 3.x) 项目地址: https://gitcode.com/gh_mirrors/ng/ngx-echarts