基本区域EChart不编译与ngx？

Question

我试图让基本面积图与ngx-echarts一起在斯塔克布利茨上工作。

我已经安装了ngx-echarts并导入了模块。我在app.component.ts中添加了如下选项：

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

并在app.component.html中声明了图表。

<div echarts [autoResize]="false" [options]="option" class="demo-chart"></div>

它产生了一个很长的错误：

Type '{ xAxis: { type: string; boundaryGap: boolean; data: string[]; }; yAxis: { type: string; }; series: { data: number[]; type: string; areaStyle: {}; }[]; }' is not assignable to type 'EChartsOption'.
Types of property 'xAxis' are incompatible.
Type '{ type: string; boundaryGap: boolean; data: string[]; }' is not assignable to type 'XAXisOption | XAXisOption[]'.
Type '{ type: string; boundaryGap: boolean; data: string[]; }' is not assignable to type 'CategoryAxisBaseOption & { gridIndex?: number; gridId?: string; position?: CartesianAxisPosition; offset?: number; categorySortInfo?: OrdinalSortInfo; } & { ...; }'.
Type '{ type: string; boundaryGap: boolean; data: string[]; }' is not assignable to type 'CategoryAxisBaseOption'.
Types of property 'type' are incompatible.
Type 'string' is not assignable to type '"category"'.

有什么想法吗？

Answer 1

好的算出来了。显然，保存图表配置的属性必须在ngOnInit中初始化，这样图表才能呈现。

这是一个工作演示。

https://stackblitz.com/edit/angular-ivy-fubqan?file=src%2Fapp%2Fapp.component.ts