Apache ECharts Type 'string' is not assignable to type '"pictorialBar"'?

Question

This demo works.

However the options use any and I'm trying to convert them over to the EChartOption type.

And this is what I have so far and the demo compiles fine with this (With type: 'bar' commented out).

  testOptions: EChartsOption = Object.assign(
    {},
    {
      grid: {
        left: '6%',
        right: '6%',
        bottom: '4%',
        top: '3%',
        containLabel: true,
      },
      xAxis: {
        axisLabel: {
          color: 'gray',
          fontSize: '16',
        },
        axisLine: {
          lineStyle: {
            color: 'blue',
            width: 4,
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            color: 'gray',
            width: 1,
          },
        },
      },
      yAxis: {
        data: this.labels,
        axisLabel: {
          color: 'pink',
          fontSize: 22,
        },
        axisLine: {
          lineStyle: {
            color: 'orange',
            width: 4,
          },
        },
        axisTick: {
          show: false,
        },
      },
      series: [
        {
          // For shadow
          //type: 'bar',
          data: this.data.map((v) => this.maxValue),
          cursor: 'default',
          itemStyle: {
            normal: {
              color: 'gray',
            },
            opacity: 1,
          },
          barWidth: '40%',
          barGap: '-100%',
          barCategoryGap: '30%',
          animation: false,
          z: 1,
        },
      ],
    }
  );

If type: 'bar' is commented in, the demo produces the compilation error.

Error in src/echart.component.ts (23:3)
Type '{ grid: { left: string; right: string; bottom: string; top: string; containLabel: boolean; }; xAxis: { axisLabel: { color: string; fontSize: string; }; axisLine: { lineStyle: { color: string; width: number; }; }; axisTick: { ...; }; splitLine: { ...; }; }; yAxis: { ...; }; series: { ...; }[]; }' is not assignable to type 'EChartsOption'.
Types of property 'series' are incompatible.
Type '{ type: string; data: number[]; cursor: string; itemStyle: { normal: { color: string; }; opacity: number; }; barWidth: string; barGap: string; barCategoryGap: string; animation: boolean; z: number; }[]' is not assignable to type 'SeriesOption$1 | SeriesOption$1[] | undefined'.
Type '{ type: string; data: number[]; cursor: string; itemStyle: { normal: { color: string; }; opacity: number; }; barWidth: string; barGap: string; barCategoryGap: string; animation: boolean; z: number; }[]' is not assignable to type 'BarSeriesOption$1 | LineSeriesOption$1 | ScatterSeriesOption$1 | PieSeriesOption$1 | ... 18 more ... | SeriesOption$1[]'.
Type '{ type: string; data: number[]; cursor: string; itemStyle: { normal: { color: string; }; opacity: number; }; barWidth: string; barGap: string; barCategoryGap: string; animation: boolean; z: number; }[]' is not assignable to type 'SeriesOption$1[]'.
Type '{ type: string; data: number[]; cursor: string; itemStyle: { normal: { color: string; }; opacity: number; }; barWidth: string; barGap: string; barCategoryGap: string; animation: boolean; z: number; }' is not assignable to type 'SeriesOption$1'.
Type '{ type: string; data: number[]; cursor: string; itemStyle: { normal: { color: string; }; opacity: number; }; barWidth: string; barGap: string; barCategoryGap: string; animation: boolean; z: number; }' is not assignable to type 'PictorialBarSeriesOption$1'.
Type '{ type: string; data: number[]; cursor: string; itemStyle: { normal: { color: string; }; opacity: number; }; barWidth: string; barGap: string; barCategoryGap: string; animation: boolean; z: number; }' is not assignable to type 'PictorialBarSeriesOption'.
Types of property 'type' are incompatible.
Type 'string' is not assignable to type '"pictorialBar"'.

So trying to figure this out, because bar should work fine for the type option according to the Apache ECharts documentation.

Thoughts?

Answer 1

OK figured it out ... It's because Object.assign is used to create the options instance.

If we just assign the options with an object instance it works fine.

This is a demo.

https://stackblitz.com/edit/stackblitz-starters-25c1rp?file=src%2Fechart.component.ts