图表颜色调整

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

@@ -2,12 +2,12 @@ import React from 'react'
 import Module from '../../../public/module'
 import PieChart from '../chart/pie-chart';
 
-let colorList = [
+let color = [
   "rgba(7,185,254,1)",
   "rgba(28,96,254,1)",
   "rgba(4,251,240,1)",
 ]
-let underColorList = [
+let underColor = [
   "rgba(7,185,254,0.5)",
   "rgba(28,96,254,0.5)",
   "rgba(4,251,240,0.5)",
@@ -22,9 +22,14 @@ const LeftBottom = (props) => {
     totalData += s.isGreen
     return {
       name: grade[index],
-      value: s.isGreen.toFixed(3)
+      value: s.isGreen.toFixed(3),
+      colorList: color[index],
+      underColorList: underColor[index]
+
     }
   })
+  let colorList = value?.map(c =>c.colorList)
+  let underColorList = value?.map(c =>c.underColorList)
 
   return (
     <>

web/client/src/sections/quanju/containers/footer/conserve/right/right-bottom.js

@@ -2,18 +2,18 @@ import React from 'react'
 import Module from '../../../public/module'
 import PieChart from '../chart/pie-chart';
 
-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)"
-]
+// 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 type = ['culvert', '', 'road', 'bridge']
 
@@ -30,27 +30,37 @@ const RightBottom = (props) => {
       case 'road':
         return {
           name: '道路',
-          value: r.count
+          value: r.count,
+          colorList: 'rgba(7,185,254,1)',
+          underColorList: 'rgba(7,185,254,0.5)'
+
         };
       case 'culvert':
         return {
           name: '涵洞',
-          value: r.count
+          value: r.count,
+          colorList: 'rgba(4,251,240,1)',
+          underColorList: 'rgba(4,251,240,0.5)'
         };
       case 'bridge':
         return {
           name: '桥梁',
-          value: r.count
+          value: r.count,
+          colorList: 'rgba(28,96,254,1)',
+          underColorList: 'rgba(28,96,254,0.5)'
         };
       case 'other':
         return {
           name: '其他',
-          value: r.count
+          value: r.count,
+          colorList: 'rgba(255,194,20,1)',
+          underColorList: 'rgba(255,194,20,0.5)'
         };
     }
   }).filter(f => f !== undefined)
-  // const otherNum = totalData - typesNum
-  // otherNum !== null && list?.push({ name: '其他', value: otherNum })
+  console.log('list:',list);
+  let colorList = list?.map(c => c.colorList)
+  let underColorList =list?.map(c => c.underColorList)
   const style = { height: "31%", marginTop: "3%" }
   return (
     <>