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