1.安装库和依赖
npm i echarts --save npm i ngx-echarts --save npm i resize-observer-polyfill --save-dev
2.相关配置
在module添加
import { NgxEchartsModule } from 'ngx-echarts'; import * as echarts from 'echarts'; imports: [ NgxEchartsModule.forRoot({ echarts }), ],
3.页面
ts
import { Component, OnInit } from '@angular/core'; import { EChartsOption } from 'echarts'; @Component({ selector: 'app-demo001', templateUrl: './demo001.component.html', styleUrls: ['./demo001.component.scss'] }) export class Demo001Component implements OnInit { data: EChartsOption = {}; constructor() { } ngOnInit(): void { this.data = { title: { text: 'ECharts 入门示例' }, tooltip: {}, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] } } }
html
<div echarts [options] = "data"></div>