右侧模块样式调整

src/styles/view/panoramic/statistical.scss

@@ -82,9 +82,9 @@
 
     .statistical-right{
         height: 100%;
-        width: 353px;
+        width: 355px;
         float: right;
-        padding-top: 65px;
+        padding-top: 40px;
 
         .echart-week {
             width: 321px !important;
@@ -92,6 +92,7 @@
             background-image: url('/src/assets/panoramic/statistical/main_bg_line_bg.png') !important;
             background-repeat:no-repeat!important;
             background-position:31px 47px!important;
+            left: 24px
            
         }
         
@@ -102,6 +103,7 @@
             height: 20px;
             width: 20px;
             vertical-align: middle;
+            margin-top: -4px;
           }  
             
             

src/view/panoramic/statistical/SafetyIndexWeek.js

@@ -13,16 +13,16 @@ const option = {
     boundaryGap: false,
     data: ['03-15', '03-16', '03-17', '03-18', '03-19', '03-20'],
     axisLabel: {
-     
+
       textStyle: {
         color: 'rgba(255,255,255,1)',
         fontSize: '14',
-        fontFamiliy:"SourceHanSansCN-Medium,SourceHanSansCN"
+        fontFamiliy: "SourceHanSansCN-Medium,SourceHanSansCN"
 
 
       },
     }
-    
+
   },
   yAxis: {
     type: 'value',
@@ -37,7 +37,7 @@ const option = {
       textStyle: {
         color: 'rgba(255,255,255,1)',
         fontSize: '14',
-        fontFamiliy:"SourceHanSansCN-Medium,SourceHanSansCN"
+        fontFamiliy: "SourceHanSansCN-Medium,SourceHanSansCN"
 
 
       },
@@ -86,37 +86,38 @@ class SafetyIndexWeek extends Component {
     super(props);
     this.state = {
       data: {}
-    
-    }; 
-   }
-
-   componentDidMount() {
-    safetyIndexWeekAction().then(data =>{
-         this.setState({
-          data:data
-         })  
+
+    };
+  }
+
+  componentDidMount() {
+    safetyIndexWeekAction().then(data => {
+      this.setState({
+        data: data
+      })
     })
   }
 
   getOptionsx = (map) => {
-    return  {
+    return {
       xAxis: {
         type: 'category',
-      
+
         boundaryGap: false,
         data: map.get("dates"),
         axisLabel: {
-          interval:0,//横轴信息全部显示
-         // rotate:40,
+          interval: 0,//横轴信息全部显示
+          // rotate:40,
           textStyle: {
             color: 'rgba(255,255,255,1)',
-            fontSize: '14',
-            fontFamiliy:"SourceHanSansCN-Medium,SourceHanSansCN"
-    
-    
+            fontSize: '12',
+            fontFamiliy: "SourceHanSansCN-Medium,SourceHanSansCN"
+
+
           },
+          margin: 15,//刻度标签与轴线之间的距离。
         }
-        
+
       },
       yAxis: {
         type: 'value',
@@ -130,70 +131,95 @@ class SafetyIndexWeek extends Component {
         axisLabel: {
           textStyle: {
             color: 'rgba(255,255,255,1)',
-            fontSize: '14',
-            fontFamiliy:"SourceHanSansCN-Medium,SourceHanSansCN"
-    
-    
+            fontSize: '12',
+            fontFamiliy: "SourceHanSansCN-Medium,SourceHanSansCN"
+
+
           },
+          margin: 15,//刻度标签与轴线之间的距离。
         },
-    
+
       },
-    
+
       series: [{
-        data:  map.get("values"),
+        data: map.get("values"),
         type: 'line',
+        symbol: 'circle',//折线点设置为实心点
         smooth: true,  //这个是把线变成
         itemStyle: {
           normal: {
-            color: "#FF7400", //折线点的颜色
+            color: "#E1B623", //折线点的颜色
             lineStyle: {
               width: 3,//折线宽度
-              color: "#DDBF28"//折线颜色
+              //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
+              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+
+                offset: 0,
+                color: '#FF0000'
+              }, {
+                offset: 0.2,
+                color: '#DDBF28'
+              }, {
+                offset: 0.4,
+                color: '#FF7400'
+              }, {
+                offset: 0.5,
+                color: '#00ADFF'
+              }, {
+                offset: 0.6,
+                color: '#DDBF28'
+              }])
             }
           }
         },
         areaStyle: {
           normal: {
-            //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
+            //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上#766016 transparent
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-    
+
               offset: 0,
               color: '#00ADFF'
             }, {
-              offset: 0.5,
-              color: '#DDBF28'
+              offset: 0.1,
+              color: '#6e6a26'
             }, {
-              offset: 1,
-              color: '#FF7400'
+              offset: 0.2,
+              color: '#766016'
+            }, {
+              offset: 0.5,
+              color: '#4b2006'
+            },{
+              offset: 0.6,
+              color: '#280d07'
             }])
-    
+
           }
-    
+
         }
       }]
     };
-  } 
+  }
 
-  handleData = (data) =>{
+  handleData = (data) => {
     let map = new Map();
     let dates = [];
     let values = [];
-    if(data && data.length > 0){
-        data.map(item =>{
-          let time2 = item.date.substring(5);
-          dates.push(time2)
-          values.push(item.value)
+    if (data && data.length > 0) {
+      data.map(item => {
+        let time2 = item.date.substring(5);
+        dates.push(time2)
+        values.push(item.value)
       })
     }
 
-    map.set("dates",dates);
-    map.set("values",values);
+    map.set("dates", dates);
+    map.set("values", values);
     return map;
   }
 
 
   render() {
-    let {data}  = this.state;
+    let { data } = this.state;
     let map = this.handleData(data);
     return (
       <div className="safetyIndexWeek">