Как сохранить исходные данные при использовании DataZoom в Echarts? ⇐ Javascript

[Anonymous]

Я работаю над проектом, используя Echarts для визуализации большого набора данных. Я хочу отобразить данные как процентное изменение по сравнению с базовым значением и позволить пользователям увеличивать и выходить. Тем не менее, я сталкиваюсь с проблемами с поддержанием исходных данных при увеличении. Диаграмма показывает только отфильтрованные данные, и я не могу масштабировать, чтобы увидеть весь диапазон данных. < /P>

Код: Выделить всё

import * as echarts from 'echarts';

const chartDom = document.getElementById('main');
const myChart = echarts.init(chartDom);

let base = +new Date(1988, 9, 3);
let oneDay = 24 * 3600 * 1000;
let data = [[base, Math.random() * 300]];
for (let i = 1; i < 20000; i++) {
let now = new Date((base += oneDay));
data.push([+now, Math.round((Math.random() - 0.5) * 20 + data[i - 1][1])]);
}

function calculatePercentage(data) {
const baseValue = data[0][1];
return data.map(([date, value]) => [date, (((value - baseValue) / baseValue) * 100).toFixed(2)]);
}

const originalData = calculatePercentage(data);

export function showData() {
const option = {
tooltip: {
trigger: 'axis',
position: function (pt) {
return [pt[0], '10%'];
}
},
title: {
left: 'center',
text: 'Large Area Chart'
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'time',
boundaryGap: false
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%']
},
dataZoom: [
{
type: 'inside',
start: 0,
end: 100,
rangeMode: ['value', 'value']
},
{
start: 0,
end: 100,
rangeMode: ['value', 'value']
}
],
series: [
{
name: 'Fake Data',
type: 'line',
smooth: true,
symbol: 'none',
areaStyle: {},
data: originalData
}
]
};

myChart.setOption(option);

myChart.on('dataZoom', function (params) {
const dataZoom = myChart.getOption().dataZoom[0];
const startValue = dataZoom.startValue;
const endValue = dataZoom.endValue;

const startTimestamp = new Date(startValue).getTime();
const endTimestamp = new Date(endValue).getTime();

const filteredData = data.filter(([date]) => {
const dateValue = new Date(date).getTime();
return dateValue >= startTimestamp && dateValue 

Подробнее здесь: [url]https://stackoverflow.com/questions/79451334/how-to-maintain-original-data-while-using-datazoom-in-echarts[/url]