使用React 18、Echarts和MUI实现温度计

关键词 React 18 Echarts和MUI

前言

在本文中，我们将结合使用React 18、Echarts和MUI（Material-UI）库，展示如何实现一个交互性的温度计。我们将使用Echarts绘制温度计的外观，并使用MUI创建一个漂亮的用户界面。
本文将详细介绍实现温度计所需的关键代码以及其他必要的步骤，本文会尽可能的提供详细的注释。

完成后的样式

温度计.jpg

关键代码

import React from 'react';
import * as echarts from 'echarts/core';
import { EChartOption } from '../../EChartOption';
import CommonChart from '../../CommonChart';
import { Box } from '@mui/material';interface TemperatureBarProps {deviceData: any;
}const MAX_TEMPERATURE_SOCPE = 120; //温度上限
const MIN_TEMPERATURE_SOCPE = -40; // 温度下限/*** 温度图表组件*/
const TemperatureChart = () => {// 温度数值let TPvalue = MAX_TEMPERATURE_SOCPE;// 刻度数据let kd = [];// 渐变色配置let Gradient = [];// 创建刻度数据for (let i = 0, len = MAX_TEMPERATURE_SOCPE - MIN_TEMPERATURE_SOCPE;i <= len;i += 1) {if (i % 20 === 10) {kd.push('');} else if (i % 40 === 0) {kd.push('-48');} else if (i % 8 === 0) {kd.push('-28');} else {kd.push('');}}// 根据温度数值设置渐变色和文本内容if (TPvalue > 20) {Gradient.push({offset: 0,color: '#93FE94'},{offset: 0.5,color: '#E4D225'},{offset: 1,color: '#E01F28'});} else if (TPvalue > -20) {Gradient.push({offset: 0,color: '#93FE94'},{offset: 1,color: '#E4D225'});} else {Gradient.push({offset: 1,color: '#93FE94'});}// 温度图表配置选项const option = {animation: false, // 禁止动画效果title: {text: '  ℃',top: '5px',left: 'center',textStyle: {color: '#fff',fontStyle: 'normal',fontWeight: 'normal',fontSize: '16px',padding: 5}},grid: {left: '45', // 图表距离容器左边的距离bottom: 20, // 图表距离容器底部的距离top: 30 // 图表距离容器顶部的距离},yAxis: [{show: false, // 不显示y轴data: [], // y轴的数据min: 0, // y轴的最小值max: MAX_TEMPERATURE_SOCPE - MIN_TEMPERATURE_SOCPE + 10, // y轴的最大值axisLine: {show: false // 不显示y轴的轴线}},{show: false, // 不显示y轴min: 0, // y轴的最小值max: MAX_TEMPERATURE_SOCPE - MIN_TEMPERATURE_SOCPE // y轴的最大值},{type: 'category', // 类型为分类position: 'left', // y轴的位置在左边offset: -80, // y轴与图表的偏移量axisLabel: {fontSize: 10, // y轴标签的字体大小color: 'white' // y轴标签的颜色为白色},axisLine: {show: false // 不显示y轴的轴线},axisTick: {show: false // 不显示y轴的刻度线}}],xAxis: [{show: false, // 不显示x轴min: -50, // x轴的最小值max: 80, // x轴的最大值data: [] // x轴的数据},{show: false, // 不显示x轴min: -48, // x轴的最小值max: 120 // x轴的最大值}],series: [{name: '条', // 数据项名称type: 'bar', // 图表类型为柱状图xAxisIndex: 0, // 与第一个x轴关联data: [MAX_TEMPERATURE_SOCPE - MIN_TEMPERATURE_SOCPE + 10], // 柱状图的数据barWidth: 18, // 柱状图的宽度,label: {show: true // 显示标签},itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0.05,color: '#5087EC' // 渐变颜色的起始色},{offset: 0.5,color: '#58DBA4' // 渐变颜色的起始色},{offset: 0.6,color: '#FFF81D' // 渐变颜色的中间色},{offset: 0.8,color: '#FA9917' // 渐变颜色的中间色},{offset: 1,color: '#FF4D4F' // 渐变颜色的结束色}]),borderRadius: [8, 8, 2, 2] // 柱状图的圆角样式},z: 2 // 数据系列层叠的顺序值},{name: '圆', // 数据项名称type: 'scatter', // 图表类型为散点图hoverAnimation: false, // 禁止散点图的Hover动画效果data: [0], // 散点图的数据xAxisIndex: 0, // 与第一个x轴关联symbolSize: 18, // 散点图的符号大小itemStyle: {color: '#5087EC', // 散点图的颜色opacity: 1 // 散点图的透明度},z: 2 // 数据系列层叠的顺序值},{name: '刻度', // 数据项名称type: 'bar', // 图表类型为柱状图yAxisIndex: 0, // 与第一个y轴关联xAxisIndex: 1, // 与第二个x轴关联label: {show: true, // 显示标签position: 'left', // 标签的位置在左边distance: 10, // 标签与柱状图的距离color: 'white', // 标签的颜色为白色fontSize: 14, // 标签的字体大小formatter: function (params) {if (params.dataIndex >MAX_TEMPERATURE_SOCPE - MIN_TEMPERATURE_SOCPE) {return '';}if (params.dataIndex % 20 === 0) {return params.dataIndex + MIN_TEMPERATURE_SOCPE;}return '';} // 标签的格式化函数},barGap: '-100%', // 柱状图之间的距离data: kd, // 柱状图的数据barWidth: 0.5, // 柱状图的宽度itemStyle: {color: 'white', // 柱状图的颜色为白色barBorderRadius: 120 // 柱状图的圆角样式},z: 0 // 数据系列层叠的顺序值}]} as EChartOption;// 返回渲染图表的组件return <CommonChart option={option} width="100%" height="100%" />;
};export default function TemperatureBar() {const [maxTemperature, setMaxTemperature] = React.useState<number>(80); // 定义最大温度的状态值，默认为80const [minTemperature, seMinTemperature] = React.useState<number>(-20); // 定义最小温度的状态值，默认为-20return (<Boxref={parentRef}sx={{display: 'flex',height: '100%',alignItems: 'center',justifyContent: 'center',position: 'relative',color: '#fff'}}>{isMinHieght ?<Boxsx={{display: 'flex',flexDirection: 'column',textAlign: 'left'}}><Boxsx={{display: 'flex',alignItems: 'center',mb: 2}}><Boxsx={{borderLeft: '10px solid transparent',borderRight: '10px solid transparent',borderBottom: '20px solid #FF4D4F',width: 0,height: 0,display: 'inline-block'}}></Box><spanstyle={{paddingLeft: '4px'}}>最高温度{parseFloat(String(maxTemperature)).toFixed(1)}℃</span></Box><Boxsx={{display: 'flex',alignItems: 'center'}}><Boxsx={{borderLeft: '10px solid transparent',borderRight: '10px solid transparent',borderTop: '20px solid #5087EC',width: 0,height: 0,display: 'inline-block'}}></Box><spanstyle={{paddingLeft: '4px'}}>最低温度{parseFloat(String(minTemperature)).toFixed(1)}℃</span></Box></Box> :<Boxsx={{width: 'calc(100% - 80px)',maxWidth: '140px',height: '80%',background: '#363636',borderRadius: '8px',position: 'relative',boxShadow: '2px 2px 8px 0px rgba(0, 0, 0, 0.7)'}}><Boxsx={{position: 'absolute',top: '-25px',right: '-30px',display: 'flex',alignItems: 'center',fontSize: '12px'}}><Boxsx={{marginRight: '10px',display: 'flex',alignItems: 'center'}}><Boxsx={{borderLeft: '8px solid transparent',borderRight: '8px solid transparent',borderBottom: '14px solid #FF4D4F',width: 0,height: 0,display: 'inline-block'}}></Box><spanstyle={{paddingLeft: '4px'}}>最高</span></Box><Boxsx={{display: 'flex',alignItems: 'center'}}><Boxsx={{borderLeft: '8px solid transparent',borderRight: '8px solid transparent',borderTop: '14px solid #5087EC',width: 0,height: 0,display: 'inline-block'}}></Box><spanstyle={{paddingLeft: '4px'}}>最小</span></Box></Box><Boxsx={{position: 'absolute',left: '50%',top: '10px'}}>{/* <span>℃</span> */}</Box><Boxsx={{position: 'absolute',width: 'calc(50% + 20px)',margin: 0,left: '50%',top: `calc(30px + ((100% - 50px) * (${MAX_TEMPERATURE_SOCPE}  - ${maxTemperature} + 10) / ${MAX_TEMPERATURE_SOCPE - MIN_TEMPERATURE_SOCPE + 10}))`,transition: 'top 0.3s ease'}}><hrstyle={{position: 'relative',margin: 0,color: '#FF4D4F',border: 'none',borderTop:  '1px solid #FF4D4F' }}/><Boxsx={{position: 'absolute',left: 'calc(100% - 10px)',top: '-26px',borderLeft: '10px solid transparent',borderRight: '10px solid transparent',borderBottom:  '16px solid #FF4D4F' width: 0,height: 0,display: 'flex',justifyContent: 'center',paddingBottom: '18px'}}>{parseFloat(String(maxTemperature)).toFixed(1)}</Box></Box><Boxsx={{position: 'absolute',margin: 0,width: 'calc(50% + 20px)',left: '50%',top: `calc(30px + (100% - 50px) * (${MAX_TEMPERATURE_SOCPE}  - ${minTemperature} + 10) / ${MAX_TEMPERATURE_SOCPE - MIN_TEMPERATURE_SOCPE + 10})`,transition: 'top 0.3s ease'}}><hrstyle={{position: 'relative',margin: 0,border: 'none',borderTop:  '1px solid #5087EC' }}/><Boxsx={{position: 'absolute',left: 'calc(100% - 10px)',top: '-8px',borderLeft: '10px solid transparent',borderRight: '10px solid transparent',borderTop:  '16px solid #5087EC'width: 0,height: 0,display: 'flex',justifyContent: 'center',paddingTop: '3px'}}>{parseFloat(String(minTemperature)).toFixed(1)}</Box></Box><TemperatureChart /></Box>}</Box>);
}

