ad

src/pages/MonitoringScreen/DateCommponetsBottomLeft.jsx

@@ -49,43 +49,18 @@ export default (props) => {
     xField: 'NongType',
     yField: 'sum',
     seriesField: 'name',
-    color: ['#F5CC5C', '#44F68B', '#51D4FF', '#B8B2A9', '#F55226'],
+    color: [
+      'l(270) 0:rgba(225,225,225,0.0) 1:#F5CC5C',
+      'l(270) 0:rgba(225,225,225,0.0) 1:#44F68B',
+      'l(270) 0:rgba(225,225,225,0.0) 1:#51D4FF',
+      'l(270) 0:rgba(225,225,225,0.0) 1:#B8B2A9',
+      'l(270) 0:rgba(225,225,225,0.0) 1:#F55226'],
     minColumnWidth: 26,
     columnStyle: {
       // fill: 'l(270) 0:rgba(225,225,225,0.0) 1:#FB9900',
     },
-    color: ({ name }) => {
-      if (name == '预约') {
 
-        return `l(270) 0:rgba(225,225,225,0.0) 1:#F5CC5C`;
 
-
-      }
-      if (name == '作业') {
-
-        return `l(270) 0:rgba(225,225,225,0.0) 1:#44F68B`;
-
-
-      }
-      if (name == '闲置') {
-
-        return `l(270) 0:rgba(225,225,225,0.0) 1:#51D4FF`;
-
-
-      }
-      if (name == '离线') {
-
-        return `l(270) 0:rgba(225,225,225,0.0) 1:#B8B2A9`;
-
-
-      }
-      if (name == '维修') {
-
-        return `l(270) 0:rgba(225,225,225,0.0) 1:#F55226`;
-
-
-      }
-    },
     /** 设置间距 */
     // marginRatio: 0.1,
     label: {

src/pages/MonitoringScreen/DateCommponetsBottomRight.jsx

@@ -60,10 +60,13 @@ export default (props) => {
       type: 'spider',
       labelHeight: 28,
       content: '{name}\n{percentage}',
+      fill: 'rgba(225, 0, 0, 0.65)',
     },
+
     interactions: [
       {
         type: 'element-selected',
+
       },
       {
         type: 'element-active',

src/pages/MonitoringScreen/DateCommponetsLeft.jsx

@@ -16,15 +16,15 @@ export default (props) => {
   }
   const data = [
     {
-      year: '收割机',
+      key: '收割机',
       value: 200,
     },
     {
-      year: '播种机',
+      key: '播种机',
       value: 150,
     },
     {
-      year: '农药机',
+      key: '农药机',
       value: 50,
     },
   ];
@@ -33,42 +33,15 @@ export default (props) => {
     maxBarWidth: 20,
     data,
     xField: 'value',
-    yField: 'year',
-    seriesField: 'year',
-
-    // color: [' #FB9900', '#23E8AE', '#E63404'],
-    color: ({ type, year }) => {
-      if (year == '收割机') {
-
-        return `l(0) 0:rgba(225,225,225,0.0) 1:#FB9900`;
-
-
-      }
-      if (year == '播种机') {
-
-        return `l(0) 0:rgba(225,225,225,0.0) 1:#23E8AE`;
-
-
-      }
-      if (year == '农药机') {
-
-        return `l(0) 0:rgba(225,225,225,0.0) 1:#E63404`;
-
-
-      }
-    },
-    barStyle: {
-      // fill: `l(0) 0:rgba(225,225,225,0.0) 1:#FB9900`,
-    },
+    yField: 'key',
+    seriesField: 'key',
+    color: ['l(0) 0:rgba(225,225,225,0.0) 1:#FB9900', 'l(0) 0:rgba(225,225,225,0.0) 1:#23E8AE', 'l(0) 0:rgba(225,225,225,0.0) 1:#E63404'],
     legend: {
       position: 'top-left',
 
     },
     statistic: {
       style: {
-        // fill: '#FB9900',
-        // fill: '#23E8AE',
-        // fill: '#E63404',
         fontSize: 10,
         fontWeight: 60,
         textAlign: 'center',

src/pages/MonitoringScreen/index.jsx

@@ -37,7 +37,9 @@ export default (props) => {
               <SquareBox>asdfasdf</SquareBox>
             </div>
             <div className={Styles['grail-content']}>
-              <DateCommponets />
+              <DateCommponetsLeft />
+              <DateCommponetsBottomLeft />
+              <DateCommponetsBottomRight />
             </div>
             <div className={Styles['grail-right']}>
               <SquareBox>asdfasdf</SquareBox>