Using EChartOption to type the options of an Angular 16 NgxECharts Area Chart?

Question

Trying to type the options as EChartsOption instead of any in this stackblitz demo.

And if the switch is made like this:

  options!: EChartsOption;
  //options!: any;

Then the linting creates this error:

Type '{ normal: { color: string; }; emphasis: { color: string; borderColor: string; borderWidth: number; }; }' is not assignable to type 'ItemStyleOption<CallbackDataParams>'.
Object literal may only specify known properties, and 'normal' does not exist in type 'ItemStyleOption<CallbackDataParams>'.

And I'm trying to figure out whether the chart configuration is wrong or the EChartsOption type is not complete.

When the type is set to any, the chart renders fine, and it does support the normal declaration as defined:

normal: {
       color: 'rgba(0,0,0,0.3)',
},

Looking at the ECharts documentation I don't see itemStyle listed under series.

However it does work ...

Thoughts?

Answer 1

itemStyle is listed under series:{type: 'line', ...}, [docs link]. (Not very relevant, but I see you linked to echarts docs for v4 but your stackblitz is using the latest v5.)

However, itemStyle doesn't have neither a normal nor an emphasis subcategory. The emphasis itemStyle is under emphasis.itemStyle [docs link]

So, the itemStyle options should be structured like this:

{
   series: [{
      type: 'line',
      // ... other options
      itemStyle:{
         color: 'rgba(0,0,0,0.3)', // for "normal"
       },
       emphasis:{
          itemStyle:{
              color: 'rgba(0,0,0,0)',
              borderColor: 'rgba(0,0,0,0)',
              borderWidth: 2,
          }
       }
    }]
}