正文

在Angular项目中集成ECharts图表库，通常只需执行两条npm安装命令，并在模块中引入即可，流程看似简单。然而不少开发者实际操作时却频频踩坑——安装完成后，发现import语句中的type被标红，报错导致项目无法继续，令人困扰。

先来看标准的安装步骤：

npm install echarts -S
npm install ngx-echarts -S

然而，如果你执行完上述命令后，编辑器中将import * as echarts from 'echarts'标记为红色错误，这通常是因为缺少TypeScript的类型定义文件。解决方法很简单，额外安装一条命令即可：

npm install echarts -S
npm install ngx-echarts -S
npm install @types/echarts -D

安装完成后，请务必在模块文件中注册NgxEchartsModule，以app.module.ts为例：

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

按照这个流程操作后，红色报错基本会消失。实际上，许多类似错误都是由于类型声明未及时更新所致，只需安装@types/echarts即可轻松解决，算不上复杂问题。