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