04.26推送代码
c'g'l
2 years ago
parent
a5bed953a1
commit
ac85563603
File diff suppressed because it is too large
Load Diff
@ -1,289 +1,255 @@
|
|||||||
|
import { Block, View, Image } from "@tarojs/components";
|
||||||
import { Block, View, Image, Text, Input } from "@tarojs/components";
|
import { useEffect, useRef, useState, useCallback } from "react";
|
||||||
import { useRef } from "react";
|
|
||||||
import Echarts, { EChartOption, EchartsHandle } from "taro-react-echarts";
|
import Echarts, { EChartOption, EchartsHandle } from "taro-react-echarts";
|
||||||
// import echarts from "@/utils/echarts.min.js";
|
import echarts from "../echarts.min.js";
|
||||||
import * as echarts from "echarts";
|
|
||||||
|
|
||||||
import "./index.less";
|
import "./index.less";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
EchartsData: any
|
series: any;
|
||||||
|
full: any;
|
||||||
|
time: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
function Index({
|
function Index({ series, full, time }: Props) {
|
||||||
EchartsData
|
const echartsRef = useRef<EchartsHandle>(null);
|
||||||
}: Props) {
|
const [options, setOptions] = useState({
|
||||||
|
animation: false,
|
||||||
|
grid: {
|
||||||
let type = 0
|
// 让图表占满容器
|
||||||
|
// containLabel: true,
|
||||||
|
top: "28rpx",
|
||||||
switch (EchartsData?.data?.workMode) {
|
left: "18rpx",
|
||||||
case 'face':
|
right: "28rpx",
|
||||||
type = 37
|
bottom: "17rpx",
|
||||||
break;
|
},
|
||||||
case 'eyes':
|
xAxis: {
|
||||||
type = 25
|
type: "category",
|
||||||
break;
|
axisLine: {
|
||||||
case 'nasolabialFold':
|
//坐标轴轴线相关设置。数学上的x轴
|
||||||
type = 25
|
show: true,
|
||||||
break;
|
lineStyle: {
|
||||||
case 'mandibularLine':
|
color: "#cccccc",
|
||||||
type = 19
|
},
|
||||||
break;
|
},
|
||||||
case 'headLiftingPro':
|
axisLabel: {
|
||||||
type = 13
|
//坐标轴刻度标签的相关设置
|
||||||
break;
|
color: "#fff",
|
||||||
default:
|
fontSize: 1,
|
||||||
|
},
|
||||||
}
|
axisTick: {
|
||||||
|
show: false,
|
||||||
const echartsRef = useRef<EchartsHandle>(null);
|
},
|
||||||
|
},
|
||||||
function generateColorArray(startColor, endColor, steps) {
|
yAxis: {
|
||||||
var startRGB = hexToRgb(startColor);
|
type: "value",
|
||||||
var endRGB = hexToRgb(endColor);
|
min: 0,
|
||||||
var colors = [];
|
max: 8,
|
||||||
for (var i = 0; i < steps; i++) {
|
splitNumber: 8,
|
||||||
var r = interpolate(startRGB.r, endRGB.r, steps, i);
|
splitLine: {
|
||||||
var g = interpolate(startRGB.g, endRGB.g, steps, i);
|
show: true,
|
||||||
var b = interpolate(startRGB.b, endRGB.b, steps, i);
|
lineStyle: {
|
||||||
colors.push(rgbToHex(r, g, b));
|
color: "#cccccc",
|
||||||
}
|
type: [4, 2],
|
||||||
return colors;
|
dashOffset: 4,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
visualMap: {
|
||||||
|
z: 1,
|
||||||
|
top: 0,
|
||||||
|
right: 0,
|
||||||
|
seriesIndex: 0,
|
||||||
|
show: false,
|
||||||
|
pieces: [
|
||||||
|
{
|
||||||
|
gt: 0,
|
||||||
|
lte: 1,
|
||||||
|
color: "#f8f4f9",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
gt: 1,
|
||||||
|
lte: 2,
|
||||||
|
color: "#f5f1f8",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
gt: 2,
|
||||||
|
lte: 3,
|
||||||
|
color: "#f1edf6",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
gt: 3,
|
||||||
|
lte: 4,
|
||||||
|
color: "#ece9f5",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
gt: 4,
|
||||||
|
lte: 5,
|
||||||
|
color: "#e8e4f3",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
gt: 5,
|
||||||
|
lte: 6,
|
||||||
|
color: "#e3e0f1",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
gt: 6,
|
||||||
|
lte: 7,
|
||||||
|
color: "#e1ddf0",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
gt: 7,
|
||||||
|
lte: 8,
|
||||||
|
color: "#dedaef",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
outOfRange: {
|
||||||
|
color: "#ff8410",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// series: []
|
||||||
|
});
|
||||||
|
|
||||||
|
const level = [8, 7, 6, 5, 4, 3, 2];
|
||||||
|
const [isFull, setIsfull] = useState(false);
|
||||||
|
const [data, setData] = useState([
|
||||||
|
"00:01",
|
||||||
|
"00:02",
|
||||||
|
"00:03",
|
||||||
|
"00:04",
|
||||||
|
"00:05",
|
||||||
|
"00:06",
|
||||||
|
"00:07",
|
||||||
|
"00:08",
|
||||||
|
"00:09",
|
||||||
|
"00:10",
|
||||||
|
]);
|
||||||
|
const [newOptions, setNewOptions] = useState(options);
|
||||||
|
|
||||||
|
const updata = useCallback((res, times) => {
|
||||||
|
if (times.second == 0) {
|
||||||
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
function hexToRgb(hex) {
|
|
||||||
var bigint = parseInt(hex.slice(1), 16);
|
|
||||||
var r = (bigint >> 16) & 255;
|
|
||||||
var g = (bigint >> 8) & 255;
|
|
||||||
var b = bigint & 255;
|
|
||||||
return { r: r, g: g, b: b };
|
|
||||||
}
|
|
||||||
|
|
||||||
function rgbToHex(r, g, b) {
|
|
||||||
return (
|
|
||||||
"#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function interpolate(start, end, steps, count) {
|
// let option
|
||||||
return start + ((end - start) / steps) * count;
|
// if (data) {
|
||||||
|
// option = JSON.parse(JSON.stringify(newParams))
|
||||||
|
// } else {
|
||||||
|
// option = JSON.parse(JSON.stringify(options))
|
||||||
|
// }
|
||||||
|
let option = JSON.parse(JSON.stringify(options))
|
||||||
|
let datas = JSON.parse(JSON.stringify(data))
|
||||||
|
if (series[0].data.length == 1) {
|
||||||
|
datas = [
|
||||||
|
"00:01",
|
||||||
|
"00:02",
|
||||||
|
"00:03",
|
||||||
|
"00:04",
|
||||||
|
"00:05",
|
||||||
|
"00:06",
|
||||||
|
"00:07",
|
||||||
|
"00:08",
|
||||||
|
"00:09",
|
||||||
|
"00:10",
|
||||||
|
]
|
||||||
|
} else {
|
||||||
|
if (times.min > 0 || times.second > 10) {
|
||||||
|
datas.splice(0, 1)
|
||||||
|
datas.push(formatTime(times))
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
setData(JSON.parse(JSON.stringify(datas)))
|
||||||
|
// option.xAxis.data = data
|
||||||
|
option.series = JSON.parse(JSON.stringify(res))
|
||||||
|
// 更新图表数据
|
||||||
|
setNewOptions(option);
|
||||||
|
}, [data]);
|
||||||
|
|
||||||
const startColor = "#FFFF00"; // 黄色
|
|
||||||
const endColor = "#FF0000"; // 红色
|
|
||||||
const steps = 81; // 80个颜色
|
|
||||||
|
|
||||||
|
|
||||||
const colors = generateColorArray(startColor, endColor, steps);
|
function formatTime(times: any) {
|
||||||
// const xList = [...new Array(type).fill(0).map((item, key) => key)];
|
let mins;
|
||||||
let seriesData: any = []
|
if (times.min < 10) {
|
||||||
seriesData = EchartsData?.data?.groupedAa
|
mins = "0" + times.min;
|
||||||
const xList = [...new Array(type).fill(0).map((item, key) => key)];
|
} else {
|
||||||
// const seriesData = [
|
mins = times.min;
|
||||||
// ...xList.map((item) => {
|
|
||||||
// return Math.random() * 80;
|
|
||||||
// }),
|
|
||||||
// ];
|
|
||||||
|
|
||||||
|
|
||||||
const option: EChartOption = {
|
|
||||||
grid: {
|
|
||||||
// 让图表占满容器
|
|
||||||
top: "10rpx",
|
|
||||||
left: "45rpx",
|
|
||||||
right: "28rpx",
|
|
||||||
bottom: "17rpx",
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: "category",
|
|
||||||
data: [...xList],
|
|
||||||
axisLabel: {
|
|
||||||
interval: 5,
|
|
||||||
formatter: function (value, index) {
|
|
||||||
return value * 10 + 's';
|
|
||||||
},
|
|
||||||
textStyle: {
|
|
||||||
color: '#999999', // 文字颜色
|
|
||||||
fontSize: 8 // 文字大小
|
|
||||||
},
|
|
||||||
},
|
|
||||||
axisTick: {
|
|
||||||
// alignWithLabel: true,
|
|
||||||
show: false,
|
|
||||||
interval: 9,
|
|
||||||
},
|
|
||||||
// axisLine: {
|
|
||||||
// show: false,
|
|
||||||
// },
|
|
||||||
},
|
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
min: 0,
|
|
||||||
max: 80,
|
|
||||||
splitNumber: 10,
|
|
||||||
axisLabel: {
|
|
||||||
formatter: function (value, index) {
|
|
||||||
const num = value / 10 + 1
|
|
||||||
return num === 9 ? '' : num + '级';
|
|
||||||
},
|
|
||||||
textStyle: {
|
|
||||||
color: '#999999', // 文字颜色
|
|
||||||
fontSize: 8 // 文字大小
|
|
||||||
},
|
|
||||||
},
|
|
||||||
type: "value",
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: ["#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#fff"],
|
|
||||||
type: 'dashed'
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
],
|
|
||||||
series: [
|
|
||||||
|
|
||||||
{
|
|
||||||
barCategoryGap: '0%',
|
|
||||||
data: seriesData,
|
|
||||||
type: "bar",
|
|
||||||
// barWidth: 15,
|
|
||||||
gapWidth: "0%",
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: function (params) {
|
|
||||||
var value = params.data;
|
|
||||||
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: colors[parseInt(value)], // 红色
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: colors[0], // 黄色
|
|
||||||
},
|
|
||||||
]);;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
}
|
||||||
|
let secs;
|
||||||
|
if (times.second < 10) {
|
||||||
|
secs = "0" + times.second;
|
||||||
|
} else {
|
||||||
|
secs = times.second;
|
||||||
|
}
|
||||||
|
return `${mins.toString()}:${secs.toString()}`;
|
||||||
|
}
|
||||||
|
|
||||||
// 基于 EchartsData 生成 ECharts 配置
|
const cancelFull = useCallback(
|
||||||
// const option: EChartOption ={
|
(res) => {
|
||||||
// grid: {
|
full();
|
||||||
// // 让图表占满容器
|
setIsfull(!isFull);
|
||||||
// top: "10rpx",
|
},
|
||||||
// left: "45rpx",
|
[isFull]
|
||||||
// right: "28rpx",
|
);
|
||||||
// bottom: "17rpx",
|
|
||||||
// },
|
|
||||||
// xAxis: {
|
|
||||||
// type: "category",
|
|
||||||
// data: [...xList],
|
|
||||||
// axisLabel: {
|
|
||||||
// interval: 5,
|
|
||||||
// formatter: function (value, index) {
|
|
||||||
// return value * 10 + 's';
|
|
||||||
// },
|
|
||||||
// textStyle: {
|
|
||||||
// color: '#999999', // 文字颜色
|
|
||||||
// fontSize: 8 // 文字大小
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// axisTick: {
|
|
||||||
// // alignWithLabel: true,
|
|
||||||
// show: false,
|
|
||||||
// interval: 9,
|
|
||||||
// },
|
|
||||||
// // axisLine: {
|
|
||||||
// // show: false,
|
|
||||||
// // },
|
|
||||||
// },
|
|
||||||
// yAxis: [
|
|
||||||
// {
|
|
||||||
// min: 0,
|
|
||||||
// max: 80,
|
|
||||||
// splitNumber: 10,
|
|
||||||
// axisLabel: {
|
|
||||||
// formatter: function (value, index) {
|
|
||||||
// const num = value / 10 + 1
|
|
||||||
// return num === 9 ? '' : num + '级';
|
|
||||||
// },
|
|
||||||
// textStyle: {
|
|
||||||
// color: '#999999', // 文字颜色
|
|
||||||
// fontSize: 8 // 文字大小
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// type: "value",
|
|
||||||
// splitLine: {
|
|
||||||
// lineStyle: {
|
|
||||||
// color: ["#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#fff"],
|
|
||||||
// type: 'dashed'
|
|
||||||
// },
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// ],
|
|
||||||
// series: [
|
|
||||||
|
|
||||||
// {
|
useEffect(() => {
|
||||||
// barCategoryGap: '0%',
|
setOptions(newOptions);
|
||||||
// data: seriesData,
|
}, [newOptions]);
|
||||||
// type: "bar",
|
|
||||||
// // barWidth: 15,
|
|
||||||
// gapWidth: "0%",
|
|
||||||
// itemStyle: {
|
|
||||||
// normal: {
|
|
||||||
// color: function (params) {
|
|
||||||
// var value = params.data;
|
|
||||||
// return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
||||||
// {
|
|
||||||
// offset: 0,
|
|
||||||
// color: colors[parseInt(value)], // 红色
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// offset: 1,
|
|
||||||
// color: colors[0], // 黄色
|
|
||||||
// },
|
|
||||||
// ]);;
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// ],
|
|
||||||
// };
|
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
|
||||||
return (
|
updata(series, time);
|
||||||
<Block>
|
}, [series]);
|
||||||
<Echarts
|
|
||||||
echarts={echarts}
|
|
||||||
option={option}
|
|
||||||
ref={echartsRef}
|
|
||||||
// isPage={false}
|
|
||||||
// style自定义设置echarts宽高
|
|
||||||
// style={{ width: "100%", height: "100%" }}
|
|
||||||
style={{ width: "670rpx", height: "260rpx" }}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* <View className="box">
|
return (
|
||||||
|
<Block>
|
||||||
|
<View className={isFull ? "echart-component-full" : "echart-component"}>
|
||||||
<Echarts
|
<Echarts
|
||||||
|
force-use-old-canvas="false"
|
||||||
echarts={echarts}
|
echarts={echarts}
|
||||||
option={option}
|
option={options}
|
||||||
ref={echartsRef}
|
ref={echartsRef}
|
||||||
// isPage={false}
|
// isPage={false}
|
||||||
// style自定义设置echarts宽高
|
// style自定义设置echarts宽高
|
||||||
style={{ width: "630rpx", height: "240rpx" }}
|
style={{ width: "630rpx", height: "260rpx", zIndex: 1 }}
|
||||||
/>
|
/>
|
||||||
|
<View className="box_background">
|
||||||
</View> */}
|
<Image
|
||||||
|
className={isFull ? "part" : "full"}
|
||||||
|
src={require(`@/img/${isFull ? "part-scran" : "full-scran"}.png`)}
|
||||||
</Block>
|
onClick={cancelFull}
|
||||||
);
|
></Image>
|
||||||
|
|
||||||
|
<View className="power">实时能量</View>
|
||||||
|
{level.map((item) => (
|
||||||
|
<View className="line" key={item}>
|
||||||
|
<View className="number">{item}</View>
|
||||||
|
<View className="bottom_line"></View>
|
||||||
|
</View>
|
||||||
|
))}
|
||||||
|
<View className="line">
|
||||||
|
<View className="number">1</View>
|
||||||
|
</View>
|
||||||
|
<View className="time_list flex">
|
||||||
|
{data.map((times, index) => (
|
||||||
|
<View key={index}>{times}</View>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
<View className="time">时间</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Block>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Index;
|
export default Index;
|
||||||
|
|||||||
Loading…
Reference in New Issue