NGX-ECharts 深入指南

本指南将带领您了解如何安装和使用 ngx-echarts，这是一个基于 Angular 的 ECharts 封装库。

1. 目录结构及介绍

在克隆或下载 ngx-echarts 项目后，其基本的目录结构如下：

ngx-echarts/
├── src/                  # 主要源代码目录
│   ├── app/              # 应用程序主要代码
│   │   └── app.module.ts # 核心模块定义
│   ├── assets/           # 资产资源（如图片）
│   ├── environments/     # 环境配置
│   └── themes/            # 主题相关设置
├── e2e/                  # End-to-end 测试目录
├── karma.conf.js         # 单元测试配置
├── package.json          # 项目依赖和脚本
└── README.md             # 项目简介

• src/app: 包含 Angular 应用的主要组件、服务和模块。
• src/assets: 存储静态资源，比如图标或者背景图。
• src/environments: 针对不同环境（开发、生产）的配置文件。
• src/themes: 可以自定义 ECharts 的主题样式。

2. 项目的启动文件介绍

main.ts

这是应用程序的入口点，通常包含以下内容：

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from '../environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

它导入了必要的 Angular 服务，初始化了应用模块 (AppModule) 并检查是否处于生产模式。

polyfills.ts

这个文件包含了为了支持旧版浏览器而需要引入的 polyfill。这些库帮助实现 ES6+ 特性的兼容。

index.html

作为 HTML 入口文件，index.html 是 Angular 应用加载的地方。这里通常包括应用的 <app-root> 标签，以及其他可能的全局 CSS 或 JS 文件。

3. 项目的配置文件介绍

package.json

存储项目依赖和其他信息的 JSON 文件。主要关注以下几个部分：

• dependencies: 生产环境中所需的包。
• devDependencies: 开发时需要的包，例如构建工具和测试框架。
• scripts: 定义命令行操作，如 npm start 和 npm test。

.angular-cli.json 或 angular.json （Angular v6 及以上）

此文件用于配置 Angular CLI 工具。它包括构建选项，如输出目录、样式预处理器以及服务器设置等。

tsconfig.json

TypeScript 编译器的配置文件，控制 TypeScript 编译的行为，如类型检查规则、模块系统等。

enviroment.{dev|prod}.ts

这两个文件分别代表开发和生产环境的配置。可以定制 API 基础路径、API 密钥等应用特定的环境变量。

通过理解这些核心文件和目录，您可以更好地掌握 ngx-echarts 在 Angular 中的应用。接下来，您可以在自己的 Angular 项目中集成 ngx-echarts，并参考其官方文档进一步了解如何创建图表和自定义功能。