基础区EChart不能用ngx-echarts编译？答案

【问题标题】：Basic Area EChart not compiling with ngx-echarts?基础区EChart不能用ngx-echarts编译？
【发布时间】：2022-11-24 03:45:17
【问题描述】：

我正在尝试让 basic area echart 和 ngx-echarts 一起在 Stackblitz 上工作。

我已经安装了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"'.

有任何想法吗？

【问题讨论】：

标签： javascript angular typescript echarts ngx-echarts

【解决方案1】：

好的，明白了。显然，必须在 ngOnInit 中初始化保存图表配置的属性才能呈现图表。

这是一个工作演示。

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

【讨论】：