首页请使用Echarts写一个折线图html页面：要求页面中有ajax请求，接收返回参数，参数类型为List<Integer>，参数做为折线图的值

请使用Echarts写一个折线图html页面：要求页面中有ajax请求，接收返回参数，参数类型为List<Integer>，参数做为折线图的值

时间: 2024-03-13 18:42:57 浏览: 48

好的，以下是一个简单的折线图 HTML 页面，其中使用了 Echarts 库和 AJAX 请求来接收 List<Integer> 类型的参数并显示折线图： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>折线图</title>  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body>  <div id="chart" style="width: 800px;height:400px;"></div> <script> // 使用 AJAX 请求获取数据 $.ajax({ type: "GET", url: "data.json", // 这里替换成你自己的接口地址 dataType: "json", success: function (data) { // 使用 Echarts 绘制折线图 var chart = echarts.init(document.getElementById('chart')); chart.setOption({ title: { text: '折线图' }, tooltip: {}, xAxis: { data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }, yAxis: {}, series: [{ name: '销量', type: 'line', data: data // 这里将 AJAX 请求返回的 List<Integer> 数据作为折线图的值 }] }); } }); </script> </body> </html> ``` 这个页面中，我使用了 Echarts 库来绘制折线图，使用 jQuery 库中的 AJAX 方法来请求数据。其中，我将请求返回的 List<Integer> 数据作为折线图的值。同时，折线图上还有一些基本的配置，如 x 轴和 y 轴的标签、标题等。

阅读全文