Fix resetting datazoom issue

This commit is contained in:
Matthias 2020-12-21 20:37:42 +01:00
parent 45e167265f
commit 68b748a874

View File

@ -170,6 +170,23 @@ export default class CandleChart extends Vue {
splitLine: { show: false }, splitLine: { show: false },
}, },
], ],
dataZoom: [
// Start values are recalculated once the data is known
{
type: 'inside',
xAxisIndex: [0, 1],
start: 80,
end: 100,
},
{
show: true,
xAxisIndex: [0, 1],
type: 'slider',
bottom: 10,
start: 80,
end: 100,
},
],
// visualMap: { // visualMap: {
// // TODO: this would allow to colorize volume bars (if we'd want this) // // TODO: this would allow to colorize volume bars (if we'd want this)
// // Needs green / red indicator column in data. // // Needs green / red indicator column in data.
@ -188,10 +205,11 @@ export default class CandleChart extends Vue {
// ], // ],
// }, // },
}; };
this.updateChart(); console.log('Initialized');
this.updateChart(true);
} }
updateChart() { updateChart(initial = false) {
if (!this.hasData) { if (!this.hasData) {
return; return;
} }
@ -205,7 +223,26 @@ export default class CandleChart extends Vue {
const colSellData = this.dataset.columns.findIndex((el) => el === '_sell_signal_open'); const colSellData = this.dataset.columns.findIndex((el) => el === '_sell_signal_open');
const subplotCount = const subplotCount =
'subplots' in this.plotConfig ? Object.keys(this.plotConfig.subplots).length : 0; 'subplots' in this.plotConfig ? Object.keys(this.plotConfig.subplots).length : 0;
const startingZoom = (1 - 250 / this.dataset.length) * 100;
if (this.chartOptions?.dataZoom && Array.isArray(this.chartOptions?.dataZoom)) {
// Only set zoom once ...
if (initial) {
const startingZoom = (1 - 250 / this.dataset.length) * 100;
this.chartOptions.dataZoom.forEach((el, i) => {
if (this.chartOptions && this.chartOptions.dataZoom) {
this.chartOptions.dataZoom[i].start = startingZoom;
}
});
} else {
// Remove start/end settings after chart initialization to avoid chart resetting
this.chartOptions.dataZoom.forEach((el, i) => {
if (this.chartOptions && this.chartOptions.dataZoom) {
delete this.chartOptions.dataZoom[i].start;
delete this.chartOptions.dataZoom[i].end;
}
});
}
}
const options: echarts.EChartOption = { const options: echarts.EChartOption = {
dataset: { dataset: {
@ -227,22 +264,7 @@ export default class CandleChart extends Vue {
height: '10%', height: '10%',
}, },
], ],
dataZoom: [
{
type: 'inside',
xAxisIndex: [0, 1],
start: startingZoom,
end: 100,
},
{
show: true,
xAxisIndex: [0, 1],
type: 'slider',
bottom: 10,
start: startingZoom,
end: 100,
},
],
series: [ series: [
{ {
name: 'Candles', name: 'Candles',