使用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.pswp.cn/news/213578.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/213578.shtml
英文地址，請注明出處：http://en.pswp.cn/news/213578.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

點評項目——分布式鎖

點評項目——分布式鎖

2023.12.10 集群模式下的并發安全問題及解決 隨著現在分布式系統越來越普及&#xff0c;一個應用往往會部署在多臺機器上&#xff08;多節點&#xff09;&#xff0c;通過加鎖可以解決在單機情況下的一人一單安全問題&#xff0c;但是在集群模式下就不行了。見下圖&#xff1a…
閱讀更多...
在 Android WebView 中實現和 JavaScript 的互操作

在 Android WebView 中實現和 JavaScript 的互操作

前言 在 APP 中內嵌一個 H5 來實現特定的業務功能已經是非常成熟且常用的方案了。 雖然 H5 已經能夠實現大多數的需求&#xff0c;但是對于某些需求還是得依靠原生代碼來實現然后與 JavaScript 進行交互&#xff0c;例如我目前所負責的項目就是一個 “智能硬件” 設備&#x…
閱讀更多...
【PyTorch】卷積神經網絡

【PyTorch】卷積神經網絡

文章目錄 1. 理論介紹1.1. 從全連接層到卷積層1.1.1. 背景1.1.2. 從全連接層推導出卷積層 1.2. 卷積層1.2.1. 圖像卷積1.2.2. 填充和步幅1.2.3. 多通道 1.3. 池化層&#xff08;又稱匯聚層&#xff09;1.3.1. 背景1.3.2. 池化運算1.3.3. 填充和步幅1.3.4. 多通道 1.4. 卷積神經…
閱讀更多...
實現React18加TS，解決通用后臺管理系統，實戰方案落地有效實踐經驗

實現React18加TS，解決通用后臺管理系統，實戰方案落地有效實踐經驗

隨著前端技術的不斷發展和更新&#xff0c;使用React 18結合TypeScript&#xff08;TS&#xff09;來構建通用后臺管理系統已成為一種常見的選擇。本文將介紹如何在項目中應用React 18和TS&#xff0c;并分享一些實戰方案的有效實踐經驗。 一、搭建React 18 TS項目 首先&…
閱讀更多...
12.2每日一題（1無窮型冪指函數：二倍角公式+三部曲+等價無窮小代換（只有整體的因子不為0才能先算出來））

12.2每日一題（1無窮型冪指函數：二倍角公式+三部曲+等價無窮小代換（只有整體的因子不為0才能先算出來））

注意&#xff1a;求極限不能想先算哪里就先算哪里&#xff0c;只有整體的因子不為0才能先算出來&#xff0c;部分不為0不可以先算
閱讀更多...
外貿老業務也棘手的一個問題

外貿老業務也棘手的一個問題

這幾天有2個老業務都被一個類同的問題纏住了。 客戶定購了三臺車&#xff0c;由于是非常規要求所以我建議收取全款或者最少收50%的定金。但是業務員為了當月業績或者為了拿到就收了客戶20% 或者30% &#xff0c;定金收到了&#xff0c;我也不好再逼著業務員去加收定金。 訂單就…
閱讀更多...
記錄 | ubuntu上安裝fzf

記錄 | ubuntu上安裝fzf

在 ubuntu 上采用命令行安裝 fzf 的方式行不通 指的是采用下面的方式行不通&#xff1a; sudo apt install fzf # 行不通 sudo snap install fzf --classic # 行不通正確的安裝方式是&#xff1a; ● 到 fzf 的 git 倉庫&#xff1a;https://github.com/junegunn/fzf/re…
閱讀更多...
在高數據量中如何優化MySQL的Group by語句？

在高數據量中如何優化MySQL的Group by語句？

在實際開發環境中&#xff0c;MySQL的GROUP BY操作的優化需要結合具體的業務場景和數據特點。以下是一些建議&#xff0c;可以幫助你在實際開發中優化GROUP BY查詢&#xff1a; 使用合適的索引&#xff1a; 確保GROUP BY和ORDER BY中的列上存在索引。這有助于加速分組和排序操作…
閱讀更多...
計算機畢業設計 基于SpringBoot的電動車租賃系統的設計與實現 Java實戰項目 附源碼+文檔+視頻講解

計算機畢業設計 基于SpringBoot的電動車租賃系統的設計與實現 Java實戰項目 附源碼+文檔+視頻講解

博主介紹&#xff1a;?從事軟件開發10年之余&#xff0c;專注于Java技術領域、Python人工智能及數據挖掘、小程序項目開發和Android項目開發等。CSDN、掘金、華為云、InfoQ、阿里云等平臺優質作者? &#x1f345;文末獲取源碼聯系&#x1f345; &#x1f447;&#x1f3fb; 精…
閱讀更多...
場景示例：有贊商城 × 微盛企微管家，助力零售企業，實現私域運營自動化

場景示例：有贊商城 × 微盛企微管家，助力零售企業，實現私域運營自動化

1 場景描述 在零售行業內&#xff0c;線上渠道已經是零售行業的主要銷售渠道&#xff0c;大多數零售企業都會將產品上架到有贊商城&#xff0c;并使用微盛企微管家系統進行客戶管理和服務&#xff0c;希望能對客戶畫像進行精細化管理&#xff0c;以提升銷售和服務效率。 然而&a…
閱讀更多...
2023年最新prometheus + grafana搭建和使用+gmail郵箱告警配置

