¿Es posible hacer algo como esto en Apache Echarts?
Lo tienen hecho en su docsbook (es decir, aquí https://echarts.apache.org/handbook/en/how-to/chart-types/bar/basic-bar/ ), pero no hay un tutorial para este tema. .
es más o menos así.
cuando me desplazo a esta posición, 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>