'Apache Echarts - Make the charts “lazy-initialize” only when they scroll into view

is it possible to do something like this in Apache Echarts?

https://www.amcharts.com/docs/v3/tutorials/make-the-charts-lazy-initialize-only-when-they-scroll-into-view/

They have it done in their docsbook (ie here https://echarts.apache.org/handbook/en/how-to/chart-types/bar/basic-bar/), but there is no tutorial for this topic...

Solution 1:^[1]

it is roughly like this.
when I scroll to this position,setOption

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

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
};
    
var target = $(".MyChart").offset().top;
var interval = setInterval(function() {
    if ($(window).scrollTop() >= target-500) { //-500 is I set at will.
    myChart.setOption(option);
    clearInterval(interval);
    }
}, 250);

body { height: 3000px; }
.MyChart { margin-top: 1000px; }

<!DOCTYPE html>
    <html lang="Zh-TW">
    <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
    <meta charset="utf-8">
    <style>
body { height: 3000px; }
.MyChart { margin-top: 1000px; }
    </style>
    </head>
    <body>
<div class="MyChart" id="main" style="width:500px;height:500px;"></div>
    <script>
</script>
    </body>
    </html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	???

'Apache Echarts - Make the charts “lazy-initialize” only when they scroll into view

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]