Browse Source

'大屏-养护-道路养护周期统计UI'

release_0.0.1
‘lijianhao’ 2 years ago
parent
commit
6bbffa1134
  1. 173
      web/client/src/sections/quanju/containers/footer/conserve/left/left-top.js

173
web/client/src/sections/quanju/containers/footer/conserve/left/left-top.js

@ -1,14 +1,175 @@
import React from 'react'
import React, { useEffect, useRef } from 'react';
import Module from '../../../public/module'
import * as echarts from 'echarts';
const LeftTop = () => {
const seasonChartRef = useRef(null);
const frequentlyChartRef = useRef(null);
useEffect(() => {
let chartInstance = echarts.init(seasonChartRef.current);
const seasonOption = {
title: [
{
text: "季节性",
x: "center",
top: "55%",
textStyle: {
color: "#E9F7FF",
fontSize: 14,
},
},
{
text: "2333",
x: "center",
y: "35%",
textStyle: {
fontSize: "30",
color: "#FFFFFF",
fontFamily: "YouSheBiaoTiHei",
},
},
],
polar: {
radius: ["65%", "73%"],
center: ["50%", "50%"],
},
angleAxis: {
max: 100,
show: false,
},
radiusAxis: {
type: "category",
show: true,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
series: [
{
name: "",
type: "bar",
roundCap: true,
barWidth: 30,
showBackground: true,
data: [40],
coordinateSystem: "polar",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "#AAC8FF",
},
{
offset: 1,
color: "#0041BB",
},
]),
},
},
},
],
};
chartInstance.setOption(seasonOption);
}, [])
useEffect(() => {
let chartInstance = echarts.init(frequentlyChartRef.current);
const frequentlyOption = {
title: [
{
text: "经常性",
x: "center",
top: "55%",
textStyle: {
color: "#E9F7FF",
fontSize: 14,
},
},
{
text: "2333",
x: "center",
y: "35%",
textStyle: {
fontSize: "30",
color: "#FFFFFF",
fontFamily: "YouSheBiaoTiHei",
},
},
],
polar: {
radius: ["65%", "73%"],
center: ["50%", "50%"],
},
angleAxis: {
max: 100,
show: false,
},
radiusAxis: {
type: "category",
show: true,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
series: [
{
name: "",
type: "bar",
roundCap: true,
barWidth: 30,
showBackground: true,
backgroundStyle: {
color: "rgba(66, 66, 66, .3)",
},
data: [40],
coordinateSystem: "polar",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: "#C5EFFF",
},
{
offset: 1,
color: "#07B9FE",
},
]),
},
},
},
],
};
chartInstance.setOption(frequentlyOption);
}, [])
const style = { height: "30%", marginTop: "5%" }
return (
<>
<Module style={style} title={"道路养护周期统计"}>
</Module>
</>
<>
<Module style={style} title={"道路养护周期统计"}>
<div style={{ width: '100%', display: 'flex' }}>
<div ref={seasonChartRef} style={{ height: "23vh", width: "45%" }}></div>
<div ref={frequentlyChartRef} style={{ height: "23vh", width: "45%" }}></div>
</div>
</Module>
</>
)
}
export default LeftTop
Loading…
Cancel
Save