首页echarts 温湿度

echarts 温湿度

时间: 2023-10-01 18:06:48 浏览: 242

你可以使用 echarts 来绘制温湿度图表。首先，你需要准备好温湿度数据。然后，你可以使用 echarts 的图表类型中的折线图或者柱状图来展示温湿度的变化。以下是一个使用 echarts 绘制温湿度折线图的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts 温湿度折线图</title>  <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.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')); // 准备温湿度数据 var data = [ {time: '2021-01-01', temperature: 20, humidity: 50}, {time: '2021-01-02', temperature: 22, humidity: 55}, {time: '2021-01-03', temperature: 23, humidity: 60}, // 更多数据... ]; // 提取时间和温湿度数据 var times = data.map(item => item.time); var temperatures = data.map(item => item.temperature); var humidities = data.map(item => item.humidity); // 配置图表选项 var option = { tooltip: {}, legend: { data: ['温度', '湿度'] }, xAxis: { data: times }, yAxis: {}, series: [ { name: '温度', type: 'line', data: temperatures }, { name: '湿度', type: 'line', data: humidities } ] }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); </script> </body> </html> ``` 你可以将上述代码保存为一个 HTML 文件，然后在浏览器中打开该文件，即可看到温湿度折线图的展示效果。当然，你还可以根据自己的需求修改图表的样式和配置。希望对你有所帮助！如果还有其他问题，请继续提问。

阅读全文