添加echats组件
rongweikang
2 years ago
parent
99cdfc9d39
commit
4f8b3953d2
@ -0,0 +1,100 @@
|
||||
import Taro from "@tarojs/taro";
|
||||
import classnames from "classnames";
|
||||
import { Block, View, Image, Text, Input } from "@tarojs/components";
|
||||
import { Popup, Progress, Slider } from "@antmjs/vantui";
|
||||
import { useRef } from "react";
|
||||
import Echarts, { EChartOption, EchartsHandle } from "taro-react-echarts";
|
||||
import echarts from "@/utils/echarts.min.js";
|
||||
import "./index.less";
|
||||
|
||||
interface Props {
|
||||
Electricity: any;
|
||||
matrixElectricity: any;
|
||||
facialMaskConnectStatus: any;
|
||||
}
|
||||
|
||||
function Index() {
|
||||
const echartsRef = useRef<EchartsHandle>(null);
|
||||
const option: EChartOption = {
|
||||
grid: {
|
||||
// 让图表占满容器
|
||||
top: "28rpx",
|
||||
left: "30rpx",
|
||||
right: "35rpx",
|
||||
bottom: "38rpx",
|
||||
},
|
||||
title: {
|
||||
left: 'center',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
splitLine: {
|
||||
show: true,
|
||||
},
|
||||
data: ['6.17', '6.18', '6.19', '6.20', '6.21', '6.22', '6.23'],
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#ccc'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 9
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
show: false
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
color: 'rgb(168, 222, 244)'
|
||||
},
|
||||
symbolSize: 0,
|
||||
label: {
|
||||
show: true,
|
||||
distance: 8,
|
||||
formatter: function (params) {
|
||||
return params.value + '级';
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(220, 240, 248)'
|
||||
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(248, 253, 255)'
|
||||
}
|
||||
])
|
||||
},
|
||||
data: [5, 3, 4, 6, 3, 4, 3],
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
return (
|
||||
<Block>
|
||||
<View className='box'>
|
||||
<Echarts
|
||||
echarts={echarts}
|
||||
option={option}
|
||||
ref={echartsRef}
|
||||
// isPage={false}
|
||||
// style自定义设置echarts宽高
|
||||
style={{ width: "100%", height: "260rpx" }}
|
||||
/>
|
||||
</View>
|
||||
</Block>
|
||||
);
|
||||
}
|
||||
|
||||
export default Index;
|
||||
@ -0,0 +1,112 @@
|
||||
// 获取当前连接状态Text
|
||||
var getConnectionStatusTitle = function (isError, isConnection, deviceType, isStand) {
|
||||
if (isError) {
|
||||
return '蓝牙连接失败'
|
||||
}
|
||||
if (!isConnection) return '蓝牙连接指引'
|
||||
// 1: FR200 2: MATRIX 3: WL200 4: FR380 5: FR390 6: M01
|
||||
switch (deviceType) {
|
||||
case 1:
|
||||
case 2:
|
||||
case 4:
|
||||
case 5:
|
||||
case 6:
|
||||
return '蓝牙连接中'
|
||||
case 3:
|
||||
return isStand ? '支架模式启动中' : '面罩模式启动中'
|
||||
default:
|
||||
return '蓝牙已连接'
|
||||
}
|
||||
}
|
||||
|
||||
var getHttpsUrl = function (url) {
|
||||
if (!url) return;
|
||||
if ((url.indexOf('http') || url.indexOf('https')) > -1) {
|
||||
return url;
|
||||
}
|
||||
return 'https://oss.flossom.com' + url;
|
||||
}
|
||||
|
||||
var getStatusData = function (level) {
|
||||
var bgCssData = {
|
||||
serious: 'background: #FFE3E3',
|
||||
moderate: 'background: #FFEBDC',
|
||||
slight: 'background: #F6FCFF',
|
||||
normal: 'background: #F8F8F8',
|
||||
sufficient: 'background: #F8F8F8'
|
||||
}
|
||||
var progressBgData = {
|
||||
serious: 'background: #FF9393',
|
||||
moderate: 'background: #FFC58C',
|
||||
slight: 'background: #E5F3F9',
|
||||
normal: 'background: #C2E5F3',
|
||||
sufficient: 'background: #9FDBF3'
|
||||
}
|
||||
if (level >= 1 && level <= 2) {
|
||||
return {
|
||||
bg: bgCssData.serious,
|
||||
title: '严重缺水',
|
||||
gear: 1,
|
||||
img: 'serious',
|
||||
progressBg: progressBgData.serious
|
||||
}
|
||||
} else if (level >= 3 && level <= 4) {
|
||||
return {
|
||||
bg: bgCssData.moderate,
|
||||
title: '中度缺水',
|
||||
gear: 2,
|
||||
img: 'moderate',
|
||||
progressBg: progressBgData.moderate
|
||||
}
|
||||
} else if (level >= 5 && level <= 6) {
|
||||
return {
|
||||
bg: bgCssData.slight,
|
||||
title: '轻微缺水',
|
||||
gear: 3,
|
||||
img: 'slight',
|
||||
progressBg: progressBgData.slight
|
||||
}
|
||||
} else if (level >= 7 && level <= 8) {
|
||||
return {
|
||||
bg: bgCssData.normal,
|
||||
title: '水分正常',
|
||||
gear: 4,
|
||||
img: 'normal',
|
||||
progressBg: progressBgData.normal
|
||||
}
|
||||
} else if (level >= 9 && level <= 10) {
|
||||
return {
|
||||
bg: bgCssData.sufficient,
|
||||
title: '水分充足',
|
||||
gear: 5,
|
||||
img: 'sufficient',
|
||||
progressBg: progressBgData.sufficient
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var formatDuration = function (string) {
|
||||
return string.slice(0, 2) + '分' + string.slice(-2) + '秒'
|
||||
}
|
||||
|
||||
var formatEnergy = function (string, type) {
|
||||
if (!string) return;
|
||||
var minutes = parseInt(string.slice(0, 2));
|
||||
var seconds = parseInt(string.slice(-2));
|
||||
var energy = minutes * 60 + seconds
|
||||
if (type === 'face') {
|
||||
return energy >= 360 ? 360 : energy
|
||||
}
|
||||
if (type === 'eye') {
|
||||
return energy >= 240 ? 240 : energy
|
||||
}
|
||||
return energy >= 600 ? 600 : energy
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
getConnectionStatusTitle,
|
||||
getStatusData,
|
||||
getHttpsUrl,
|
||||
formatDuration,
|
||||
formatEnergy
|
||||
}
|
||||
Loading…
Reference in New Issue