+
-
+
)
}
diff --git a/web/client/src/sections/quanju/containers/footer/conserve/left/left-bottom.js b/web/client/src/sections/quanju/containers/footer/conserve/left/left-bottom.js
index 51ea4ef7..82097322 100644
--- a/web/client/src/sections/quanju/containers/footer/conserve/left/left-bottom.js
+++ b/web/client/src/sections/quanju/containers/footer/conserve/left/left-bottom.js
@@ -1,14 +1,39 @@
import React from 'react'
import Module from '../../../public/module'
+import PieChart from '../chart/pie-chart';
+let data = [
+ { value: 435, name: "县道" },
+ { value: 679, name: "乡道" },
+ { value: 848, name: "村道" },
+]
+let colorList = [
+ "rgba(7,185,254,1)",
+ "rgba(28,96,254,1)",
+ "rgba(4,251,240,1)",
+]
+let underColorList = [
+ "rgba(7,185,254,0.5)",
+ "rgba(28,96,254,0.5)",
+ "rgba(4,251,240,0.5)",
+]
const LeftBottom = () => {
const style = { height: "31%", marginTop: "3%" }
return (
- <>
-
-
-
- >
+ <>
+
+ {/* */}
+
+
+ >
)
}
export default LeftBottom
\ No newline at end of file
diff --git a/web/client/src/sections/quanju/containers/footer/conserve/left/left-center.js b/web/client/src/sections/quanju/containers/footer/conserve/left/left-center.js
index 42c7cd48..d2cd5330 100644
--- a/web/client/src/sections/quanju/containers/footer/conserve/left/left-center.js
+++ b/web/client/src/sections/quanju/containers/footer/conserve/left/left-center.js
@@ -1,30 +1,228 @@
import { Col, Row } from 'antd'
import React from 'react'
-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
import Module from '../../../public/module'
+import * as echarts from 'echarts';
const LeftCenter = () => {
- const style = { height: "31%", marginTop: "3%" }
+ const style = { height: "31%", marginTop: "3%" }
+ const chartRef = useRef(null);
+ useEffect(() => {
+ let chartInstance = echarts.init(chartRef.current);
+ let colorArray = [
+ {
+ top: "#07B9FE",
+ bottom: "#10274B",
+ },
+ {
+ top: "#1978E5",
+ bottom: " #10274B",
+ },
+ {
+ top: "#1978E5",
+ bottom: "#10274B",
+ },
+ ];
+ const option = {
+ tooltip: {
+ show: true,
+ trigger: "axis",
+ axisPointer: {
+ type: "none",
+ },
+ },
+ grid: {
+ left: "5%",
+ top: "12%",
+ right: "5%",
+ bottom: "8%",
+ width:'92%',
+ containLabel: true,
+ },
- useEffect(() => {
+ xAxis: {
+ type: "value",
+ show: true,
+ position: "bottom",
+ axisTick: {
+ show: true,
+ lineStyle: {
+ color: "rgba(176,215,255,0.25)",
+ // type: "dashed",
+ },
+ },
+ axisLine: {
+ show: false,
+ lineStyle: {
+ color: "rgba(216,240,255,0.8000)",
+ },
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: "rgba(176,215,255,0.25)",
+ type: "dashed",
+ },
+ },
+ },
+ yAxis: [
+ {
+ type: "category",
+ axisTick: {
+ show: false,
+ alignWithLabel: false,
+ length: 5,
+ },
+ splitLine: {
+ //网格线
+ show: false,
+ },
+ inverse: true, //排序
+ axisLine: {
+ show: false,
+ lineStyle: {
+ color: "rgba(176,215,255,0.8)",
+ },
+ },
+ zlevel: 100,
+ data: ["县级可绿化里程", "乡级可绿化里程", "村级可绿化里程"],
+ },
+ {
+ type: "category",
+ axisTick: {
+ show: false,
+ alignWithLabel: false,
+ length: 5,
+ },
+ splitLine: {
+ //网格线
+ show: false,
+ },
+ axisLabel: {
+ show: true,
+ backgroundColor: {
+ image: 'assets/images/quanju/kelvhua_bdbg.png',
+ },
+ width: 70,
+ height: 22,
+ color: '#D8F0FF',
+ margin:50,
+ verticalAlign: 'middle',
+ align: 'center',
+ textShadowColor:'#1AD0FF',
+ textShadowBlur:6,
+ fontSize:14
+ // formatter:(f) =>{console.log('f:',f);}
+ },
+ inverse: true, //排序
+ axisLine: {
+ show: false,
+ lineStyle: {
+ color: "rgba(176,215,255,0.8)",
+ },
- }, [])
+ },
+ data: [60, 132, 89],
+ },
+ ],
+ series: [
+ {
+ name: '背景',
+ type: "bar",
+ barWidth: 3,
+ barGap: "100%",
+ barCategoryGap: "50%",
+ color: "#15356E",
+ data: [150, 150, 150, 150],
+ tooltip: {
+ show: false,
+ },
+ },
+ {
+ name: "",
+ type: "bar",
+ zlevel: 1,
+ barWidth: 3,
+ barGap: "-100%",
+ barCategoryGap: "50%",
+ data: [60, 132, 89],
+ label: {
+ show: true,
+ position: 'right', // 位置
+ fontSize: 12,
+ lineHeight: 13,
+ distance: -2,
+ verticalAlign: "middle",
+ formatter: [
+ '{a| }',
+ ].join(''), // 这里是数据展示的时候显示的数据
+ rich: {
+ a: {
+ backgroundColor: {
+ image: 'assets/images/quanju/circle2.png'
+ },
+ width: 15,
+ height: 15,
+ align: 'left',
+ verticalAlign: "center",
+ }
+ }
+ },
+ itemStyle: {
+ normal: {
+ show: true,
+ color: function (params) {
+ return {
+ type: "linear",
+ colorStops: [
+ {
+ offset: 0,
+ color: colorArray[params.dataIndex].bottom,
+ },
+ {
+ offset: 1,
+ color: colorArray[params.dataIndex].top,
+ },
- return (
- <>
-
-
-
-
- 可绿化里程总数
-
- 1234.123
-
- 图表
+ ],
+ // globalCoord: false,
+ };
+ },
+ barBorderRadius: 70,
+ borderWidth: 0,
+ borderColor: "#333",
+ },
+ },
+ emphasis: {
+ disabled: true //禁止移入柱子改变颜色
+ }
+ },
+ ],
+ };
+ chartInstance.setOption(option);
+ window.addEventListener('resize',() =>{
+ if(chartInstance) {
+ chartInstance.resize()
+ }
+ })
+ }, []);
-
- >
- )
+ return (
+ <>
+
+
+
+
+
+ 可绿化里程总数
+
+ 1234
+
+
+
+
+ >
+ )
}
export default LeftCenter
\ No newline at end of file
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 6cf714ea..3ab9489d 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,6 +1,7 @@
import React, { useEffect, useRef } from 'react';
import Module from '../../../public/module'
import * as echarts from 'echarts';
+import { Badge } from 'antd';
const LeftTop = () => {
@@ -11,6 +12,9 @@ const LeftTop = () => {
useEffect(() => {
let chartInstance = echarts.init(seasonChartRef.current);
const seasonOption = {
+ tooltip:{
+ show:true
+ },
title: [
{
text: "季节性",
@@ -36,6 +40,13 @@ const LeftTop = () => {
radius: ["60%", "68%"],
center: ["50%", "50%"],
},
+ grid: {
+ left: "5%",
+ top: "12%",
+ right: "1%",
+ bottom: "8%",
+ containLabel: true,
+ },
angleAxis: {
max: 100,
show: false,
@@ -60,7 +71,7 @@ const LeftTop = () => {
roundCap: true,
barWidth: 30,
showBackground: true,
- data: [40],
+ data: [{value:40,name:'季节性'}],
coordinateSystem: "polar",
itemStyle: {
normal: {
@@ -80,11 +91,21 @@ const LeftTop = () => {
],
};
chartInstance.setOption(seasonOption);
+ window.addEventListener('resize',() =>{
+ if(chartInstance) {
+ chartInstance.resize()
+ }
+ })
}, [])
useEffect(() => {
let chartInstance = echarts.init(frequentlyChartRef.current);
+
const frequentlyOption = {
+ tooltip:{
+ show:true,
+ trigger: "item",
+ },
title: [
{
text: "经常性",
@@ -110,6 +131,14 @@ const LeftTop = () => {
radius: ["60%", "68%"],
center: ["50%", "50%"],
},
+ grid: {
+ left: "10%",
+ top: "12%",
+ right: "1%",
+ bottom: "8%",
+ width: '70%',
+ containLabel: true,
+ },
angleAxis: {
max: 100,
show: false,
@@ -134,10 +163,7 @@ const LeftTop = () => {
roundCap: true,
barWidth: 30,
showBackground: true,
- backgroundStyle: {
- color: "rgba(66, 66, 66, .3)",
- },
- data: [40],
+ data:[{value:40,name:'经常性'}],
coordinateSystem: "polar",
itemStyle: {
normal: {
@@ -154,20 +180,42 @@ const LeftTop = () => {
},
},
},
+
+
],
};
chartInstance.setOption(frequentlyOption);
-
+ window.addEventListener('resize', () => {
+ if (chartInstance) {
+ chartInstance.resize()
+ }
+ })
}, [])
const style = { height: "31%", marginTop: "3%" }
return (
<>
-
+
+
+
+
+
>
)
diff --git a/web/client/src/sections/quanju/containers/footer/conserve/right/right-bottom.js b/web/client/src/sections/quanju/containers/footer/conserve/right/right-bottom.js
index 9665fb01..744165df 100644
--- a/web/client/src/sections/quanju/containers/footer/conserve/right/right-bottom.js
+++ b/web/client/src/sections/quanju/containers/footer/conserve/right/right-bottom.js
@@ -1,14 +1,42 @@
import React from 'react'
import Module from '../../../public/module'
+import PieChart from '../chart/pie-chart';
+let data = [
+ { value: 435, name: "道路" },
+ { value: 679, name: "桥梁" },
+ { value: 848, name: "涵洞" },
+ { value: 666, name: "其他" },
+]
+let colorList = [
+ "rgba(7,185,254,1)",
+ "rgba(28,96,254,1)",
+ "rgba(4,251,240,1)",
+ "rgba(255,194,20,1)"
+]
+let underColorList = [
+ "rgba(7,185,254,0.5)",
+ "rgba(28,96,254,0.5)",
+ "rgba(4,251,240,0.5)",
+ "rgba(255,194,20,0.5)"
+]
const RightBottom = () => {
const style = { height: "31%", marginTop: "3%" }
return (
- <>
-
-
-
- >
+ <>
+
+ {/* */}
+
+
+ >
)
}
export default RightBottom
\ No newline at end of file
diff --git a/web/client/src/sections/quanju/containers/footer/conserve/right/right-top.js b/web/client/src/sections/quanju/containers/footer/conserve/right/right-top.js
index 18b24f6b..6e1cd0c6 100644
--- a/web/client/src/sections/quanju/containers/footer/conserve/right/right-top.js
+++ b/web/client/src/sections/quanju/containers/footer/conserve/right/right-top.js
@@ -5,12 +5,12 @@ import Module from '../../../public/module'
const RightTop = () => {
const style = { height: "31%", marginTop: "3%" }
const textStyle = { fontSize: 14, color: '#E9F7FF' }
- const numStyle = { color: '#fff', fontSize: 24, fontFamily: 'YouSheBiaoTiHei', textShadow: '0px 0px 8px #1C60FE', marginTop: 8 }
+ const numStyle = { color: '#fff', fontSize: 20, fontFamily: 'YouSheBiaoTiHei', textShadow: '0px 0px 8px #1C60FE', marginTop: 8 }
return (
<>
-
+
@@ -26,7 +26,7 @@ const RightTop = () => {
-
+
diff --git a/web/client/src/sections/quanju/containers/footer/guanli/LeftItem.js b/web/client/src/sections/quanju/containers/footer/guanli/LeftItem.js
index d774030c..720a27d8 100644
--- a/web/client/src/sections/quanju/containers/footer/guanli/LeftItem.js
+++ b/web/client/src/sections/quanju/containers/footer/guanli/LeftItem.js
@@ -5,76 +5,111 @@ export default function LeftItem() {
const seasonChartRef = useRef(null);
useEffect(() => {
let chartInstance = echarts.init(seasonChartRef.current);
- const seasonOption = {
- title: [
- {
- text: "已处理",
- x: "center",
- top: "55%",
- textStyle: {
- color: "#E9F7FF",
- fontSize: 14,
- },
+ const option = {
+ title: {
+ text: '75%',
+ top:'35%',
+ textStyle: {
+ fontSize: "1.375rem",
+ fontFamily: 'PingFangSC-Medium, PingFang SC',
+ fontWeight: 500,
+ // marginTop:-60,
+ color: '#FFFFFF'
},
- {
- text: "2333",
- x: "center",
- y: "35%",
- textStyle: {
- fontSize: "30",
- color: "#FFFFFF",
- fontFamily: "YouSheBiaoTiHei",
- },
+ subtext: '已处理',
+ subtextStyle: {
+ fontSize: "1rem",
+ fontFamily: "PingFangSC-Regular, PingFang SC",
+ fontWeight: 400,
+ color: 'rgba(216,240,255,0.8000)'
+ },
+ // itemGap: -2, // 主副标题距离
+ left: 'center',
+ // top: 'center'
+ },
+ angleAxis: {
+ max: 100, // 满分
+ clockwise: false, // 逆时针
+ // 隐藏刻度线
+ axisLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
},
- ],
- polar: {
- radius: ["78%", "86%"],
- center: ["50%", "50%"],
- },
- angleAxis: {
- max: 100,
- show: false,
- },
- radiusAxis: {
- type: "category",
- show: true,
axisLabel: {
- show: false,
+ show: false
},
+ splitLine: {
+ show: false
+ }
+ },
+ radiusAxis: {
+ type: 'category',
+ // 隐藏刻度线
axisLine: {
- show: false,
+ show: false
},
axisTick: {
- show: false,
+ show: false
+ },
+ axisLabel: {
+ show: false
},
+ splitLine: {
+ 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",
- },
- ]),
+ polar: {
+ center: ['50%', '50%'],
+ radius: '180%' //图形大小
+ // radius: ["78%", "86%"],
+ },
+ series: [{
+ type: 'bar',
+ data: [{
+ name: '已处理',
+ value: 75,
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ {
+ offset: 0,
+ color: "#00D5FF",
+ },
+ {
+ offset: 1,
+ color: "#1978E5",
+ }])
+ }
},
- },
- },
- ],
- };
- chartInstance.setOption(seasonOption);
+ }],
+ coordinateSystem: 'polar',
+ roundCap: true,
+ barWidth: 8,
+ barGap: '-100%', // 两环重叠
+ z: 2,
+ },{ // 灰色环
+ type: 'bar',
+ data: [{
+ value: 100,
+ itemStyle: {
+ color: '#092B7B ',
+ shadowColor: 'rgba(0, 0, 0, 0.2)',
+ shadowBlur: 5,
+ shadowOffsetY: 2
+ }
+ }],
+ coordinateSystem: 'polar',
+ roundCap: true,
+ barWidth: 8,
+ barGap: '-100%', // 两环重叠
+ z: 1
+ }]
+ }
+
+
+
+ chartInstance.setOption(option);
}, [])
return (
@@ -84,7 +119,9 @@ export default function LeftItem() {
244 个
)
diff --git a/web/client/src/sections/quanju/containers/footer/guanli/index.js b/web/client/src/sections/quanju/containers/footer/guanli/index.js
index 88552520..e50e8467 100644
--- a/web/client/src/sections/quanju/containers/footer/guanli/index.js
+++ b/web/client/src/sections/quanju/containers/footer/guanli/index.js
@@ -26,18 +26,18 @@ const Guanli = () => {
})}
}
- renderContent()
+ // renderContent()
return (