曲线图示例"/>
ECharts 动态更新曲线图示例
echarts实现数据从右向左慢慢推进，当时间超过15s限制时，删除最老的数据，添加最新数据
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>ECharts 动态更新曲线图示例</title><!-- 引入ECharts库 --><script src="@5.3.0/dist/echarts.min.js"></script>
</head><body><!-- 创建一个容器用于放置图表 --><div id="chart" style="width: 600px; height: 400px;"></div><script>// 初始化ECharts实例var myChart = echarts.init(document.getElementById('chart'));// 初始化数据，data1和data2分别表示两条曲线的数据var data1 = [];var data2 = [];var maxDataTime = 15; // 设置数据老化时间// 创建初始数据function createInitialData() {var now = new Date();for (var i = 0; i < 1; i++) {var time = new Date(now - i * 1000);data1.push([time.getTime(),(Math.random() * 100).toFixed(0)]); // 新数据在数组前面插入data2.push([time.getTime() + 300, (Math.random() * 100).toFixed(0)]);}}createInitialData(); // 创建初始数据// 更新数据的定时器，每秒增加一个新数据，删除一个最老的数据setInterval(function () {var now = new Date();var time = new Date(now);data1.push([time.getTime(), (Math.random() * 100).toFixed(0)]); // 新数据在数组前面插入var random_time = Math.random() * 100data1.push([time.getTime(), Math.random() * 100]);data1.push([time.getTime() + random_time * 3, Math.random() * 100]);data1.push([time.getTime() + random_time * 6, Math.random() * 100]);data2.push([time.getTime(), (Math.random() * 100).toFixed(0)]);data2.push([time.getTime() + random_time * 2, Math.random() * 100]);data2.push([time.getTime() + random_time * 4, Math.random() * 100]);data2.push([time.getTime() + random_time * 6, Math.random() * 100]);data2.push([time.getTime() + random_time * 8, Math.random() * 100]);while (data1.length > 0) {if (time.getTime() - data1[0][0] > maxDataTime * 1000) {data1.shift(); // 删除最老的数据} else {break; // 跳出循环}}while (data2.length > 0) {if (time.getTime() - data1[0][0] > maxDataTime * 1000) {data2.shift(); // 删除最老的数据} else {break; // 跳出循环}}// 计算最小值var maxXValue = Math.max(...data1.concat(data2).map(item => item[0])); // 获取数据1和数据2的x轴的最大值var minValue = maxXValue - maxDataTime * 1000; // 计算最小值，减去一个固定值// 更新图表，设置切换动画效果myChart.setOption({xAxis: {min: minValue, // 设置x轴的最小值},series: [{data: data1,animation: false, // 禁用动画},{data: data2,animation: false, // 禁用动画}]});}, 1000); // 定时器每秒执行一次// 配置折线图的选项var option = {xAxis: {type: 'time', // x轴类型设置为时间轴boundaryGap: false, // 时间轴不留白min: 'dataMin', // x轴最小值根据数据动态调整max: 'dataMax', // x轴最大值根据数据动态调整},yAxis: {type: 'value', // y轴类型设置为数值轴},series: [{name: '曲线1',type: 'line', // 折线图data: data1,symbolSize: 10, // 设置折线上的点的大小},{name: '曲线2',type: 'line', // 折线图data: data2,symbolSize: 10, // 设置折线上的点的大小}]};// 使用配置项展示图表myChart.setOption(option);</script>
</body></html>更多推荐
ECharts 动态更新曲线图示例
发布评论