Apache Echarts - 仅在图表滚动到视图时才使图表“延迟初始化”
[英]Apache Echarts - Make the charts “lazy-initialize” only when they scroll into view
问题描述
is it possible to do something like this in Apache Echarts?
是否可以在 Apache Echarts 中做这样的事情？
https://www.amcharts.com/docs/v3/tutorials/make-the-charts-lazy-initialize-only-when-they-scroll-into-view/ 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...他们在他们的文档中完成了它（即这里https://echarts.apache.org/handbook/en/how-to/chart-types/bar/basic-bar/ ），但是没有关于这个主题的教程。 .
1 个解决方案
解决方案1
0 2022-01-27 03:55:54
it is roughly like this.大致是这样的。
when I scroll to this position,setOption当我滚动到这个 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.