update
This commit is contained in:
parent
1c5e0f2a69
commit
eca11f0081
@ -78,9 +78,6 @@ export default function getOptions(seriesData, name) {
|
||||
color: '#213259a0',
|
||||
},
|
||||
},
|
||||
// interval: 10,
|
||||
// min: 0,
|
||||
// max: 100,
|
||||
},
|
||||
series: seriesData.map((arr, index) => ({
|
||||
name: index + 1 + '#' + name,
|
||||
@ -94,162 +91,6 @@ export default function getOptions(seriesData, name) {
|
||||
]),
|
||||
},
|
||||
})),
|
||||
// [
|
||||
// {
|
||||
// name: '1#天然气I',
|
||||
// data: Array(7)
|
||||
// .fill(1)
|
||||
// .map((_) => {
|
||||
// return randomInt(1000, 2000);
|
||||
// }),
|
||||
// type: 'line',
|
||||
// areaStyle: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// { offset: 0, color: '#12FFF540' },
|
||||
// { offset: 0.5, color: '#12FFF520' },
|
||||
// { offset: 1, color: '#12FFF510' },
|
||||
// ]),
|
||||
// },
|
||||
// // smooth: true,
|
||||
// },
|
||||
// {
|
||||
// name: '2#天然气I',
|
||||
// data: Array(7)
|
||||
// .fill(1)
|
||||
// .map((_) => {
|
||||
// return randomInt(1000, 2000);
|
||||
// }),
|
||||
// type: 'line',
|
||||
// areaStyle: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// { offset: 0, color: '#2760FF40' },
|
||||
// { offset: 0.5, color: '#2760FF20' },
|
||||
// { offset: 1, color: '#2760FF10' },
|
||||
// ]),
|
||||
// },
|
||||
// // smooth: true,
|
||||
// },
|
||||
// {
|
||||
// name: '3#天然气I',
|
||||
// data: Array(7)
|
||||
// .fill(1)
|
||||
// .map((_) => {
|
||||
// return randomInt(1000, 2000);
|
||||
// }),
|
||||
// type: 'line',
|
||||
// areaStyle: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// { offset: 0, color: '#FFD16040' },
|
||||
// { offset: 0.5, color: '#FFD16020' },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: '#FFD16010',
|
||||
// },
|
||||
// ]),
|
||||
// },
|
||||
// // smooth: true,
|
||||
// },
|
||||
// {
|
||||
// name: '4#天然气I',
|
||||
// data: Array(7)
|
||||
// .fill(1)
|
||||
// .map((_) => {
|
||||
// return randomInt(1000, 2000);
|
||||
// }),
|
||||
// type: 'line',
|
||||
// areaStyle: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// { offset: 0, color: '#E8009140' },
|
||||
// {
|
||||
// offset: 0.5,
|
||||
// color: '#E8009120',
|
||||
// },
|
||||
// { offset: 1, color: '#E8009110' },
|
||||
// ]),
|
||||
// },
|
||||
// // smooth: true,
|
||||
// },
|
||||
// {
|
||||
// name: '5#天然气I',
|
||||
// data: Array(7)
|
||||
// .fill(1)
|
||||
// .map((_) => {
|
||||
// return randomInt(1000, 2000);
|
||||
// }),
|
||||
// type: 'line',
|
||||
// areaStyle: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// { offset: 0, color: '#8064ff40' },
|
||||
// {
|
||||
// offset: 0.5,
|
||||
// color: '#8064ff20',
|
||||
// },
|
||||
// { offset: 1, color: '#8064ff10' },
|
||||
// ]),
|
||||
// },
|
||||
// // smooth: true,
|
||||
// },
|
||||
// {
|
||||
// name: '6#天然气I',
|
||||
// data: Array(7)
|
||||
// .fill(1)
|
||||
// .map((_) => {
|
||||
// return randomInt(1000, 2000);
|
||||
// }),
|
||||
// type: 'line',
|
||||
// areaStyle: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// { offset: 0, color: '#ff8a3b40' },
|
||||
// {
|
||||
// offset: 0.5,
|
||||
// color: '#ff8a3b20',
|
||||
// },
|
||||
// { offset: 1, color: '#ff8a3b10' },
|
||||
// ]),
|
||||
// },
|
||||
// // smooth: true,
|
||||
// },
|
||||
// {
|
||||
// name: '7#天然气I',
|
||||
// data: Array(7)
|
||||
// .fill(1)
|
||||
// .map((_) => {
|
||||
// return randomInt(1000, 2000);
|
||||
// }),
|
||||
// type: 'line',
|
||||
// areaStyle: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// { offset: 0, color: '#8cd26d40' },
|
||||
// {
|
||||
// offset: 0.5,
|
||||
// color: '#8cd26d20',
|
||||
// },
|
||||
// { offset: 1, color: '#8cd26d10' },
|
||||
// ]),
|
||||
// },
|
||||
// // smooth: true,
|
||||
// },
|
||||
// {
|
||||
// name: '8#天然气I',
|
||||
// data: Array(7)
|
||||
// .fill(1)
|
||||
// .map((_) => {
|
||||
// return randomInt(1000, 2000);
|
||||
// }),
|
||||
// type: 'line',
|
||||
// areaStyle: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// { offset: 0, color: '#2aa1ff40' },
|
||||
// {
|
||||
// offset: 0.5,
|
||||
// color: '#2aa1ff20',
|
||||
// },
|
||||
// { offset: 1, color: '#2aa1ff10' },
|
||||
// ]),
|
||||
// },
|
||||
// // smooth: true,
|
||||
// },
|
||||
// ],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
|
||||
@ -19,7 +19,7 @@ const Chart2 = () => {
|
||||
{
|
||||
icon: icon3,
|
||||
label: '剩余时间',
|
||||
value: ctx.runState?.lastFireChangeTime.split('S')[0] + 's' || '0s',
|
||||
value: ctx.runState?.lastFireChangeTime || '-',
|
||||
},
|
||||
{
|
||||
icon: icon2,
|
||||
|
||||
@ -1,113 +0,0 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { motion } from "framer-motion"
|
||||
|
||||
//烟气处理
|
||||
import Item1 from './substitutionCharts/Chart2.jsx'
|
||||
|
||||
//温度变化
|
||||
import Item2 from './substitutionCharts/Chart3.jsx'
|
||||
|
||||
//发电量
|
||||
import Item3 from './substitutionCharts/Chart4.jsx'
|
||||
|
||||
import Icon1 from '../../assets/Icon/LeftChart2Icon.png'
|
||||
import Icon2 from '../../assets/Icon/LeftChart2Icon2.png'
|
||||
import './Chart2.less'
|
||||
|
||||
const data = [10, 25, 30, 25, 58, 23, 36, 34]
|
||||
|
||||
//温度
|
||||
const Temptitle = "温度变化";
|
||||
const Tempxdata = ["1:00", "2:00", "3:00", "4:00", "5:00", "6:00", "7:00", "8:00", "9:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00", "24:00"]
|
||||
const Tempdata = [420, 410, 410, 300, 350, 380, 352, 410, 410, 300, 350, 380, 352, 410, 410, 300, 350, 380, 352, 350, 380, 352, 380, 352]
|
||||
|
||||
|
||||
//风机频率数据
|
||||
var data2 = [[800, 4302, 200, 3234, 800, 4302, 200, 3234, 800, 4302, 200, 3234, 800, 4302, 200, 3234],
|
||||
[4450, 553, 2350, 234, 4450, 553, 2350, 234, 4450, 553, 2350, 234, 4450, 553, 2350, 234],
|
||||
[2400, 305, 3500, 234, 2400, 305, 3500, 234, 2400, 305, 3500, 234, 2400, 305, 3500, 234],
|
||||
[50, 3302, 480, 3334, 50, 3302, 480, 3334, 50, 3302, 480, 3334, 50, 3302, 480, 3334],
|
||||
]
|
||||
|
||||
var data3 = [[4450, 553, 2350, 234, 4452, 553, 2350, 234, 4450, 553, 2350, 234, 4450, 553, 2350, 234],
|
||||
[700, 4002, 200, 3234, 800, 4302, 200, 3234, 700, 3302, 200, 3234, 800, 4302, 200, 3234],
|
||||
[50, 3302, 480, 3334, 53, 3302, 480, 3034, 50, 3302, 480, 3334, 20, 3302, 580, 3334],
|
||||
[2400, 305, 3500, 234, 2400, 305, 3500, 234, 2400, 305, 3500, 234, 2400, 205, 3500, 234],
|
||||
]
|
||||
|
||||
|
||||
export default function Chart2() {
|
||||
|
||||
const [index, setIndex] = useState(1)
|
||||
let num = 1;
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => { SwitchIndex() }, 10000);
|
||||
return () => clearInterval(timer);
|
||||
}, [])
|
||||
|
||||
function SwitchIndex() {
|
||||
num = num + 1
|
||||
if (num < 3) {
|
||||
setIndex(num)
|
||||
}
|
||||
else {
|
||||
num = 1
|
||||
setIndex(num)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function SwitchData(index) {
|
||||
switch (index) {
|
||||
case 1: return <Item data={data} />
|
||||
case 2: return <Item1 data={Tempdata} title={Temptitle} xdata={Tempxdata} />
|
||||
}
|
||||
}
|
||||
|
||||
//切换标题
|
||||
function SwitchTitle(index) {
|
||||
switch (index) {
|
||||
case 1: return "烟气处理"
|
||||
case 2: return "余热发电"
|
||||
}
|
||||
}
|
||||
|
||||
//切换LOGO
|
||||
function SwitchIcon(index) {
|
||||
switch (index) {
|
||||
case 1: return Icon1
|
||||
case 2: return Icon2
|
||||
}
|
||||
}
|
||||
|
||||
//切换图表1
|
||||
function SwitchChart1(index) {
|
||||
switch (index) {
|
||||
case 1: return <Item1 />
|
||||
case 2: return <Item3 />
|
||||
}
|
||||
}
|
||||
|
||||
//切换图表2
|
||||
function SwitchChart2(index) {
|
||||
switch (index) {
|
||||
case 1: return <Item2 data={data2} />
|
||||
case 2: return <Item2 data={data3} />
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='LeftChart2AllBorder'>
|
||||
<div className='LeftChart2ItemitemBorder'>
|
||||
<img src={SwitchIcon(index)} alt="图片加载错误" className='LeftChart2ItemIcon' />
|
||||
<div className='LeftChart2ItemTitle'>{SwitchTitle(index)}</div>
|
||||
</div>
|
||||
<div className='LeftChart2Item1Row1'>
|
||||
{SwitchChart1(index)}
|
||||
</div>
|
||||
<div className='LeftChart2Item1Row2'>
|
||||
{SwitchChart2(index)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -1,48 +0,0 @@
|
||||
.LeftChart2AllBorder {
|
||||
width: 624px;
|
||||
height: 632px;
|
||||
background: url('../../assets/ItemBg2.png');
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.LeftChart2ItemitemBorder {
|
||||
margin-top: 24px;
|
||||
margin-left: 24px;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
vertical-align: middle;
|
||||
|
||||
.LeftChart2ItemIcon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.LeftChart2ItemTitle {
|
||||
font-size: 24px;
|
||||
color: #ffffff;
|
||||
margin-left: 8px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
.LeftChart2Item1Row1 {
|
||||
width: 95%;
|
||||
height: 271px;
|
||||
align-self: center;
|
||||
margin-top: -56px;
|
||||
|
||||
|
||||
}
|
||||
.LeftChart2Item1Row2 {
|
||||
width: 95%;
|
||||
height: 271px;
|
||||
align-self: center;
|
||||
margin-bottom:24px;
|
||||
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,4 @@
|
||||
.leftBar {
|
||||
// border: 2px solid red;
|
||||
width: 625px;
|
||||
height: 966px;
|
||||
margin-left: 40px;
|
||||
@ -7,19 +6,4 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
// .LeftChart1Border {
|
||||
// width: 100%;
|
||||
// height: 304px;
|
||||
// background: url('../../assets/ItemBg.png');
|
||||
// }
|
||||
|
||||
// .LeftChart2Border {
|
||||
// width: 624px;
|
||||
// height: 632px;
|
||||
// background: url('../../assets/ItemBg2.png');
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// //justify-content: space-between;
|
||||
// }
|
||||
}
|
||||
|
||||
@ -1,38 +0,0 @@
|
||||
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import './Chart1.less'
|
||||
|
||||
export default class Chart7 extends Component {
|
||||
|
||||
parseData() {
|
||||
const { data } = this.props
|
||||
const name = Object.keys(data)
|
||||
const Value = Object.values(data)
|
||||
return name.map((item, index) => (
|
||||
|
||||
<div className='buttonChart7FormBorder' key={index}>
|
||||
|
||||
<div className='buttonChart7FormTxt1Border'>
|
||||
<h2 className='buttonChart7FormTxt1'>{name[index]}:</h2>
|
||||
</div>
|
||||
<div className='buttonChart7FormTxt2Border'>
|
||||
<h2 className='buttonChart7FormTxt2'>{Value[index]}</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
))
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className='ButtonChart7itemDetailBorder'>
|
||||
{this.parseData()}
|
||||
</div >
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,44 +0,0 @@
|
||||
.ButtonChart7itemDetailBorder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top:-8px;
|
||||
|
||||
.buttonChart7FormBorder {
|
||||
background: url(../../../assets/ButtonChart7ItemBg.png);
|
||||
margin-top: 1.5%;
|
||||
width: 288px;
|
||||
height: 48px;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: left;
|
||||
.buttonChart7FormTxt2Border {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
.buttonChart7FormTxt2 {
|
||||
margin-left: 20%;
|
||||
margin-right: 5%;
|
||||
margin-top: 13px;
|
||||
text-align:left;
|
||||
font-size: 15px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
}
|
||||
.buttonChart7FormTxt1Border {
|
||||
width: 55%;
|
||||
height: 100%;
|
||||
|
||||
.buttonChart7FormTxt1 {
|
||||
margin-top: 13px;
|
||||
margin-left: 3%;
|
||||
text-align:right;
|
||||
font-size: 15px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,109 +0,0 @@
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import './Chart2.less'
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
|
||||
var data = [[320, 302, 301, 334, 390, 330, 320, 100], [120, 132, 101, 134, 90, 230, 210, 100], [220, 182, 191, 234, 290, 330, 310, 100], [150, 212, 201, 154, 190, 330, 410, 100], [320, 332, 301, 334, 290, 330, 320, 300], [320, 332, 301, 334, 290, 330, 320, 300]]
|
||||
|
||||
var name = ['烟气总量', '余氧总量', '氮氧化物排放浓度', '二氧化碳排放浓度', '颗粒物排放浓度', '烟气流速']
|
||||
|
||||
|
||||
var color = ["#2760ff", "#8167f6", "#5b9bff", "#99d66c", "#ffd160", "#ff8a40"]
|
||||
var fontColor = '#fff'
|
||||
var lineColor = 'rgba(33, 50, 89,0.8)'
|
||||
|
||||
function makeseries(data, name, color) {
|
||||
if (data) {
|
||||
let All = []
|
||||
for (let i in data) {
|
||||
All.push({
|
||||
name: name[i],
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barWidth: "20%",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: color[i],
|
||||
},
|
||||
},
|
||||
label: {
|
||||
|
||||
},
|
||||
data: data[i]
|
||||
})
|
||||
}
|
||||
return All;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
class Chart2 extends Component {
|
||||
|
||||
|
||||
getOption = () => ({
|
||||
|
||||
legend: {
|
||||
right: "0%",
|
||||
width: "70%",
|
||||
height: "14%",
|
||||
itemWidth: 17,
|
||||
itemHeight: 13.5,
|
||||
orient: "vertical",
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: "#F1F1F3",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: fontColor,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
},
|
||||
},
|
||||
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: fontColor,
|
||||
},
|
||||
axisLine: {
|
||||
show:true,
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
width: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
series: makeseries(data, name, color)
|
||||
})
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className='LeftChart2itemDetailBorder'>
|
||||
<ReactECharts option={this.getOption()} style={{ width: '100%', height: '100%' }} />
|
||||
</div >
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Chart2;
|
||||
@ -1,11 +0,0 @@
|
||||
.LeftChart2itemDetailBorder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top:-8px;
|
||||
|
||||
|
||||
}
|
||||
@ -1,120 +0,0 @@
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import './Chart3.less'
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
|
||||
|
||||
|
||||
var name = ['10HZ-15HZ', '15HZ-25HZ', '30HZ-35HZ', '40HZ-45HZ']
|
||||
|
||||
|
||||
var color = ["#2760ff", "#ffb70c", "#3dbdc2", "#e02094"]
|
||||
var fontColor = '#fff'
|
||||
var lineColor = 'rgba(33, 50, 89,0.8)'
|
||||
|
||||
function makeseries(data, name, color) {
|
||||
if (data) {
|
||||
let All = []
|
||||
for (let i in data) {
|
||||
All.push({
|
||||
name: name[i],
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
symbol: "circle",
|
||||
data: data[i],
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: color[i]
|
||||
},
|
||||
itemStyle: {
|
||||
|
||||
color: color[i],
|
||||
|
||||
},
|
||||
})
|
||||
}
|
||||
return All;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
class Chart3 extends Component {
|
||||
|
||||
|
||||
getOption = () => ({
|
||||
|
||||
title: {
|
||||
text: '风机运行频率',
|
||||
textStyle: {
|
||||
fontSize: 20,
|
||||
color: "#52FFF8"
|
||||
},
|
||||
},
|
||||
|
||||
legend: {
|
||||
right: "0%",
|
||||
width: "70%",
|
||||
height: "14%",
|
||||
itemWidth: 17,
|
||||
itemHeight: 13.5,
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: "#F1F1F3",
|
||||
},
|
||||
// itemStyle: {
|
||||
// color: "rgba(222, 9, 9, 1)"
|
||||
// },
|
||||
data: name
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%', containLabel: true
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['day1', 'day2', 'day3', 'day4', 'day5', 'day6', 'day7', 'day5', 'day6', 'day7', 'day6', 'day7', 'day5', 'day6', 'day7'],
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: fontColor,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: fontColor,
|
||||
},
|
||||
axisLine: {
|
||||
show:true,
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
},
|
||||
},
|
||||
},
|
||||
series: makeseries(this.props.data, name, color)
|
||||
})
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className='LeftChart3itemDetailBorder'>
|
||||
<ReactECharts option={this.getOption()} style={{ width: '100%', height: '100%' }} />
|
||||
</div >
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Chart3;
|
||||
@ -1,9 +0,0 @@
|
||||
.LeftChart3itemDetailBorder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top:-8px;
|
||||
}
|
||||
@ -1,126 +0,0 @@
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import './Chart4.less'
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
|
||||
|
||||
|
||||
var name = ['10HZ-15HZ', '15HZ-25HZ', '30HZ-35HZ', '40HZ-45HZ']
|
||||
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
var color = ["#2760ff", "#ffb70c", "#3dbdc2", "#e02094"]
|
||||
var fontColor = '#fff'
|
||||
var lineColor = 'rgba(33, 50, 89,0.8)'
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
class Chart3 extends Component {
|
||||
|
||||
|
||||
getOption = () => ({
|
||||
|
||||
title: {
|
||||
text: '发电量',
|
||||
top: "2%",
|
||||
textStyle: {
|
||||
fontSize: 20,
|
||||
color: "#52FFF8"
|
||||
},
|
||||
},
|
||||
|
||||
legend: {
|
||||
right: "0%",
|
||||
width: "70%",
|
||||
height: "14%",
|
||||
itemWidth: 17,
|
||||
itemHeight: 13.5,
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: "#F1F1F3",
|
||||
},
|
||||
// itemStyle: {
|
||||
// color: "rgba(222, 9, 9, 1)"
|
||||
// },
|
||||
data: name
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '0%',
|
||||
top:'30%',
|
||||
containLabel: true,
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['day1', 'day2', 'day3', 'day4', 'day5', 'day6', 'day7', 'day5', 'day6', 'day7', 'day6', 'day7', 'day5', 'day6', 'day7'],
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: fontColor,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: fontColor,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
},
|
||||
},
|
||||
},
|
||||
series: {
|
||||
|
||||
name:'发电量',
|
||||
type: 'line',
|
||||
showSymbol: true,
|
||||
symbol: "circle",
|
||||
symbolSize:8,
|
||||
symbolBorder:"rgba(17, 36, 246,0.1)",
|
||||
data: [200,320,121,125,585,213,521,326,542,258,632,145,258,632,145],
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color:"rgba(246, 23, 106,0.9)",
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(246, 23, 106,0.3)' },
|
||||
{ offset: 0.5, color: 'rgba(246, 23, 106,0.2)' },
|
||||
{ offset: 1, color: 'rgba(246, 23, 106,0.1)' }
|
||||
]),
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: '#F6176A',
|
||||
color: "rgba(4, 20, 36,0.8)",
|
||||
},
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className='LeftChart4itemDetailBorder'>
|
||||
<ReactECharts option={this.getOption()} style={{ width: '100%', height: '80%' }} />
|
||||
</div >
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Chart3;
|
||||
@ -1,9 +0,0 @@
|
||||
.LeftChart4itemDetailBorder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 15px;
|
||||
}
|
||||
@ -1,28 +0,0 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
|
||||
import Item from './substitutionCharts/Chart1/index.jsx'
|
||||
// import Icon1 from '../../assets/Icon/rightChart1ICon.png'
|
||||
|
||||
import "./Chart1.less"
|
||||
|
||||
export default function Chart1() {
|
||||
return (
|
||||
<div className='rightChart1Border'>
|
||||
|
||||
<div className='RightChart1ItemitemBorder'>
|
||||
{/* <img src={Icon1} alt="图片加载错误" className='RightChart1ItemIcon' /> */}
|
||||
<div className='RightChart1Title'>储能电站</div>
|
||||
</div>
|
||||
<div className='RightChart1ItemBorder'>
|
||||
<Item index={1} data={345} name={'日充电量'} unit={'kwh'} />
|
||||
<Item index={2} data={345} name={'月充电量'} unit={'kwh'} />
|
||||
<Item index={3} data={2} name={'日收益'} unit={'万元'} />
|
||||
<Item index={1} data={215} name={'日放电量'} unit={'kwh'} />
|
||||
<Item index={2} data={345} name={'月放电量'} unit={'kwh'} />
|
||||
<Item index={3} data={12} name={'月收益'} unit={'万元'} />
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -1,45 +0,0 @@
|
||||
.rightChart1Border {
|
||||
width: 625px;
|
||||
height: 306px;
|
||||
background: url('../../assets/ItemBg.png');
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.RightChart1ItemitemBorder {
|
||||
margin-top: 24px;
|
||||
margin-left: 24px;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
vertical-align: middle;
|
||||
|
||||
.RightChart1ItemIcon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.RightChart1Title {
|
||||
font-size: 24px;
|
||||
color: #ffffff;
|
||||
margin-left: 8px;
|
||||
margin-top: -5px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.RightChart1ItemBorder {
|
||||
width: 579px;
|
||||
height: 230px;
|
||||
margin-left: 16px;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content:space-around;
|
||||
flex-wrap: wrap;
|
||||
|
||||
}
|
||||
}
|
||||
@ -1,109 +0,0 @@
|
||||
import React from 'react'
|
||||
import { useState, useEffect } from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { motion } from 'framer-motion'
|
||||
|
||||
// import Icon from '../../assets/Icon/rightChart2ICon.png'
|
||||
|
||||
import Item from './substitutionCharts/Chart2.jsx'
|
||||
|
||||
import './Chart2.less'
|
||||
|
||||
const Daytitle = "日电量统计";
|
||||
const DayLendged = ["日储能", "日放能"];
|
||||
const Dayxdata = ["7:00", "8:00", "9:00", "10:00", "11:00", "12:00", "13:00"]
|
||||
const Daydata = [[70, 45, 10, 28, 18, 28, 46], [80, 55, 70, 18, 48, 58, 76]]
|
||||
|
||||
const Monthtitle = "月电量统计";
|
||||
const MonthLendged = ["月储能", "月放能"];
|
||||
const Monthxdata = ["一月", "二月", "三月", "四月", "五月", "六月", "七月"]
|
||||
const Monthdata = [[70, 45, 10, 28, 18, 28, 46], [80, 55, 70, 18, 48, 58, 76]]
|
||||
|
||||
const Yeartitle = "收益统计";
|
||||
const YearLendged = ["日收益", "月收益"];
|
||||
const Yearxdata = ["2016", "2017", "2018", "2019", "2020", "2021", "2022"]
|
||||
const Yeardata = [[70, 45, 10, 28, 18, 28, 46], [80, 55, 70, 18, 48, 58, 76]]
|
||||
|
||||
|
||||
const Gap = styled.div`
|
||||
width:1px;
|
||||
height:80%;
|
||||
margin-top:20px;
|
||||
|
||||
transform: translatey(-17px);
|
||||
background-color:#010D18;
|
||||
`
|
||||
|
||||
const Gap2 = styled(Gap)`
|
||||
transform: translateX(0px);
|
||||
transform: translatey(-17px);
|
||||
`
|
||||
|
||||
// rgba(2,69,126,1)
|
||||
export default function Chart2() {
|
||||
|
||||
const [index, setIndex] = useState(1)
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => { SwitchIndex() }, 10000);
|
||||
return () => clearInterval(timer);
|
||||
}, [])
|
||||
|
||||
let num = 1;
|
||||
|
||||
|
||||
function SwitchIndex() {
|
||||
num = num + 1
|
||||
if (num < 4) {
|
||||
setIndex(num)
|
||||
}
|
||||
else {
|
||||
num = 1
|
||||
setIndex(num)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function SwitchPage(index) {
|
||||
|
||||
switch (index) {
|
||||
case 1: return <Item title={Daytitle} xdata={Dayxdata} data={Daydata} lendge={DayLendged} />
|
||||
case 2: return <Item title={Monthtitle} xdata={Monthxdata} data={Monthdata} lendge={MonthLendged} />
|
||||
case 3: return <Item title={Yeartitle} xdata={Yearxdata} data={Yeardata} lendge={YearLendged} />
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='rightchart2AllBorder'>
|
||||
<div className='rightchart2ItemitemBorder'>
|
||||
{/* <img src={Icon} alt="图片加载错误" className='rightchart2ItemIcon' /> */}
|
||||
<div className='rightchart2ItemTitle'>光伏发电统计</div>
|
||||
</div>
|
||||
< div className='rightchart2Switchbox'>
|
||||
<div className='rightchart2SlelectBox' style={{ backgroundColor: `rgba(2,69,126,${index == 1 ? 1 : 0})` }}><p>日</p></ div>
|
||||
<Gap style={{opacity:index==3?'100%':'0%',}}></Gap>
|
||||
<div className='rightchart2SlelectBox' style={{ backgroundColor: `rgba(2,69,126,${index == 2 ? 1 : 0})` }}><p>月</p> </ div>
|
||||
<Gap2 style={{opacity:index==1?'100%':'0%',}}></Gap2>
|
||||
<div className='rightchart2SlelectBox' style={{ backgroundColor: `rgba(2,69,126,${index == 3 ? 1 : 0})` }}><p>年</p></ div>
|
||||
</ div>
|
||||
<motion.div className='rightchart2ItemBorder'
|
||||
// key={index}
|
||||
// initial={{ opacity: 0, y: 5 }}
|
||||
// animate={{ opacity: 1, y: 0 }}
|
||||
// transition={{ ease: "easeIn", duration: 0.5 }}
|
||||
>
|
||||
|
||||
{SwitchPage(index)}
|
||||
</motion.div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
@ -1,71 +0,0 @@
|
||||
.rightchart2AllBorder {
|
||||
width: 625px;
|
||||
height: 306px;
|
||||
background: url('../../assets/ItemBg.png');
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin-top: 24px;
|
||||
|
||||
.rightchart2ItemitemBorder {
|
||||
margin-top: 24px;
|
||||
margin-left: 24px;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
|
||||
|
||||
.rightchart2ItemIcon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.rightchart2ItemTitle {
|
||||
font-size: 24px;
|
||||
color: #ffffff;
|
||||
margin-left: 8px;
|
||||
margin-top: -5px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.rightchart2Switchbox {
|
||||
width: 150px;
|
||||
height: 32px;
|
||||
background-color: #03233C;
|
||||
align-self: flex-end;
|
||||
margin-right: 15px;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
.rightchart2SlelectBox {
|
||||
width: 33%;
|
||||
height: 100%;
|
||||
|
||||
border-radius: 5px;
|
||||
|
||||
}
|
||||
|
||||
.rightchart2SlelectBox p {
|
||||
margin: 3 auto;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
cursor : pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.rightchart2ItemBorder {
|
||||
width: 95%;
|
||||
height: 300px;
|
||||
margin-left: 16px;
|
||||
margin-top: -15px;
|
||||
|
||||
}
|
||||
}
|
||||
@ -1,100 +0,0 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { motion } from "framer-motion"
|
||||
import styled from 'styled-components'
|
||||
|
||||
|
||||
import Item from './substitutionCharts/Chart3.jsx'
|
||||
// import Icon from '../../assets/Icon/rightChart3ICon.png'
|
||||
import './Chart3.less'
|
||||
|
||||
const Dayxdata = ["7:00", "8:00", "9:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00"]
|
||||
const Daydata = [70, 45, 10, 28, 18, 28, 46, 18, 28, 46, 20]
|
||||
|
||||
const Monthxdata = ["一月", "二月", "三月", "四月", "五月", "六月", "七月"]
|
||||
const Monthdata = [70, 45, 10, 28, 18, 28, 46]
|
||||
|
||||
const Yearxdata = ["2016", "2017", "2018", "2019", "2020", "2021", "2022"]
|
||||
const Yeardata = [70, 45, 10, 28, 18, 28, 46]
|
||||
|
||||
|
||||
|
||||
|
||||
const Gap = styled.div`
|
||||
width:1px;
|
||||
height:80%;
|
||||
margin-top:20px
|
||||
transform: translateX(22px);
|
||||
transform: translatey(3px);
|
||||
background-color:#010D18;
|
||||
`
|
||||
|
||||
const Gap2 = styled(Gap)`
|
||||
transform: translateX(0px);
|
||||
transform: translatey(3px);
|
||||
`
|
||||
|
||||
|
||||
|
||||
export default function Chart3() {
|
||||
|
||||
const [index, setIndex] = useState(1)
|
||||
|
||||
useEffect(() => {
|
||||
setInterval(() => { SwitchIndex() }, 10000);
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
let num = 1;
|
||||
|
||||
|
||||
function SwitchIndex() {
|
||||
num = num + 1
|
||||
if (num < 4) {
|
||||
setIndex(num)
|
||||
}
|
||||
else {
|
||||
num = 1
|
||||
setIndex(num)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function SwitchPage(index) {
|
||||
|
||||
switch (index) {
|
||||
case 1: return <Item xdata={Dayxdata} data={Daydata} />
|
||||
case 2: return <Item xdata={Monthxdata} data={Monthdata} />
|
||||
case 3: return <Item xdata={Yearxdata} data={Yeardata} />
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className='RightChart3AllBorder'>
|
||||
|
||||
<div className='RightChart3ItemitemBorder'>
|
||||
{/* <img src={Icon} alt="图片加载错误" className='RightChart3ItemIcon' /> */}
|
||||
<div className='RightChart3ItemTitle'>储能电站</div>
|
||||
</div>
|
||||
< div className='rightchart3Switchbox'>
|
||||
<div className='rightchart3SlelectBox' style={{ backgroundColor: `rgba(2,69,126,${index == 1 ? 1 : 0})` }}><p>日</p></ div>
|
||||
<Gap style={{ opacity: index == 3 ? '100%' : '0%', }}></Gap>
|
||||
<div className='rightchart3SlelectBox' style={{ backgroundColor: `rgba(2,69,126,${index == 2 ? 1 : 0})` }}><p>月</p> </ div>
|
||||
<Gap2 style={{ opacity: index == 1 ? '100%' : '0%', }}></Gap2>
|
||||
<div className='rightchart3SlelectBox' style={{ backgroundColor: `rgba(2,69,126,${index == 3 ? 1 : 0})` }}><p>年</p></ div>
|
||||
</ div>
|
||||
<motion.div className='RightChart3ItemBorder'
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 5 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ ease: "easeIn", duration: 0.5 }}
|
||||
>
|
||||
{SwitchPage(index)}
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
@ -1,70 +0,0 @@
|
||||
.RightChart3AllBorder {
|
||||
width: 625px;
|
||||
height: 306px;
|
||||
background: url('../../assets/ItemBg.png');
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.RightChart3ItemitemBorder {
|
||||
margin-top: 24px;
|
||||
margin-left: 24px;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
vertical-align: middle;
|
||||
|
||||
.RightChart3ItemIcon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-top: 3px;
|
||||
|
||||
}
|
||||
|
||||
.RightChart3ItemTitle {
|
||||
font-size: 24px;
|
||||
color: #ffffff;
|
||||
margin-left: 8px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
.rightchart3Switchbox {
|
||||
width: 150px;
|
||||
height: 32px;
|
||||
background-color: #03233C;
|
||||
align-self: flex-end;
|
||||
|
||||
margin-right: 15px;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
.rightchart3SlelectBox {
|
||||
width: 33%;
|
||||
height: 100%;
|
||||
|
||||
border-radius: 5px;
|
||||
|
||||
}
|
||||
|
||||
.rightchart3SlelectBox p {
|
||||
margin: 3 auto;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
cursor : pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.RightChart3ItemBorder {
|
||||
width: 95%;
|
||||
height: 227px;
|
||||
margin-left: 16px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
}
|
||||
}
|
||||
@ -1,126 +0,0 @@
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import './Chart1.less'
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
|
||||
class Chart1 extends Component {
|
||||
|
||||
switchColor = (index) => {
|
||||
|
||||
switch (index) {
|
||||
case 1: return '#52FFF8';
|
||||
case 2: return '#52FFF8';
|
||||
case 3: return '#52FFF8';
|
||||
}
|
||||
}
|
||||
|
||||
getOption = () => (
|
||||
{
|
||||
title: [{
|
||||
text: this.props.data,
|
||||
x: "center",
|
||||
y: "28%",
|
||||
textStyle: {
|
||||
fontWeight: "normal",
|
||||
color: this.props.color,
|
||||
fontSize: 24,
|
||||
},
|
||||
|
||||
},
|
||||
{
|
||||
text: this.props.unit,
|
||||
x: "center",
|
||||
y: "55%",
|
||||
textStyle: {
|
||||
fontWeight: "normal",
|
||||
color: this.props.color,
|
||||
fontSize: 15,
|
||||
},
|
||||
|
||||
},
|
||||
],
|
||||
|
||||
series: [
|
||||
{
|
||||
name: "Line 1",
|
||||
type: "pie",
|
||||
clockWise: false,
|
||||
radius: [40, 46],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
shadowBlur: 5,
|
||||
shadowColor:this.props.color,
|
||||
},
|
||||
},
|
||||
hoverAnimation: false,
|
||||
data: [
|
||||
{
|
||||
value: 25,
|
||||
name: "invisible",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(255,255,255,0.5)" //未完成的颜色
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 75,
|
||||
name: "01",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: this.props.color //完成的颜色
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Line 2",
|
||||
type: "pie",
|
||||
animation: false,
|
||||
clockWise: false,
|
||||
radius: [33, 36],
|
||||
itemStyle: {
|
||||
|
||||
normal: {
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
color: this.props.color, //内圈颜色
|
||||
opacity: 0.2,
|
||||
|
||||
}
|
||||
},
|
||||
hoverAnimation: false,
|
||||
data: [
|
||||
{
|
||||
value: 100,
|
||||
name: "02",
|
||||
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
name: "invisible",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className='RightChart3itemDetailBorder'>
|
||||
<ReactECharts option={this.getOption()} style={{ width: '100%', height: '100%' }} />
|
||||
</div >
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Chart1;
|
||||
@ -1,5 +0,0 @@
|
||||
.RightChart3itemDetailBorder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow:visible;
|
||||
}
|
||||
@ -1,95 +0,0 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import styled from 'styled-components';
|
||||
// import RightChart1Icon2 from '../../../../assets/Icon/RightChart1Icon2.png'
|
||||
|
||||
import Chart1 from './Chart1.jsx';
|
||||
|
||||
import './index.less';
|
||||
|
||||
//#52FFF8
|
||||
|
||||
function Index(props) {
|
||||
const switchColor = (index) => {
|
||||
switch (index) {
|
||||
case 1:
|
||||
return '#52FFF8';
|
||||
case 2:
|
||||
return '#49B2FF';
|
||||
case 3:
|
||||
return '#FFB94D';
|
||||
default:
|
||||
return '#fff';
|
||||
}
|
||||
};
|
||||
|
||||
let Border = styled.div`
|
||||
width: 74px;
|
||||
height: 24px;
|
||||
margin-top: 50px;
|
||||
overflow: hidden;
|
||||
`;
|
||||
|
||||
// background: url(${RightChart1Icon2});
|
||||
let Ion2 = styled.div`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
background-repeat: no-repeat;
|
||||
transform: translatex(-82px);
|
||||
filter: drop-shadow(82px 1px ${switchColor(props.index)});
|
||||
`;
|
||||
|
||||
//最大值75
|
||||
let Stuff = styled.div`
|
||||
float: left;
|
||||
margin-top: -17.5px;
|
||||
transform: translatex(3px);
|
||||
width: ${58}%;
|
||||
height: 12px;
|
||||
background: linear-gradient(to right, #051226, ${switchColor(props.index)});
|
||||
`;
|
||||
|
||||
//中间三条gap的位置
|
||||
|
||||
let Gap1 = styled.div`
|
||||
// float:left;
|
||||
margin-top: 6px;
|
||||
transform: translatex(15px);
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 13px;
|
||||
background-color: #051226;
|
||||
`;
|
||||
|
||||
const Gap2 = styled(Gap1)`
|
||||
transform: translatex(29px);
|
||||
`;
|
||||
|
||||
const Gap3 = styled(Gap1)`
|
||||
transform: translatex(45px);
|
||||
`;
|
||||
|
||||
return (
|
||||
<div className="RightChart1ItemBorderRow">
|
||||
<div className="RightChart1ItemB1">
|
||||
<Chart1
|
||||
color={switchColor(props.index)}
|
||||
data={props.data}
|
||||
unit={props.unit}
|
||||
/>
|
||||
</div>
|
||||
<div className="RightChart1ItemB2">
|
||||
<h2 className="RightChart1ItemB2TXT">{props.name}</h2>
|
||||
<Border>
|
||||
<Ion2></Ion2>
|
||||
<Stuff></Stuff>
|
||||
<Gap1></Gap1>
|
||||
<Gap2></Gap2>
|
||||
<Gap3></Gap3>
|
||||
</Border>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Index;
|
||||
@ -1,33 +0,0 @@
|
||||
.RightChart1ItemBorderRow {
|
||||
width: 178px;
|
||||
height: 96px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
|
||||
.RightChart1ItemB1 {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.RightChart1ItemB2 {
|
||||
width: 76px;
|
||||
height: 76px;
|
||||
margin-top: 10px;
|
||||
margin-left: 8px;
|
||||
|
||||
|
||||
|
||||
.RightChart1ItemB2TXT {
|
||||
font-size:16px;
|
||||
font-weight: 400px;
|
||||
float: left;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
margin-top: 15px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@ -1,133 +0,0 @@
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import './Chart2.less'
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
var fontColor = '#fff'
|
||||
var lineColor = 'rgba(33, 50, 89,0.8)'
|
||||
|
||||
class Chart2 extends Component {
|
||||
|
||||
getOption = () => ({
|
||||
|
||||
grid: {
|
||||
left: "2%",
|
||||
right: "4%",
|
||||
bottom: "5%",
|
||||
top: "15%",
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {
|
||||
data: this.props.lendge,
|
||||
left: "2%",
|
||||
top: 0,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
itemWidth: 12,
|
||||
itemHeight: 10,
|
||||
// itemGap: 35
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data:this.props.xdata,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
width: 0.5,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: fontColor,
|
||||
textStyle: {
|
||||
fontFamily: "Microsoft YaHei",
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
max:(value) => { // 百位起最大值向上取整
|
||||
return Math.ceil(value.max / 100) * 100;
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: fontColor,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
width: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: this.props.lendge[0],
|
||||
type: "bar",
|
||||
barWidth: "15%",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#92D675',
|
||||
barBorderRadius: 2,
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
valueAnimation: true,
|
||||
color: "#fff"
|
||||
},
|
||||
data: this.props.data[0],
|
||||
},
|
||||
{
|
||||
name:this.props.lendge[1],
|
||||
type: "bar",
|
||||
barWidth: "15%",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(92,183,255,1)' },
|
||||
{ offset: 0.5, color: 'rgba(92,183,255,1)' },
|
||||
{ offset: 1, color: 'rgba(90,107,255,1)' }
|
||||
]),
|
||||
|
||||
barBorderRadius: 3,
|
||||
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
valueAnimation: true,
|
||||
color: "#fff"
|
||||
},
|
||||
data: this.props.data[1],
|
||||
},],
|
||||
|
||||
})
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className='RightChart2itemDetailBorder'>
|
||||
<ReactECharts option={this.getOption()} style={{ width: '100%', height: '100%' }} />
|
||||
</div >
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Chart2;
|
||||
@ -1,5 +0,0 @@
|
||||
.RightChart2itemDetailBorder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
@ -1,106 +0,0 @@
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import './Chart3.less'
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
|
||||
//颜色渐变必须要
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
var fontColor = '#fff'
|
||||
var lineColor = 'rgba(33, 50, 89,0.8)'
|
||||
|
||||
class Chart3 extends Component {
|
||||
|
||||
getOption = () => ({
|
||||
grid: {
|
||||
left: "2%",
|
||||
right: "4%",
|
||||
bottom: "5%",
|
||||
top: "8%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: this.props.xdata,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
width: 0.5,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: fontColor,
|
||||
textStyle: {
|
||||
fontFamily: "Microsoft YaHei",
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
scale:true,
|
||||
max:(value) => { // 百位起最大值向上取整
|
||||
return Math.ceil(value.max / 100) * 100;
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: fontColor,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: lineColor,
|
||||
width: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "M1",
|
||||
type: "bar",
|
||||
barWidth: "15%",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(92,183,255,1)' },
|
||||
{ offset: 0.5, color: 'rgba(92,183,255,1)' },
|
||||
{ offset: 1, color: 'rgba(90,107,255,1)' }
|
||||
]),
|
||||
barBorderRadius: 3,
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
valueAnimation: true,
|
||||
color:"#fff"
|
||||
},
|
||||
data: this.props.data,
|
||||
},
|
||||
|
||||
],
|
||||
|
||||
})
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className='RightChart3itemDetailBorder'>
|
||||
|
||||
<ReactECharts option={this.getOption()} style={{ width: '100%', height: '100%' }} />
|
||||
|
||||
</div >
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Chart3;
|
||||
@ -1,5 +0,0 @@
|
||||
.RightChart3itemDetailBorder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user