添加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