Skip to content

Commit 1d9e800

Browse files
ArmourArmour
committed
Fix(echart): update echart type definition usage
1 parent 3d175cd commit 1d9e800

File tree

8 files changed

+126
-164
lines changed

8 files changed

+126
-164
lines changed

‎src/components/Charts/BarChart.vue

+11-20
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
</template>
88

99
<script lang="ts">
10-
import echarts from 'echarts'
10+
import echarts, { EChartOption } from 'echarts'
1111
import { Component, Prop } from 'vue-property-decorator'
1212
import { mixins } from 'vue-class-component'
1313
import ResizeMixin from './mixins/resize'
@@ -37,7 +37,6 @@ export default class extends mixins(ResizeMixin) {
3737
3838
private initChart() {
3939
this.chart = echarts.init(document.getElementById(this.id) as HTMLDivElement)
40-
4140
const xAxisData: string[] = []
4241
const data: number[] = []
4342
const data2: number[] = []
@@ -91,12 +90,10 @@ export default class extends mixins(ResizeMixin) {
9190
data: data2,
9291
z: 1,
9392
itemStyle: {
94-
normal: {
95-
opacity: 0.4,
96-
barBorderRadius: 5,
97-
shadowBlur: 3,
98-
shadowColor: '#111'
99-
}
93+
opacity: 0.4,
94+
barBorderRadius: 5,
95+
shadowBlur: 3,
96+
shadowColor: '#111'
10097
}
10198
}, {
10299
name: 'Simulate Shadow',
@@ -108,16 +105,12 @@ export default class extends mixins(ResizeMixin) {
108105
animationEasing: 'linear',
109106
animationDuration: 1200,
110107
lineStyle: {
111-
normal: {
112-
color: 'transparent'
113-
}
108+
color: 'transparent'
114109
},
115110
areaStyle: {
116-
normal: {
117-
color: '#08263a',
118-
shadowBlur: 50,
119-
shadowColor: '#000'
120-
}
111+
color: '#08263a',
112+
shadowBlur: 50,
113+
shadowColor: '#000'
121114
}
122115
}, {
123116
name: 'front',
@@ -126,9 +119,7 @@ export default class extends mixins(ResizeMixin) {
126119
xAxisIndex: 1,
127120
z: 3,
128121
itemStyle: {
129-
normal: {
130-
barBorderRadius: 5
131-
}
122+
barBorderRadius: 5
132123
}
133124
}],
134125
animationEasing: 'elasticOut',
@@ -139,7 +130,7 @@ export default class extends mixins(ResizeMixin) {
139130
animationDelayUpdate(idx: number) {
140131
return idx * 20
141132
}
142-
})
133+
} as EChartOption<EChartOption.SeriesBar>)
143134
}
144135
}
145136
</script>

‎src/components/Charts/LineChart.vue

+43-64
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
</template>
88

99
<script lang="ts">
10-
import echarts from 'echarts'
10+
import echarts, { EChartOption } from 'echarts'
1111
import { Component, Prop } from 'vue-property-decorator'
1212
import { mixins } from 'vue-class-component'
1313
import ResizeMixin from './mixins/resize'
@@ -37,7 +37,6 @@ export default class extends mixins(ResizeMixin) {
3737
3838
private initChart() {
3939
this.chart = echarts.init(document.getElementById(this.id) as HTMLDivElement)
40-
4140
this.chart.setOption({
4241
backgroundColor: '#394056',
4342
title: {
@@ -51,7 +50,7 @@ export default class extends mixins(ResizeMixin) {
5150
left: '1%'
5251
},
5352
tooltip: {
54-
trigger: 'axis' as 'axis'
53+
trigger: 'axis'
5554
},
5655
legend: {
5756
top: 20,
@@ -84,7 +83,7 @@ export default class extends mixins(ResizeMixin) {
8483
data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
8584
}],
8685
yAxis: [{
87-
type: 'value' as 'value',
86+
type: 'value',
8887
name: '(%)',
8988
axisTick: {
9089
show: false
@@ -112,30 +111,23 @@ export default class extends mixins(ResizeMixin) {
112111
symbolSize: 5,
113112
showSymbol: false,
114113
lineStyle: {
115-
normal: {
116-
width: 1
117-
}
114+
width: 1
118115
},
119116
areaStyle: {
120-
normal: {
121-
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
122-
offset: 0,
123-
color: 'rgba(137, 189, 27, 0.3)'
124-
}, {
125-
offset: 0.8,
126-
color: 'rgba(137, 189, 27, 0)'
127-
}], false),
128-
shadowColor: 'rgba(0, 0, 0, 0.1)',
129-
shadowBlur: 10
130-
}
117+
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
118+
offset: 0,
119+
color: 'rgba(137, 189, 27, 0.3)'
120+
}, {
121+
offset: 0.8,
122+
color: 'rgba(137, 189, 27, 0)'
123+
}], false) as any,
124+
shadowColor: 'rgba(0, 0, 0, 0.1)',
125+
shadowBlur: 10
131126
},
132127
itemStyle: {
133-
normal: {
134-
color: 'rgb(137,189,27)',
135-
borderColor: 'rgba(137,189,2,0.27)',
136-
borderWidth: 12
137-
138-
}
128+
color: 'rgb(137,189,27)',
129+
borderColor: 'rgba(137,189,2,0.27)',
130+
borderWidth: 12
139131
},
140132
data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
141133
}, {
@@ -146,30 +138,23 @@ export default class extends mixins(ResizeMixin) {
146138
symbolSize: 5,
147139
showSymbol: false,
148140
lineStyle: {
149-
normal: {
150-
width: 1
151-
}
141+
width: 1
152142
},
153143
areaStyle: {
154-
normal: {
155-
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
156-
offset: 0,
157-
color: 'rgba(0, 136, 212, 0.3)'
158-
}, {
159-
offset: 0.8,
160-
color: 'rgba(0, 136, 212, 0)'
161-
}], false),
162-
shadowColor: 'rgba(0, 0, 0, 0.1)',
163-
shadowBlur: 10
164-
}
144+
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
145+
offset: 0,
146+
color: 'rgba(0, 136, 212, 0.3)'
147+
}, {
148+
offset: 0.8,
149+
color: 'rgba(0, 136, 212, 0)'
150+
}], false) as any,
151+
shadowColor: 'rgba(0, 0, 0, 0.1)',
152+
shadowBlur: 10
165153
},
166154
itemStyle: {
167-
normal: {
168-
color: 'rgb(0,136,212)',
169-
borderColor: 'rgba(0,136,212,0.2)',
170-
borderWidth: 12
171-
172-
}
155+
color: 'rgb(0,136,212)',
156+
borderColor: 'rgba(0,136,212,0.2)',
157+
borderWidth: 12
173158
},
174159
data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
175160
}, {
@@ -180,33 +165,27 @@ export default class extends mixins(ResizeMixin) {
180165
symbolSize: 5,
181166
showSymbol: false,
182167
lineStyle: {
183-
normal: {
184-
width: 1
185-
}
168+
width: 1
186169
},
187170
areaStyle: {
188-
normal: {
189-
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
190-
offset: 0,
191-
color: 'rgba(219, 50, 51, 0.3)'
192-
}, {
193-
offset: 0.8,
194-
color: 'rgba(219, 50, 51, 0)'
195-
}], false),
196-
shadowColor: 'rgba(0, 0, 0, 0.1)',
197-
shadowBlur: 10
198-
}
171+
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
172+
offset: 0,
173+
color: 'rgba(219, 50, 51, 0.3)'
174+
}, {
175+
offset: 0.8,
176+
color: 'rgba(219, 50, 51, 0)'
177+
}], false) as any,
178+
shadowColor: 'rgba(0, 0, 0, 0.1)',
179+
shadowBlur: 10
199180
},
200181
itemStyle: {
201-
normal: {
202-
color: 'rgb(219,50,51)',
203-
borderColor: 'rgba(219,50,51,0.2)',
204-
borderWidth: 12
205-
}
182+
color: 'rgb(219,50,51)',
183+
borderColor: 'rgba(219,50,51,0.2)',
184+
borderWidth: 12
206185
},
207186
data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
208187
}]
209-
})
188+
} as EChartOption<EChartOption.SeriesLine>)
210189
}
211190
}
212191

‎src/components/Charts/MixedChart.vue

+26-33
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
</template>
88

99
<script lang="ts">
10-
import echarts from 'echarts'
10+
import echarts, { EChartOption } from 'echarts'
1111
import { Component, Prop } from 'vue-property-decorator'
1212
import { mixins } from 'vue-class-component'
1313
import ResizeMixin from './mixins/resize'
@@ -37,7 +37,6 @@ export default class extends mixins(ResizeMixin) {
3737
3838
private initChart() {
3939
this.chart = echarts.init(document.getElementById(this.id) as HTMLDivElement)
40-
4140
const xData = (function() {
4241
const data = []
4342
for (let i = 1; i < 13; i++) {
@@ -60,7 +59,7 @@ export default class extends mixins(ResizeMixin) {
6059
}
6160
},
6261
tooltip: {
63-
trigger: 'axis' as 'axis'
62+
trigger: 'axis'
6463
},
6564
grid: {
6665
left: '5%',
@@ -153,17 +152,15 @@ export default class extends mixins(ResizeMixin) {
153152
barMaxWidth: 35,
154153
barGap: '10%',
155154
itemStyle: {
156-
normal: {
157-
color: 'rgba(255,144,128,1)',
158-
label: {
159-
show: true,
160-
textStyle: {
161-
color: '#fff'
162-
},
163-
position: 'insideTop',
164-
formatter(p: any) {
165-
return p.value > 0 ? p.value : ''
166-
}
155+
color: 'rgba(255,144,128,1)',
156+
label: {
157+
show: true,
158+
textStyle: {
159+
color: '#fff'
160+
},
161+
position: 'insideTop',
162+
formatter(p: any) {
163+
return p.value > 0 ? p.value : ''
167164
}
168165
}
169166
},
@@ -188,15 +185,13 @@ export default class extends mixins(ResizeMixin) {
188185
type: 'bar',
189186
stack: 'total',
190187
itemStyle: {
191-
normal: {
192-
color: 'rgba(0,191,183,1)',
193-
barBorderRadius: 0,
194-
label: {
195-
show: true,
196-
position: 'top',
197-
formatter(p: any) {
198-
return p.value > 0 ? p.value : ''
199-
}
188+
color: 'rgba(0,191,183,1)',
189+
barBorderRadius: 0,
190+
label: {
191+
show: true,
192+
position: 'top',
193+
formatter(p: any) {
194+
return p.value > 0 ? p.value : ''
200195
}
201196
}
202197
},
@@ -221,15 +216,13 @@ export default class extends mixins(ResizeMixin) {
221216
symbolSize: 10,
222217
symbol: 'circle',
223218
itemStyle: {
224-
normal: {
225-
color: 'rgba(252,230,48,1)',
226-
barBorderRadius: 0,
227-
label: {
228-
show: true,
229-
position: 'top',
230-
formatter(p: any) {
231-
return p.value > 0 ? p.value : ''
232-
}
219+
color: 'rgba(252,230,48,1)',
220+
barBorderRadius: 0,
221+
label: {
222+
show: true,
223+
position: 'top',
224+
formatter(p: any) {
225+
return p.value > 0 ? p.value : ''
233226
}
234227
}
235228
},
@@ -249,7 +242,7 @@ export default class extends mixins(ResizeMixin) {
249242
]
250243
}
251244
]
252-
})
245+
} as EChartOption<EChartOption.SeriesLine | EChartOption.SeriesBar>)
253246
}
254247
}
255248
</script>

0 commit comments

Comments
 (0)