plot - Handling Zoom and Decimation in ECharts with Vue.js and Backend Data Constraints - Stack Overflow

admin管理员组

文章数量:1025251

Enhanced Version with Formatting

---

Problem Description

I'm using ECharts with Vue.js + Quasar, along with a backend server that manages data decimation (e.g., keeping only 1 point out of n to return a maximum of 1000 points). This is necessary because I have a dataset with over 1,000,000 points.

---

The Issue

When I zoom in (e.g., from 10% to 90% of the dataset), the frontend sends the zoom range to the backend, which then returns 1000 points for that range. However, these 1000 points now become the new "global" dataset, making it impossible to zoom back out.

Additionally, if I zoom further within this subset (e.g., zooming 10–90% of the new range), nothing changes because the backend interprets these percentages relative to the original full dataset.

---

Questions

• Is my explanation clear?
• Do you have any alternative ideas or suggestions to handle this problem?

Thanks in advance!

Ideas I've Considered (but am unsure about):

1. Adjust percentages dynamically:

   • When zooming in, calculate the current zoom percentage and combine it with the new zoom level.
   • When zooming out, calculate the inverse to adjust the exact percentage range for the original dataset.
   • For panning (moving left or right), dynamically adjust the range by adding/subtracting percentages (e.g., if the zoom is between 40% and 50%, moving left might shift the range to 35%–45%).

2. Backend-based solution using octrees:

   • The backend could use an octree-like structure to manage zoomed data efficiently, but I’d prefer something simpler if possible.

Enhanced Version with Formatting

---

Problem Description

I'm using ECharts with Vue.js + Quasar, along with a backend server that manages data decimation (e.g., keeping only 1 point out of n to return a maximum of 1000 points). This is necessary because I have a dataset with over 1,000,000 points.

---

The Issue

When I zoom in (e.g., from 10% to 90% of the dataset), the frontend sends the zoom range to the backend, which then returns 1000 points for that range. However, these 1000 points now become the new "global" dataset, making it impossible to zoom back out.

Additionally, if I zoom further within this subset (e.g., zooming 10–90% of the new range), nothing changes because the backend interprets these percentages relative to the original full dataset.

---

Questions

• Is my explanation clear?
• Do you have any alternative ideas or suggestions to handle this problem?

Thanks in advance!

Ideas I've Considered (but am unsure about):

1. Adjust percentages dynamically:

   • When zooming in, calculate the current zoom percentage and combine it with the new zoom level.
   • When zooming out, calculate the inverse to adjust the exact percentage range for the original dataset.
   • For panning (moving left or right), dynamically adjust the range by adding/subtracting percentages (e.g., if the zoom is between 40% and 50%, moving left might shift the range to 35%–45%).

2. Backend-based solution using octrees:

   • The backend could use an octree-like structure to manage zoomed data efficiently, but I’d prefer something simpler if possible.

• vue.js
• plot
• echarts
• quasar
• decimation

Share Improve this question Follow asked Nov 18, 2024 at 13:04 NikoProg NikoProg 111 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Can you not just set min/max of your axes and everything is fine? Alternatively, see this post for a similar question.

Example:

const data = [
  [1, 4862.4], [2, 5294.7], [3, 5934.5], [4, 7171.0], [5, 8964.4], [6, 10202.2],
  [7, 11962.5], [8, 14928.3], [9, 16909.2], [10, 18547.9], [11, 21617.8], [12, 26638.1],
  [13, 34634.4], [14, 46759.4], [15, 58478.1], [16, 67884.6], [17, 74462.6], [18, 79395.7]
];
const xRange = 18;

option = {
  dataset: [{ source: data }],
  dataZoom: [{
    type: 'slider',
    xAxisIndex: 0,
    realtime: false
  }],
  xAxis: {min: 0, max: 18},
  yAxis: {},
  series: [{ type: 'scatter' }]
};


myChart.on('dataZoom', function (params) {
  const startPercentage = params.start;
  const endPercantage = params.end;
  const lowerBound = xRange * startPercentage * 0.01;
  const upperBound = xRange * endPercantage * 0.01;
  const newData = data.filter((point) => point[0] >= lowerBound && point[0] <= upperBound);
  myChart.setOption({
    dataset: [{
      source: newData
    }]
  });
});

