526互联

【记录】Angular 中使用 eChart

发布时间 2023-09-07 09:48:29作者: 哆啦梦乐园

使用echart，要注意版本的对应关系

  • v16.x for Angular >= 16
  • v15.x for Angular >= 15
  • v14.x for Angular >= 14
  • v8.x for Angular >= 13
  • v7.x for Angular >= 11
  • v6.x for Angular >= 10, < 11
  • v5.x for Angular >= 6, < 10
  • v2.3.1 for Angular < 6

该项目的开源地址为：https://github.com/xieziyu/ngx-echarts
如果都是最新版本

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

查看angular版本

ng version

我的是13.X
对应

npm install echarts@5.3.3 -S
npm install ngx-echarts@8.0.1 -S

完成后，如下步骤开始使用：

首先，导入您的应用程序模块（或任何其他适当的角度模块）：NgxEchartsModule

import { NgxEchartsModule } from 'ngx-echarts';

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

我放在特定模块的，暂没有定制echart模块去减小打包大小。

网上很多文章说用这个

import * as echarts from 'echarts';

但这会减慢初始渲染速度，因为它会将整个电子图表加载到主包中。

然后：在具有预定义高度的 div 中使用指令。（从 v2.0 开始，默认高度：400px）echarts

在html里

<div echarts [options]="chartOption" class="demo-chart"></div>

代码里：

import { EChartsOption } from 'echarts';

// ...

chartOption: EChartsOption = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
    },
  ],
};

完成试用。

有人说可以下载安装echarts的ts支持，因为echarts是js写的，而angular是ts，安装这个是为了API提示，我没装。

npm install @types/echarts --save

其它内容，后续完善……