You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
381 lines
7.9 KiB
TypeScript
381 lines
7.9 KiB
TypeScript
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 { useEffect, useRef, useState, useCallback } from "react";
|
|
import Echarts, { EChartOption, EchartsHandle } from "taro-react-echarts";
|
|
import echarts from "@/utils/echarts.min.js";
|
|
|
|
import "./index.less";
|
|
|
|
interface Props {
|
|
data: any
|
|
}
|
|
|
|
|
|
|
|
function Index({ data }: Props) {
|
|
const buttonRef = useRef(null);
|
|
const echartsRef = useRef<EchartsHandle>(null);
|
|
const [options, setOptions] = useState({
|
|
animation: false,
|
|
grid: {
|
|
// 让图表占满容器
|
|
// containLabel: true,
|
|
top: "28rpx",
|
|
left: "18rpx",
|
|
right: "28rpx",
|
|
bottom: "17rpx",
|
|
},
|
|
// legend: {
|
|
// itemStyle: {
|
|
// decal: {
|
|
// rotation: 90
|
|
// }
|
|
// }
|
|
// },
|
|
xAxis: {
|
|
// name: '',
|
|
// nameGap: 5,
|
|
// nameTextStyle: {
|
|
// color: '#e4e4e4',
|
|
// fontSize:7
|
|
// },
|
|
type: "category",
|
|
axisLine: {
|
|
//坐标轴轴线相关设置。数学上的x轴
|
|
show: true,
|
|
lineStyle: {
|
|
color: "#cccccc",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
//坐标轴刻度标签的相关设置
|
|
color: "#cccccc",
|
|
fontSize: 8,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
data: [
|
|
"00:01",
|
|
"00:02",
|
|
"00:03",
|
|
"00:04",
|
|
"00:05",
|
|
"00:06",
|
|
"00:07",
|
|
"00:08",
|
|
"00:09",
|
|
"00:10",
|
|
],
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
min: 0,
|
|
max: 8,
|
|
splitNumber: 8,
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "#cccccc",
|
|
type: [4, 2],
|
|
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: "#fff8c9",
|
|
},
|
|
{
|
|
gt: 1,
|
|
lte: 2,
|
|
color: "#fff0c6",
|
|
},
|
|
{
|
|
gt: 2,
|
|
lte: 3,
|
|
color: "#ffe5c3",
|
|
},
|
|
{
|
|
gt: 3,
|
|
lte: 4,
|
|
color: "#ffdbbf",
|
|
},
|
|
{
|
|
gt: 4,
|
|
lte: 5,
|
|
color: "#ffcfbb",
|
|
},
|
|
{
|
|
gt: 5,
|
|
lte: 6,
|
|
color: "#ffbab5",
|
|
},
|
|
{
|
|
gt: 6,
|
|
lte: 7,
|
|
color: "#ffb4b3",
|
|
},
|
|
{
|
|
gt: 7,
|
|
lte: 8,
|
|
color: "#ffb4b3",
|
|
},
|
|
],
|
|
outOfRange: {
|
|
color: "#ff8410",
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
data: [2, 3, 5, 3, 5, 6, 8, 5, 6, 4],
|
|
type: "line",
|
|
smooth: true,
|
|
z: 1,
|
|
areaStyle: {},
|
|
color: "red",
|
|
},
|
|
{
|
|
data: [2, 3, 5, 3, 5, 6, 8, 5, 6, 4],
|
|
type: "line",
|
|
smooth: true,
|
|
symbolSize: 5,
|
|
lineStyle: {
|
|
color: "#ff8410",
|
|
width: 1,
|
|
},
|
|
itemStyle: {
|
|
color: "#ff8410",
|
|
},
|
|
},
|
|
{
|
|
name: "a",
|
|
data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
type: "bar",
|
|
barWidth: 12,
|
|
z: 2,
|
|
stack: "x",
|
|
visualMap: false,
|
|
itemStyle: {
|
|
color: "#ffcf56",
|
|
},
|
|
},
|
|
{
|
|
name: "b",
|
|
data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
type: "bar",
|
|
z: 2,
|
|
stack: "x",
|
|
visualMap: false,
|
|
itemStyle: {
|
|
color: "#febb22",
|
|
},
|
|
},
|
|
{
|
|
name: "c",
|
|
data: [0, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
type: "bar",
|
|
z: 2,
|
|
stack: "x",
|
|
visualMap: false,
|
|
itemStyle: {
|
|
color: "#ffac28",
|
|
},
|
|
},
|
|
{
|
|
name: "d",
|
|
data: [0, 0, 1, 0, 1, 1, 1, 1, 1, 1],
|
|
type: "bar",
|
|
z: 2,
|
|
stack: "x",
|
|
visualMap: false,
|
|
itemStyle: {
|
|
color: "#ff8410",
|
|
},
|
|
},
|
|
{
|
|
name: "e",
|
|
data: [0, 0, 1, 0, 1, 1, 1, 1, 1, 0],
|
|
type: "bar",
|
|
z: 2,
|
|
stack: "x",
|
|
visualMap: false,
|
|
itemStyle: {
|
|
color: "#f85804",
|
|
},
|
|
},
|
|
{
|
|
name: "f",
|
|
data: [0, 0, 0, 0, 0, 1, 1, 0, 1, 0],
|
|
type: "bar",
|
|
z: 2,
|
|
stack: "x",
|
|
visualMap: false,
|
|
itemStyle: {
|
|
color: "#e02e14",
|
|
},
|
|
},
|
|
{
|
|
name: "h",
|
|
data: [0, 0, 0, 0, 0, 0, 1, 0, 0, 0],
|
|
type: "bar",
|
|
z: 2,
|
|
stack: "x",
|
|
visualMap: false,
|
|
itemStyle: {
|
|
color: "#b30016",
|
|
},
|
|
},
|
|
{
|
|
name: "i",
|
|
data: [0, 0, 0, 0, 0, 0, 1, 0, 0, 0],
|
|
type: "bar",
|
|
z: 2,
|
|
stack: "x",
|
|
visualMap: false,
|
|
itemStyle: {
|
|
color: "#750010",
|
|
},
|
|
},
|
|
],
|
|
})
|
|
|
|
const level = [8, 7, 6, 5, 4, 3, 2];
|
|
const [newOptions, setNewOptions] = useState(options)
|
|
const [newData, setNewData] = useState(0)
|
|
const full = useCallback(() => {
|
|
// let box = document.getElementById("box");
|
|
// box?.classList.add('fullscreen')
|
|
|
|
|
|
let stop = 0
|
|
// let time = setInterval(function () {
|
|
// stop++
|
|
let option = JSON.parse(JSON.stringify(options))
|
|
let num = Math.floor(Math.random() * 9)
|
|
let count = 0
|
|
options.series.map(item => {
|
|
if (item.type === 'line') {
|
|
item.data.splice(0, 1)
|
|
item.data.push(num)
|
|
}
|
|
if (item.type === 'bar') {
|
|
count++
|
|
item.data.splice(0, 1)
|
|
if (count <= num) {
|
|
item.data.push(1)
|
|
} else {
|
|
item.data.push(0)
|
|
}
|
|
}
|
|
})
|
|
console.log(option);
|
|
|
|
// 更新图表数据
|
|
setNewOptions(option)
|
|
// if (stop > 20) {
|
|
// clearInterval(time)
|
|
// }
|
|
// }, 1000)
|
|
|
|
}, [data])
|
|
|
|
|
|
useEffect(() => {
|
|
setOptions(newOptions)
|
|
}, [newOptions]);
|
|
|
|
useEffect(() => {
|
|
setNewData(data)
|
|
}, [data]);
|
|
|
|
useEffect(() => {
|
|
let option = JSON.parse(JSON.stringify(options))
|
|
let num = Math.floor(newData * 9)
|
|
let count = 0
|
|
options.series.map(item => {
|
|
if (item.type === 'line') {
|
|
item.data.splice(0, 1)
|
|
item.data.push(num)
|
|
}
|
|
if (item.type === 'bar') {
|
|
count++
|
|
item.data.splice(0, 1)
|
|
if (count <= num) {
|
|
item.data.push(1)
|
|
} else {
|
|
item.data.push(0)
|
|
}
|
|
}
|
|
})
|
|
console.log(option, data);
|
|
|
|
// 更新图表数据
|
|
setNewOptions(option)
|
|
}, [newData])
|
|
// 当 someProp 变化时执行
|
|
// const quanping = () => {
|
|
// T.setPageOrientation({
|
|
// orientation: "portrait",
|
|
// });
|
|
|
|
|
|
// // taro.setPageOrientation({
|
|
// // orientation: "landscape",
|
|
// // });
|
|
|
|
// },
|
|
|
|
|
|
return (
|
|
<Block>
|
|
<View id='box' className='box'>
|
|
<Echarts
|
|
force-use-old-canvas='false'
|
|
echarts={echarts}
|
|
option={options}
|
|
ref={echartsRef}
|
|
// isPage={false}
|
|
// style自定义设置echarts宽高
|
|
style={{ width: "630rpx", height: "260rpx", zIndex: 1 }}
|
|
/>
|
|
<View className='box_background'>
|
|
<Image className='full' ref={buttonRef} src={require("@/img/full-scran.png")} onClick={full}></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'>时间</View>
|
|
</View>
|
|
</View>
|
|
</Block >
|
|
);
|
|
}
|
|
|
|
export default Index;
|