添加echart图标
rongweikang
2 years ago
parent
328d55b69a
commit
ef441b00f0
@ -0,0 +1,62 @@
|
||||
.box {
|
||||
width: 690rpx;
|
||||
height: 320rpx;
|
||||
margin: 28rpx auto;
|
||||
background-color: #fff;
|
||||
border-radius: 30rpx;
|
||||
padding: 35rpx 25rpx 25rpx 35rpx;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
.box_background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 690rpx;
|
||||
height: 320rpx;
|
||||
border-radius: 30rpx;
|
||||
background-color: #fff;
|
||||
.power {
|
||||
margin: 34rpx 0 28rpx 28rpx;
|
||||
font-family: PingFang-SC;
|
||||
font-weight: 500;
|
||||
font-size: 18rpx;
|
||||
color: #cccccc;
|
||||
}
|
||||
.full{
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
position: absolute;
|
||||
top: 32rpx;
|
||||
right: 26rpx;
|
||||
}
|
||||
.line {
|
||||
margin: 0 0 6rpx 35rpx;
|
||||
font-family: PingFang-SC;
|
||||
font-size: 14rpx;
|
||||
color: #cccccc;
|
||||
display: flex;
|
||||
position: relative;
|
||||
height: 18rpx;
|
||||
.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: 22rpx;
|
||||
right: 24rpx;
|
||||
font-family: PingFang-SC;
|
||||
font-size: 18rpx;
|
||||
color: #cccccc;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,284 @@
|
||||
import Taro from "@tarojs/taro";
|
||||
import classnames from "classnames";
|
||||
import { Block, View, Image, Text } from "@tarojs/components";
|
||||
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: "18rpx",
|
||||
right: "28rpx",
|
||||
bottom: "17rpx"
|
||||
},
|
||||
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: false,
|
||||
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]
|
||||
|
||||
return (
|
||||
<View className='box' >
|
||||
<Echarts
|
||||
echarts={echarts}
|
||||
option={option}
|
||||
ref={echartsRef}
|
||||
// isPage={false}
|
||||
// style自定义设置echarts宽高
|
||||
style={{ width: '630rpx', height: '260rpx' }}
|
||||
/>
|
||||
<View className='box_background'>
|
||||
<Image className='full' src={require('@/img/full-scran.png')}></Image>
|
||||
<View className='power'>实时能量</View>
|
||||
{
|
||||
level.map(item => (
|
||||
<View className='line' key={item}>
|
||||
<View className='number'>{item}</View><View className='bottom_line'>8</View>
|
||||
</View>)
|
||||
)
|
||||
}
|
||||
<View className='line' >
|
||||
<View className='number'>1</View>
|
||||
</View>
|
||||
<View className='time'>时间</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
export default Index;
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue