在Angular11版本中使用echarts图表遇到的坑

1. 安装 echarts 和 ngx-echarts，版本兼容的坑。

   

   解决方法：npm install [email protected] [email protected]

2. 启动报错的坑

   报错缺少 @juggle/resize-observer 依赖

   解决方法：npm install @juggle/resize-observer -D。

3. 整体引入过程

// 下载依赖：
npm install [email protected]   
npm [email protected]
npm install @juggle/resize-observer -D


// Module.ts 中引入
import { NgxEchartsModule } from 'ngx-echarts';
@NgModule({
 imports: [
    NgxEchartsModule， // 引入module
 ],
})


// html:
<div style="400px;height:560px" echarts [options]="chartsOption" ></div>


// ts:
chartsOption : any = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
    }]
}