Echarts 实现温度计
发布人：shili8
发布时间：2025-01-31 11:48
阅读次数：0
**ECharts 实现温度计**
在本文中，我们将使用 ECharts 库实现一个简单的温度计。温度计是一个常见的仪表设备，用于显示环境温度或其他物理量的变化。
###1. 安装 ECharts 库首先，我们需要安装 ECharts 库。如果你已经安装过，可以跳过这一步。
bashnpm install echarts
###2. 创建 HTML 文件创建一个名为 `index.html` 的文件，内容如下：
html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>温度计</title> <script src=" /></head> <body> <div id="temperatureChart" style="height:500px;"></div> <script src="script.js"></script> </body> </html>
###3. 创建 JavaScript 文件创建一个名为 `script.js` 的文件，内容如下：
javascript// 引入 ECharts 库import * as echarts from 'echarts';
// 初始化温度计数据const temperatureData = [
{ value:20, time: '08:00' },
{ value:22, time: '09:00' },
{ value:25, time: '10:00' },
{ value:28, time: '11:00' },
{ value:30, time: '12:00' },
{ value:32, time: '13:00' },
{ value:35, time: '14:00' },
{ value:38, time: '15:00' },
{ value:40, time: '16:00' },
];
// 初始化温度计图表const temperatureChart = echarts.init(document.getElementById('temperatureChart'));
// 定义温度计图表配置项const option = {
// 图表标题 title: {
text: '温度',
left: 'center',
},
// X 轴配置项 xAxis: [
{
type: 'category',
data: temperatureData.map((item) => item.time),
axisLabel: {
interval:0,
rotate:45,
},
},
],
// Y 轴配置项 yAxis: [
{
type: 'value',
name: '温度(°C)',
},
],
// 系列配置项 series: [
{
name: '温度',
type: 'line',
data: temperatureData.map((item) => item.value),
smooth: true,
},
],
};
// 渲染图表temperatureChart.setOption(option);
###4. 运行 HTML 文件在浏览器中打开 `index.html` 文件，会看到一个简单的温度计图表。
### 结论本文使用 ECharts 库实现了一个简单的温度计图表。通过调整图表配置项，可以根据实际需求进行定制和扩展。
粤公网安备 44011102002787号