[英]Apache Echarts - Make the charts “lazy-initialize” only when they scroll into view
是否可以在 Apache Echarts 中做這樣的事情?
他們在他們的文檔中完成了它(即這里https://echarts.apache.org/handbook/en/how-to/chart-types/bar/basic-bar/ ),但是沒有關於這個主題的教程。 .
大致是這樣的。
當我滾動到這個 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.