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?
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