首页用js写一个动态的echarts折线图，要求数据是静态的，注意是动态的折线图,我需要完整代码

用js写一个动态的echarts折线图，要求数据是静态的，注意是动态的折线图,我需要完整代码

时间: 2024-05-28 22:09:21 浏览: 108

好的，以下是使用 JavaScript 和 echarts 库编写的动态折线图代码数据为静态数据： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态折线图</title>  <script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script> </head> <body>  <div id="lineChart" style="width: 600px;height: 400px;"></div> <script> // 初始化 echarts 实例 var myChart = echarts.init(document.getElementById('lineChart')); // 折线图配置 var option = { title: { text: '动态折线图' }, tooltip: { trigger: 'axis' }, xAxis: { type: 'category', data: ['2022-01-01', '2022-01-02', '2022-01-03', '2022-01-04', '2022-01-05', '2022-01-06', '2022-01-07'] }, yAxis: { type: 'value', min: 0, max: 100 }, series: [{ name: '数据', type: 'line', data: [50, 60, 80, 70, 90, 75, 80], label: { show: true, formatter: function(params) { return params.value + '%'; } } }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); // 动态改变折线图数据 var dataIndex = 0; // 数据索引 setInterval(function() { var data = option.series[0].data; // 前一时刻的数据 data.shift(); // 删除前一个数据 data.push(Math.round(Math.random() * 100)); // 添加新数据 option.xAxis.data.shift(); // 删除前一个日期 dataIndex++; option.xAxis.data.push('2022-01-0' + (dataIndex + 7)); // 添加新日期 // 使用新数据和新日期更新图表 myChart.setOption({ series: [{ data: data }], xAxis: { data: option.xAxis.data } }); }, 2000); </script> </body> </html> 希望这个动态折线图的代码对你有用。

阅读全文