Angular实战记录---使用Echarts及配置项Option解读

原创

于 2019-03-07 09:17:09 发布 · 1.9k 阅读

本文记录了在Angular项目中使用Echarts的过程，包括安装Echarts、在module中引入ngx-echarts，以及在页面中配置和使用Echarts。在组件中设置echarts选项(options)以展示折线图，通过分享折线图的Option配置项，解释各个字段的用途，帮助理解如何在实际项目中应用Echarts。

安装Echarts

在自己的项目目录下安装

npm install echarts --save
npm install ngx-echarts --save

在module中载入ngx-echarts

以备后用。

import { NgxEchartsModule } from 'ngx-echarts';
...

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    NgxEchartsModule
  ],
  ...
})

export class AppModule { }

在页面中使用

xxx.component.html
在目标标签上加 echarts，和 [options]，确定图像在哪里渲染，以什么参数渲染。
```
<div echarts [options]="chartOption" class="demo-chart"></div>
```
xxx.component.scss
设置图像样式，这里只需要设置高度即可。
```
.demo-chart {
	height: 400px;
}
```
xxx.component.ts
option的话在Echarts的Demo里找一个就可以先跑起来，例如