React18使用Echarts和MUI實現(xiàn)一個交互性的溫度計
更新時間：2024年01月03日 09:51:22 作者：Evan不懂前端
這篇文章我們將結(jié)合使用React 18、Echarts和MUI（Material-UI）庫,展示如何實現(xiàn)一個交互性的溫度計,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
前言
在本文中，我們將結(jié)合使用React 18、Echarts和MUI（Material-UI）庫，展示如何實現(xiàn)一個交互性的溫度計。我們將使用Echarts繪制溫度計的外觀，并使用MUI創(chuàng)建一個漂亮的用戶界面。
本文將詳細介紹實現(xiàn)溫度計所需的關(guān)鍵代碼以及其他必要的步驟，本文會盡可能的提供詳細的注釋。
完成后的樣式
關(guān)鍵代碼
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 = () => {
// 溫度數(shù)值
let TPvalue = MAX_TEMPERATURE_SOCPE;
// 刻度數(shù)據(jù)
let kd = [];
// 漸變色配置
let Gradient = [];
// 創(chuàng)建刻度數(shù)據(jù)
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('');
}
}
// 根據(jù)溫度數(shù)值設(shè)置漸變色和文本內(nèi)容
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軸的數(shù)據(jù)
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軸標(biāo)簽的字體大小
color: 'white' // y軸標(biāo)簽的顏色為白色
},
axisLine: {
show: false // 不顯示y軸的軸線
},
axisTick: {
show: false // 不顯示y軸的刻度線
}
}
],
xAxis: [
{
show: false, // 不顯示x軸
min: -50, // x軸的最小值
max: 80, // x軸的最大值
data: [] // x軸的數(shù)據(jù)
},
{
show: false, // 不顯示x軸
min: -48, // x軸的最小值
max: 120 // x軸的最大值
}
],
series: [
{
name: '條', // 數(shù)據(jù)項名稱
type: 'bar', // 圖表類型為柱狀圖
xAxisIndex: 0, // 與第一個x軸關(guān)聯(lián)
data: [MAX_TEMPERATURE_SOCPE - MIN_TEMPERATURE_SOCPE + 10], // 柱狀圖的數(shù)據(jù)
barWidth: 18, // 柱狀圖的寬度,
label: {
show: true // 顯示標(biāo)簽
},
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' // 漸變顏色的結(jié)束色
}
]),
borderRadius: [8, 8, 2, 2] // 柱狀圖的圓角樣式
},
z: 2 // 數(shù)據(jù)系列層疊的順序值
},
{
name: '圓', // 數(shù)據(jù)項名稱
type: 'scatter', // 圖表類型為散點圖
hoverAnimation: false, // 禁止散點圖的Hover動畫效果
data: [0], // 散點圖的數(shù)據(jù)
xAxisIndex: 0, // 與第一個x軸關(guān)聯(lián)
symbolSize: 18, // 散點圖的符號大小
itemStyle: {
color: '#5087EC', // 散點圖的顏色
opacity: 1 // 散點圖的透明度
},
z: 2 // 數(shù)據(jù)系列層疊的順序值
},
{
name: '刻度', // 數(shù)據(jù)項名稱
type: 'bar', // 圖表類型為柱狀圖
yAxisIndex: 0, // 與第一個y軸關(guān)聯(lián)
xAxisIndex: 1, // 與第二個x軸關(guān)聯(lián)
label: {
show: true, // 顯示標(biāo)簽
position: 'left', // 標(biāo)簽的位置在左邊
distance: 10, // 標(biāo)簽與柱狀圖的距離
color: 'white', // 標(biāo)簽的顏色為白色
fontSize: 14, // 標(biāo)簽的字體大小
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 '';
} // 標(biāo)簽的格式化函數(shù)
},
barGap: '-100%', // 柱狀圖之間的距離
data: kd, // 柱狀圖的數(shù)據(jù)
barWidth: 0.5, // 柱狀圖的寬度
itemStyle: {
color: 'white', // 柱狀圖的顏色為白色
barBorderRadius: 120 // 柱狀圖的圓角樣式
},
z: 0 // 數(shù)據(jù)系列層疊的順序值
}
]
} as EChartOption;
// 返回渲染圖表的組件
return <CommonChart option={option} width="100%" height="100%" />;
};
export default function TemperatureBar() {
const [maxTemperature, setMaxTemperature] = React.useState<number>(80); // 定義最大溫度的狀態(tài)值，默認為80
const [minTemperature, seMinTemperature] = React.useState<number>(-20); // 定義最小溫度的狀態(tài)值，默認為-20
return (
<Box
ref={parentRef}
sx={{
display: 'flex',
height: '100%',
alignItems: 'center',
justifyContent: 'center',
position: 'relative',
color: '#fff'
}}
>
{isMinHieght ?
<Box
sx={{
display: 'flex',
flexDirection: 'column',
textAlign: 'left'
}}
>
<Box
sx={{
display: 'flex',
alignItems: 'center',
mb: 2
}}
>
<Box
sx={{
borderLeft: '10px solid transparent',
borderRight: '10px solid transparent',
borderBottom: '20px solid #FF4D4F',
width: 0,
height: 0,
display: 'inline-block'
}}
></Box>
<span
style={{
paddingLeft: '4px'
}}
>
最高溫度
{parseFloat(String(maxTemperature)).toFixed(1)}℃
</span>
</Box>
<Box
sx={{
display: 'flex',
alignItems: 'center'
}}
>
<Box
sx={{
borderLeft: '10px solid transparent',
borderRight: '10px solid transparent',
borderTop: '20px solid #5087EC',
width: 0,
height: 0,
display: 'inline-block'
}}
></Box>
<span
style={{
paddingLeft: '4px'
}}
>
最低溫度
{parseFloat(String(minTemperature)).toFixed(1)}℃
</span>
</Box>
</Box> :
<Box
sx={{
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)'
}}
>
<Box
sx={{
position: 'absolute',
top: '-25px',
right: '-30px',
display: 'flex',
alignItems: 'center',
fontSize: '12px'
}}
>
<Box
sx={{
marginRight: '10px',
display: 'flex',
alignItems: 'center'
}}
>
<Box
sx={{
borderLeft: '8px solid transparent',
borderRight: '8px solid transparent',
borderBottom: '14px solid #FF4D4F',
width: 0,
height: 0,
display: 'inline-block'
}}
></Box>
<span
style={{
paddingLeft: '4px'
}}
>
最高
</span>
</Box>
<Box
sx={{
display: 'flex',
alignItems: 'center'
}}
>
<Box
sx={{
borderLeft: '8px solid transparent',
borderRight: '8px solid transparent',
borderTop: '14px solid #5087EC',
width: 0,
height: 0,
display: 'inline-block'
}}
></Box>
<span
style={{
paddingLeft: '4px'
}}
>
最小
</span>
</Box>
</Box>
<Box
sx={{
position: 'absolute',
left: '50%',
top: '10px'
}}
>
{/* <span>℃</span> */}
</Box>
<Box
sx={{
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'
}}
>
<hr
style={{
position: 'relative',
margin: 0,
color: '#FF4D4F',
border: 'none',
borderTop: '1px solid #FF4D4F'
}}
/>
<Box
sx={{
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>
<Box
sx={{
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'
}}
>
<hr
style={{
position: 'relative',
margin: 0,
border: 'none',
borderTop: '1px solid #5087EC'
}}
/>
<Box
sx={{
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庫展示了如何實現(xiàn)一個交互性的溫度計。我們通過創(chuàng)建一個溫度計組件，并使用Echarts庫繪制溫度計的外觀。使用MUI庫，我們創(chuàng)建了一個漂亮的用戶界面來容納溫度計。如果不使用MUI，只需要把MUI相關(guān)標(biāo)簽改成HTML標(biāo)簽即可。
到此這篇關(guān)于React18使用Echarts和MUI實現(xiàn)一個交互性的溫度計的文章就介紹到這了,更多相關(guān)React Echarts實現(xiàn)溫度計內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React class和function的區(qū)別小結(jié)
Class組件和Function組件是React中創(chuàng)建組件的兩種主要方式,本文主要介紹了React class和function的區(qū)別小結(jié),具有一定的參考價值,感興趣的可以了解一下2023-10-10
react redux中如何獲取store數(shù)據(jù)并將數(shù)據(jù)渲染出來
這篇文章主要介紹了react redux中如何獲取store數(shù)據(jù)并將數(shù)據(jù)渲染出來，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
本文主要介紹了React父子組件傳值(組件通信)的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
本文主要介紹了react導(dǎo)出excel文件的四種方式,主要包括原生js導(dǎo)出,使用?js-export-excel,使用xlsx導(dǎo)出, 使用react-html-table-to-excel,感興趣的可以了解一下2023-11-11
這篇文章主要介紹了Reactjs實現(xiàn)通用分頁組件的實例代碼，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-01-01
react-redux是react官方推出的redux綁定庫，React-Redux 將所有組件分成兩大類一個是UI組件和容器組件，本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2023-01-01
使用React和Redux Toolkit實現(xiàn)用戶登錄功能
在React中，用戶登錄功能是一個常見的需求，為了實現(xiàn)該功能，需要對用戶輸入的用戶名和密碼進行驗證，并將驗證結(jié)果保存到應(yīng)用程序狀態(tài)中，在React中，可以使用Redux Toolkit來管理應(yīng)用程序狀態(tài)，從而實現(xiàn)用戶登錄功能，需要詳細了解可以參考下文2023-05-05
這篇文章主要為大家介紹了React JSX基礎(chǔ)語法教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
React-Native做一個文本輸入框組件的實現(xiàn)代碼
這篇文章主要介紹了React-Native做一個文本輸入框組件的實現(xiàn)代碼，非常具有實用價值，需要的朋友可以參考下2017-08-08
這篇文章主要介紹了React key值的作用和使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08