提取总体消防安全数据到mock

src/_mock/syData/mockData.js

+//总体消防安全
+export const AllSafetyDataMock = {
+  redCount: 1,
+  blueConunt: 1,
+  shengshenCount: 1,
+  xiajiangCount: 1,
+  zongshu: 80,
+  hege: 40,
+  buhege: 60
+};

src/view/monitor/duty/statistical/AllSafety.js

 import React, { Component } from 'react';
 import ReactEcharts from 'amos-viz/lib/echarts';
 import CommonCard from '../../../common/commonCard/CommonCard';
+import { AllSafetyDataMock } from './../../../../_mock/syData/mockData';
 /**
  * 总体消防安全情况
  */
@@ -109,13 +110,113 @@ class AllSafety extends Component {
     };
   }
 
-  componentDidMount() {}
+  componentDidMount() {
+    this.setState({
+      data: AllSafetyDataMock
+    });
+  }
 
   getOptionsx = () => {
-    return option;
+    const { data } = this.state;
+    return {
+      tooltip: {
+        trigger: 'item',
+        formatter: '{a} <br/>{b}: {c} ({d}%)'
+      },
+      color: ['#F70D0E', '#00CACE'],
+      graphic: [
+        {
+          //环形图中间添加文字
+          type: 'text', //通过不同top值可以设置上下显示
+          left: 'center',
+          top: '30%',
+          style: {
+            text: data.zongshu, //'80' + '\n' + '总数'
+            textAlign: 'center',
+            fill: 'rgba(255,255,255,1)', //文字的颜色
+            width: 30,
+            height: 30,
+            fontSize: 25,
+            fontFamily: 'Microsoft YaHei',
+            fontWeight: 'bold'
+          }
+        },
+        {
+          //环形图中间添加文字
+          type: 'text', //通过不同top值可以设置上下显示
+          left: 'center',
+          top: '45%',
+          style: {
+            text: '站点',
+            textAlign: 'center',
+            fill: 'rgba(255,255,255,1)', //文字的颜色
+            width: 24,
+            height: 16,
+            fontSize: 12,
+            fontFamily: 'Microsoft YaHei',
+            fontWeight: 400
+          }
+        }
+      ],
+
+      series: [
+        {
+          name: '总体消防安全情况',
+          type: 'pie',
+          radius: ['65%', '80%'],
+          center: ['50%', '40%'],
+          avoidLabelOverlap: false,
+          // hoverAnimation: false,  //是否突出
+
+          labelLine: {
+            normal: {
+              show: false
+            }
+          },
+          data: [
+            {
+              value: data.buhege,
+              name: '不合格'
+            },
+            {
+              value: data.hege,
+              name: '正常'
+            }
+          ]
+        },
+        {
+          name: '中间的背景',
+          type: 'pie',
+          radius: ['0%', '60%'],
+          center: ['50%', '40%'],
+          label: {
+            show: false
+          },
+          itemStyle: {
+            normal: {
+              color: 'rgba(24,219,159,0.1)'
+            }
+          },
+          //隐藏多余文字提示
+          label: {
+            show: false
+          },
+          labelLine: {
+            show: false
+          },
+          tooltip: {
+            show: false
+          },
+
+          // hoverAnimation: false,
+          data: [100]
+        }
+      ]
+    };;
   };
 
   render() {
+    let { data } = this.state;
     return (
       <div className="AllSafety">
         <div className="all-safety-content">
@@ -126,19 +227,19 @@ class AllSafety extends Component {
               </div>
               <div className="all-safety-right">
                 <div className="all-safety-right-one">
-                  <div className="right-one-font">1个</div>
+                  <div className="right-one-font">{data.redCount}个</div>
                 </div>
                 <div className="all-safety-right-two">
                   <div className="right-two-font">
-                    <span className="jiantou">&darr;</span>-1
+                    <span className="jiantou">&darr;</span>-{data.xiajiangCount}
                   </div>
                 </div>
                 <div className="all-safety-right-three">
-                  <div className="right-three-font">1个</div>
+                  <div className="right-three-font">{data.blueConunt}个</div>
                 </div>
                 <div className="all-safety-right-four">
                   <div className="right-four-font">
-                    <span className="jiantou">&uarr;</span>+1
+                    <span className="jiantou">&uarr;</span>+{data.shengshenCount}
                   </div>
                 </div>
               </div>