Apache ECharts 类型“string”无法分配给类型““pictorialBar””？

Question

这个演示有效。

但是这些选项使用

any

，我正在尝试将它们转换为

EChartOption

类型。

这就是我到目前为止所拥有的，演示可以很好地编译（已注释掉

type: 'bar'

）。

  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,
        },
      ],
    }
  );

如果注释了

type: 'bar'

，则演示会产生编译错误。

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

所以尝试弄清楚这一点，因为

bar

对于类型选项应该可以正常工作根据Apache ECharts文档。

想法？

Answer 1

好的，明白了...这是因为

Object.assign

用于创建选项实例。

如果我们只是用对象实例分配选项，它就可以正常工作。

这是一个演示。

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