后言

在本文中，我们使用React 18、Echarts和MUI库展示了如何实现一个交互性的温度计。我们通过创建一个温度计组件，并使用Echarts库绘制温度计的外观。使用MUI库，我们创建了一个漂亮的用户界面来容纳温度计。如果不使用MUI，只需要把MUI相关标签改成HTML标签即可。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/257199.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

pytorch优化之SAM优化器

pytorch优化之SAM优化器

1. SAM介绍 人机验证 2. 案例 ❀精度优化❀优化策略1&#xff1a;网络SAM优化器_夏天&#xff5c;여름이다的博客-CSDN博客文章浏览阅读3.3k次&#xff0c;点赞10次&#xff0c;收藏30次。精度优化策略&#xff1a;SAM:Sharpness AwarenessMinimization锐度感知最小化论文&…
阅读更多...
css 十字分割线（含四等分布局）

css 十字分割线（含四等分布局）

核心技术 伪类选择器含义li:nth-child(2)第2个 lili:nth-child(n)所有的lili:nth-child(2n)所有的第偶数个 lili:nth-child(2n1)所有的第奇数个 lili:nth-child(-n5)前5个 lili:nth-last-child(-n5)最后5个 lili:nth-child(7n)选中7的倍数 border-right: 3px solid white;borde…
阅读更多...
Java 简易版 TCP UDP聊天

