Basic Area Chart Not Compiling

[fireflysemantics]

Hi,

I'm trying to get the basic area chart working on Stackblitz. I've installed ngx-echarts and imported the module. I've added the options to app.component.ts like this:

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: {}
    }
  ]
};

And declared the chart in app.component.html.

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

And it produces this very long error:

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"'.

Any ideas?

[fireflysemantics]

Ok I figured it out. The options for the chart have to be set in ngOnInit otherwise the chart will not render. I'll leave the issue open since it's a little strange that it does not work the other way as well.

https://stackoverflow.com/questions/74551778/basic-area-echart-not-compiling-with-ngx-echarts/74552248#74552248

[xieziyu]

@fireflysemantics
Your option is initialized untyped, so compiler has to infer its type which seems incorrect. You can fix the issue by adding the EChartsOption:

import type { EChartsOption } from 'echarts';

option: EChartsOption = {
  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: {}
    }
  ]
};