This demonstration is functional.
Nevertheless, the options utilize any and my goal is to convert them to the EChartOption type.
This is my current progress and the demonstration compiles successfully with this setup (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 uncommented, the compilation error occurs in the demonstration.
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"'.
Hence, I am attempting to resolve this issue, as bar should function correctly as per the type option indicated in the Apache ECharts documentation.
Any insights or suggestions?