echarts图表
rongweikang
2 years ago
parent
93fdea9c9b
commit
74b1901625
@ -0,0 +1,106 @@
|
||||
.box_full {
|
||||
width: 690rpx;
|
||||
height: 83vh;
|
||||
margin: 28rpx auto 150rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 30rpx;
|
||||
padding: 35rpx 25rpx 25rpx 35rpx;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
// writing-mode: vertical-lr;
|
||||
// text-orientation: upright;
|
||||
// white-space: nowrap;
|
||||
// font-size: 18px;
|
||||
// font-weight: bold;
|
||||
// background-color: #c2e5f3;
|
||||
// color: #fff;
|
||||
// width: 100%;
|
||||
}
|
||||
|
||||
.fullscreen {
|
||||
position: fixed;
|
||||
top: 450rpx;
|
||||
left: -450rpx;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100vh;
|
||||
height: 100vw;
|
||||
z-index: 9999;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* 背景色 */
|
||||
transform: rotate(90deg);
|
||||
// animation: rotate 0s linear;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from {
|
||||
width: 690rpx;
|
||||
height: 320rpx;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
width: 100vh;
|
||||
height: 100vw;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
.box_background1 {
|
||||
position: absolute;
|
||||
top: 330rpx;
|
||||
left: -326rpx;
|
||||
width: 83vh;
|
||||
height: 690rpx;
|
||||
border-radius: 30rpx;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
transform: rotate(90deg);
|
||||
.power {
|
||||
margin: 56rpx 0 103rpx 38rpx;
|
||||
font-family: PingFang-SC;
|
||||
font-weight: 500;
|
||||
font-size: 36rpx;
|
||||
color: #cccccc;
|
||||
}
|
||||
.part {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
position: absolute;
|
||||
top: 37rpx;
|
||||
right: 37rpx;
|
||||
z-index: 100;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.line {
|
||||
margin: 0 30rpx 0 52rpx;
|
||||
font-family: PingFang-SC;
|
||||
font-size: 28rpx;
|
||||
color: #cccccc;
|
||||
display: flex;
|
||||
position: relative;
|
||||
height: 47rpx;
|
||||
.bottom_line {
|
||||
// border-bottom: 1rpx #ccc dashed;
|
||||
width: 550rpx;
|
||||
margin-left: 20rpx;
|
||||
position: absolute;
|
||||
bottom: -6rpx;
|
||||
right: 74rpx;
|
||||
height: 4rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
position: absolute;
|
||||
bottom: 62rpx;
|
||||
right: 44rpx;
|
||||
font-family: PingFang-SC;
|
||||
font-size: 36rpx;
|
||||
color: #cccccc;
|
||||
}
|
||||
}
|
||||
|
||||
page {
|
||||
background: #f8f8f8;
|
||||
background: #f3f3f3;
|
||||
}
|
||||
@ -0,0 +1,212 @@
|
||||
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 {
|
||||
series: any,
|
||||
full: any
|
||||
}
|
||||
|
||||
|
||||
|
||||
function Index({ series, full }: Props) {
|
||||
const echartsRef = useRef<EchartsHandle>(null);
|
||||
const [options, setOptions] = useState({
|
||||
animation: false,
|
||||
grid: {
|
||||
// 让图表占满容器
|
||||
// containLabel: true,
|
||||
top: "32rpx",
|
||||
left: "48rpx",
|
||||
right: "86rpx",
|
||||
bottom: "68rpx",
|
||||
},
|
||||
// legend: {
|
||||
// itemStyle: {
|
||||
// decal: {
|
||||
// rotation: 90
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
yAxis: {
|
||||
// name: '',
|
||||
// nameGap: 5,
|
||||
// nameTextStyle: {
|
||||
// color: '#e4e4e4',
|
||||
// fontSize:7
|
||||
// },
|
||||
type: "category",
|
||||
inverse: true,
|
||||
axisLine: {
|
||||
//坐标轴轴线相关设置。数学上的x轴
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#cccccc",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
color: "#cccccc",
|
||||
fontSize: 14,
|
||||
rotate: -90,
|
||||
margin: 18
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
"00:01",
|
||||
"00:02",
|
||||
"00:03",
|
||||
"00:04",
|
||||
"00:05",
|
||||
"00:06",
|
||||
"00:07",
|
||||
"00:08",
|
||||
"00:09",
|
||||
"00:10",
|
||||
],
|
||||
},
|
||||
xAxis: {
|
||||
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,
|
||||
dimension: 0,
|
||||
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: []
|
||||
})
|
||||
|
||||
const level = [8, 7, 6, 5, 4, 3, 2];
|
||||
const [newOptions, setNewOptions] = useState(options)
|
||||
const updata = useCallback((res) => {
|
||||
let option = JSON.parse(JSON.stringify(options))
|
||||
option.series = JSON.parse(JSON.stringify(res))
|
||||
// 更新图表数据
|
||||
setNewOptions(option)
|
||||
}, [])
|
||||
|
||||
const cancelFull = useCallback((res) => {
|
||||
console.log(1111);
|
||||
|
||||
full()
|
||||
}, [])
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
setOptions(newOptions)
|
||||
}, [newOptions]);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
updata(series)
|
||||
}, [series])
|
||||
|
||||
|
||||
return (
|
||||
<Block>
|
||||
<View id='box' className='box_full'>
|
||||
<Echarts
|
||||
force-use-old-canvas='false'
|
||||
echarts={echarts}
|
||||
option={options}
|
||||
ref={echartsRef}
|
||||
// isPage={false}
|
||||
// style自定义设置echarts宽高
|
||||
style={{ width: "620rpx", height: "80vh", zIndex: 1 }}
|
||||
/>
|
||||
<View className='box_background1'>
|
||||
<Image className='part' src={require("@/img/part-scran.png")} 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'>时间</View>
|
||||
</View>
|
||||
</View>
|
||||
</Block >
|
||||
);
|
||||
}
|
||||
|
||||
export default Index;
|
||||
@ -0,0 +1,4 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: "水分测试",
|
||||
enablePageMeta: true,
|
||||
});
|
||||
Loading…
Reference in New Issue