Серия обновлений электронных диаграмм MarkLine без ссылки sh весь график - PullRequest
Новая
       85

Серия обновлений электронных диаграмм MarkLine без ссылки sh весь график

0 голосов
/ 28 мая 2020

У меня есть огромный набор данных, который нужно отобразить на диаграмме рассеяния. Я использую Vue. js с диаграммами vue. Проблема, с которой я сталкиваюсь, заключается в том, что когда я пытаюсь обновить любую серию (даже добавляя новую), вся диаграмма обновляется, что оказывает огромное влияние на производительность.

Вот код, в котором я воспроизвожу проблему:

https://codepen.io/boosterafk/pen/gOaNazR. 

let seriesData = [];
let xAxisData = [];
let yAxisData = ['0','1'];
for(let i = 0; i < 1800; i++){
  xAxisData.push(i);
  for(let j = 0; j < 3; j++){
    seriesData.push([i,j, .4])
  }
}

var container = document.getElementById('main');
var chart = echarts.init(container);
chart.setOption({
  xAxis: {
    data: xAxisData,
  },
  yAxis: {
    data: yAxisData,
  },
  series: [{
    type: 'scatter',
    data: seriesData,
    markLine: {
       data: [ { name: 0, 
               xAxis: 10, 
               label: { 
                 formatter: 0,
                 position: 0,
               }, 
               }, ],
    },
  }],
});

index =10;
window.setInterval(function(){
  chart.setOption({
  series: [{
    markLine: {
       data: [ { name: index, 
               xAxis: index, 
               label: { 
                 position: index,
               }, 
               }, ],
    },
  }],
});
  index+=10;
}, 1000);
#main {
  width: 600px;
  height: 400px;
  border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.7.0/echarts.min.js"></script>

<div id="main"></div>

Как решить эту проблему? Что не так?

...