Enhanced Version with Formatting

---

Problem Description

I'm using ECharts with Vue.js + Quasar, along with a backend server that manages data decimation (e.g., keeping only 1 point out of n to return a maximum of 1000 points). This is necessary because I have a dataset with over 1,000,000 points.

---

The Issue

When I zoom in (e.g., from 10% to 90% of the dataset), the frontend sends the zoom range to the backend, which then returns 1000 points for that range. However, these 1000 points now become the new "global" dataset, making it impossible to zoom back out.

Additionally, if I zoom further within this subset (e.g., zooming 10–90% of the new range), nothing changes because the backend interprets these percentages relative to the original full dataset.

---

Questions

• Is my explanation clear?
• Do you have any alternative ideas or suggestions to handle this problem?

Thanks in advance!

Ideas I've Considered (but am unsure about):

1. Adjust percentages dynamically:

   • When zooming in, calculate the current zoom percentage and combine it with the new zoom level.
   • When zooming out, calculate the inverse to adjust the exact percentage range for the original dataset.
   • For panning (moving left or right), dynamically adjust the range by adding/subtracting percentages (e.g., if the zoom is between 40% and 50%, moving left might shift the range to 35%–45%).

2. Backend-based solution using octrees:

   • The backend could use an octree-like structure to manage zoomed data efficiently, but I’d prefer something simpler if possible.

Enhanced Version with Formatting

---

Problem Description

I'm using ECharts with Vue.js + Quasar, along with a backend server that manages data decimation (e.g., keeping only 1 point out of n to return a maximum of 1000 points). This is necessary because I have a dataset with over 1,000,000 points.

---

The Issue

When I zoom in (e.g., from 10% to 90% of the dataset), the frontend sends the zoom range to the backend, which then returns 1000 points for that range. However, these 1000 points now become the new "global" dataset, making it impossible to zoom back out.

Additionally, if I zoom further within this subset (e.g., zooming 10–90% of the new range), nothing changes because the backend interprets these percentages relative to the original full dataset.

---

Questions

• Is my explanation clear?
• Do you have any alternative ideas or suggestions to handle this problem?

Thanks in advance!

Ideas I've Considered (but am unsure about):

1. Adjust percentages dynamically:

   • When zooming in, calculate the current zoom percentage and combine it with the new zoom level.
   • When zooming out, calculate the inverse to adjust the exact percentage range for the original dataset.
   • For panning (moving left or right), dynamically adjust the range by adding/subtracting percentages (e.g., if the zoom is between 40% and 50%, moving left might shift the range to 35%–45%).

2. Backend-based solution using octrees:

   • The backend could use an octree-like structure to manage zoomed data efficiently, but I’d prefer something simpler if possible.

• vue.js
• plot
• echarts
• quasar
• decimation

Share Improve this question Follow asked Nov 18, 2024 at 13:04 NikoProg NikoProg 111 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Can you not just set min/max of your axes and everything is fine? Alternatively, see this post for a similar question.

Example:

const data = [
  [1, 4862.4], [2, 5294.7], [3, 5934.5], [4, 7171.0], [5, 8964.4], [6, 10202.2],
  [7, 11962.5], [8, 14928.3], [9, 16909.2], [10, 18547.9], [11, 21617.8], [12, 26638.1],
  [13, 34634.4], [14, 46759.4], [15, 58478.1], [16, 67884.6], [17, 74462.6], [18, 79395.7]
];
const xRange = 18;

option = {
  dataset: [{ source: data }],
  dataZoom: [{
    type: 'slider',
    xAxisIndex: 0,
    realtime: false
  }],
  xAxis: {min: 0, max: 18},
  yAxis: {},
  series: [{ type: 'scatter' }]
};


myChart.on('dataZoom', function (params) {
  const startPercentage = params.start;
  const endPercantage = params.end;
  const lowerBound = xRange * startPercentage * 0.01;
  const upperBound = xRange * endPercantage * 0.01;
  const newData = data.filter((point) => point[0] >= lowerBound && point[0] <= upperBound);
  myChart.setOption({
    dataset: [{
      source: newData
    }]
  });
});

本文标签： plotHandling Zoom and Decimation in ECharts with Vuejs and Backend Data ConstraintsStack Overflow