From 6bbffa1134bc493270a9f53dcf3a873405406b0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=98lijianhao=E2=80=99?=
Date: Fri, 22 Jul 2022 13:41:51 +0800
Subject: [PATCH] =?UTF-8?q?'=E5=A4=A7=E5=B1=8F-=E5=85=BB=E6=8A=A4-?=
=?UTF-8?q?=E9=81=93=E8=B7=AF=E5=85=BB=E6=8A=A4=E5=91=A8=E6=9C=9F=E7=BB=9F?=
=?UTF-8?q?=E8=AE=A1UI'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../footer/conserve/left/left-top.js | 173 +++++++++++++++++-
1 file changed, 167 insertions(+), 6 deletions(-)
diff --git a/web/client/src/sections/quanju/containers/footer/conserve/left/left-top.js b/web/client/src/sections/quanju/containers/footer/conserve/left/left-top.js
index 909f6e1b..b16acf6b 100644
--- a/web/client/src/sections/quanju/containers/footer/conserve/left/left-top.js
+++ b/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 (
- <>
-
-
-
- >
+ <>
+
+
+
+
+ >
)
}
export default LeftTop
\ No newline at end of file