首页'echarts'折线图数据从后端取实现用电量折线图

'echarts'折线图数据从后端取实现用电量折线图

时间: 2023-07-25 09:48:47 浏览: 106

好的，以下是从后端取数据实现用电量折线图的代码示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ECharts 折线图示例</title>  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script> </head> <body>  <div id="myChart" style="width: 800px;height: 600px;"></div> <script> // 基于准备好的 DOM，初始化 ECharts 实例 var myChart = echarts.init(document.getElementById('myChart')); // 从后端取数据 var xhr = new XMLHttpRequest(); xhr.open('GET', 'data.json', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var data = JSON.parse(xhr.responseText); // 设置图表的配置项和数据 var option = { title: { text: '用电量折线图' }, tooltip: {}, legend: { data:['用电量'] }, xAxis: { data: data.date }, yAxis: {}, series: [{ name: '用电量', type: 'line', data: data.electricity }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); } }; xhr.send(); </script> </body> </html> ``` 在上述代码中，我们通过 `XMLHttpRequest` 对象向后端发送请求，获取用电量数据。在 `xhr.onreadystatechange` 回调函数中，判断响应状态是否成功，并将获取到的数据解析为 JSON 对象。然后，我们在回调函数中设置了折线图的配置项和数据。其中，`xAxis` 的 `data` 属性和 `series` 的 `data` 属性都使用了从后端获取到的数据。通过 `myChart.setOption(option)` 方法将配置项和数据应用到图表中，最终呈现出一张用电量折线图。

阅读全文