2023年最新prometheus + grafana搭建和使用+gmail郵箱告警配置

一、安裝prometheus 1.1 安裝 prometheus官網下載地址 sudo -i mkdir -p /opt/prometheus #移動解壓后的文件名到/opt/,并改名prometheus mv prometheus-2.45 /opt/prometheus/ #創建一個專門的prometheus用戶&#xff1a; -M 不創建家目錄&#xff0c; -s 不讓登錄 useradd…
閱讀更多...
女士內衣市場分析：預計2028年將達到643.08億美元

女士內衣市場分析：預計2028年將達到643.08億美元

內衣 (英文名:Underwear)&#xff0c;是指貼身穿的衣物。內衣有保暖及污穢的危害作用&#xff0c;有時會被視為性征。女士內衣行業生產的主要原料是各類織布或無紡布&#xff0c;成分有海綿、邊、定型紗、骨膠、肩帶等&#xff0c;布面料在內衣企業的生產成本中所占比重較大。女…
閱讀更多...
Python基礎（四、探索迷宮游戲）

Python基礎（四、探索迷宮游戲）

Python基礎&#xff08;四、探索迷宮游戲&#xff09; 游戲介紹游戲說明 游戲介紹 在這個游戲中&#xff0c;你將扮演一個勇敢的冒險者&#xff0c;進入了一個神秘的迷宮。你的任務是探索迷宮的每個房間&#xff0c;并最終找到隱藏在其中的寶藏。 游戲通過命令行界面進行交互…
閱讀更多...
web 前端之標簽練習+知識點

web 前端之標簽練習+知識點

目錄 實現過程&#xff1a; 結果顯示 1、HTML語法 2、注釋標簽 3、常用標簽 4、新標簽 5、特殊標簽 6、在網頁中使用視頻和音頻、圖片 7、表格標簽 8、超鏈接標簽 使用HTML語言來實現該頁面 實現過程&#xff1a; <!DOCTYPE html> <html><head>…
閱讀更多...
泡沫包裝市場分析：預計2029年將達到659億元

泡沫包裝市場分析：預計2029年將達到659億元

泡沫包裝&#xff0c;簡單地講&#xff0c;就是用數學方法對無線電測量或光學測量所獲得的彈道數據進行檢驗、整理、校正、計算&#xff0c;減小或消除數據的誤差&#xff0c;得出反映運載火箭運動軌跡的精確彈道參數。通常所說的泡沫包裝&#xff0c;主要是指由可發性聚苯乙烯…
閱讀更多...
面試操作系統八股文五問五答第二期

面試操作系統八股文五問五答第二期

面試操作系統八股文五問五答第二期 作者&#xff1a;程序員小白條&#xff0c;個人博客 相信看了本文后&#xff0c;對你的面試是有一定幫助的&#xff01; ?點贊?收藏?不迷路&#xff01;? 1.怎么解決死鎖&#xff1f; 1、預防死鎖&#xff1a;通過設置一些限制條件&am…
閱讀更多...
JAVA面試題8

JAVA面試題8

1.Java中的線程是什么&#xff1f; 它有什么作用&#xff1f; 答案&#xff1a;線程是程序執行流的最小單位&#xff0c;用于實現多任務并發執行。Java中的線程可以實現并發編程&#xff0c;提高程序的性能和響應性。 2.什么是Java中的同步&#xff08;Synchronization&#x…
閱讀更多...
超靜音的兩相步進電機驅動芯片GC6609，GC6610的性能分析

超靜音的兩相步進電機驅動芯片GC6609，GC6610的性能分析

兩相步進電機驅動芯片GC6609&#xff0c;GC6610它們是一款超靜音的兩相步進電機驅動芯片&#xff0c;內置最大 256 細分的步進驅動模式&#xff0c; 超靜音&#xff0c;低振動。芯片可以工作在 4~36V 的寬工作電壓范圍內&#xff0c;平均工作電流可以達到 2A和2.5A &#xff0c…
閱讀更多...
大數據機器學習算法項目——基于Django/協同過濾算法的房源可視化分析推薦系統的設計與實現

大數據機器學習算法項目——基于Django/協同過濾算法的房源可視化分析推薦系統的設計與實現

大數據機器學習算法項目——基于Django/協同過濾算法的房源可視化分析推薦系統的設計與實現 技術棧&#xff1a;大數據爬蟲/機器學習學習算法/數據分析與挖掘/大數據可視化/Django框架/Mysql數據庫 本項目基于 Django框架開發的房屋可視化分析推薦系統。這個系統結合了大數據…
閱讀更多...
STM32-01-認識單片機

STM32-01-認識單片機

文章目錄 一、單片機簡介二、Cortex-M系列介紹三、初識STM32四、STM32原理圖設計五、搭建開發環境六、STM32初體驗七、MDK5使用技巧 一、單片機簡介 單片機是什么&#xff1f; 單片機&#xff1a;Single-Chip Microcomputer&#xff0c;單片微型計算機&#xff0c;是一種集成電…
閱讀更多...
最新文章

Copyright @ 2022~2023