is it possible to do something like this in Apache Echarts?
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...
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>