Java 简易版 TCP UDP聊天

客户端 import java.io.*; import java.net.Socket; import java.util.Date; import javax.swing.*;public class MyClient {private JFrame jf;private JButton jBsend;private JTextArea jTAcontent;private JTextField jText;private JLabel JLcontent;private Date data;pr…
阅读更多...
vue3日常知识点学习归纳

vue3日常知识点学习归纳

1&#xff0c;父子组件传递&#xff1a; 父组件传递参数 <template><div><!-- 子组件 参数&#xff1a;num 、nums --><child :num"nums.num" :doubleNum"nums.doubleNum" increase"handleIncrease"></child>&l…
阅读更多...
HarmonyOS4.0从零开始的开发教程10管理组件状态

HarmonyOS4.0从零开始的开发教程10管理组件状态

HarmonyOS&#xff08;八&#xff09;管理组件状态 概述 在应用中&#xff0c;界面通常都是动态的。如图1所示&#xff0c;在子目标列表中&#xff0c;当用户点击目标一&#xff0c;目标一会呈现展开状态&#xff0c;再次点击目标一&#xff0c;目标一呈现收起状态。界面会根…
阅读更多...
【Proteus仿真】【STM32单片机】蓝牙遥控小车

【Proteus仿真】【STM32单片机】蓝牙遥控小车

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真STM32单片机控制器&#xff0c;使LCD1602液晶&#xff0c;L298电机&#xff0c;直流电机&#xff0c;HC05/06蓝牙模块等。 主要功能&#xff1a; 系统运行后&#xff0c;LCD1602显…
阅读更多...
LAMP和分离式LNMP部署

LAMP和分离式LNMP部署

目录 一.什么是LAMP&#xff1f; 二.安装LAMP 先安装apache&#xff0c;httpd网页服务&#xff1a; 接着安装mysql&#xff1a; 安装php&#xff1a; 创建论坛&#xff1a; 三.安装分布式LNMP&#xff1a; 先安装nginx&#xff1a; 到另一台主机安装php&#xff1a; …
阅读更多...
论文阅读：LSeg: LANGUAGE-DRIVEN SEMANTIC SEGMENTATION

论文阅读：LSeg: LANGUAGE-DRIVEN SEMANTIC SEGMENTATION

可以直接bryanyzhu的讲解&#xff1a;CLIP 改进工作串讲&#xff08;上&#xff09;【论文精读42】_哔哩哔哩_bilibili 这里是详细的翻译工作 原文链接 https://arxiv.org/pdf/2201.03546.pdf ICLR 2022 0、ABSTRACT 我们提出了一种新的语言驱动的语义图像分割模型LSeg。…
阅读更多...
PCL 点云最小二乘法拟合二维圆

PCL 点云最小二乘法拟合二维圆

文章目录 一、原理概述二、实现代码三、实现效果参考资料一、原理概述 二、实现代码 // 标准文件 #include <iostream>// PCL #include <pcl/io/pcd_io.h>
阅读更多...
二维码智慧门牌管理系统升级：行政区划维护功能详解

二维码智慧门牌管理系统升级：行政区划维护功能详解

文章目录 前言一、行政区划维护解决方案二、解决方案优势 前言 随着科技不断发展&#xff0c;二维码智慧门牌管理系统已成为物业管理和社区服务等领域的重要工具。在此系统升级解决方案中&#xff0c;行政区划维护功能愈发显得重要。我们将详细介绍这一功能&#xff0c;助您更…
阅读更多...
递增三元组

递增三元组

遍历三层循环,数据量十分地大,可以找第一行小于第二行的 再找第三行大于第二行的,所有方案的和 通过分析测试样例,111,222,333这三个数存在重复计算。可以想办法存一下每个数的出现次数 如果是111666999.不管1和9怎么变,只要第一行小于6,第二行小于9,答案不变 所以可以想办法存…
阅读更多...
每日一题：Leetcode1926.迷宫中离入口最近的出口

每日一题：Leetcode1926.迷宫中离入口最近的出口

给你一个 m x n 的迷宫矩阵 maze &#xff08;下标从 0 开始&#xff09;&#xff0c;矩阵中有空格子&#xff08;用 . 表示&#xff09;和墙&#xff08;用 表示&#xff09;。同时给你迷宫的入口 entrance &#xff0c;用 entrance [entrancerow, entrancecol] 表示你一开始…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023