style: style

src/assets/css/styleTemplate.less

@@ -2,7 +2,7 @@
  * @Author: dayan_hjm 茶百道主题样式
  * @Date: 2022-10-27 10:56:37 
  * @Last Modified by: dayan_hjm
- * @Last Modified time: 2023-10-25 16:42:23
+ * @Last Modified time: 2023-10-25 17:48:44
  */
 
 @import url("../../themes/themes.less");
@@ -226,18 +226,20 @@
     display: inline-block;
     border: 1px solid #ececec;
   }
+
   #app .top2 {
     background: url(../imgs/dataVimg/topBg.png) no-repeat 0 0 / 100% 100% #0a091e;
     height: 8%;
-    background:#0a091e;
+    background: #0a091e;
     background-color: #0a091e;
-  
+
   }
+
   #app .top {
     background: url(../imgs/dataVimg/topBg.png) no-repeat 0 0 / 100% 100% #0a091e;
     height: 100%;
     position: unset;
-  
+
     .title_box {
       display: flex;
       align-items: center;
@@ -319,6 +321,7 @@
   .homePage .bottom_body {
     // background-image: linear-gradient(to top, #F8FCFE, #F8FCFE, #F8FCFE);
     background: linear-gradient(51.4deg, #000308 0%, #041b40 100%);
+
     // background: url(../imgs/dataVimg/homeBgDataV.png) no-repeat 0 0 / 100% 100% #041b40;
   }
 
@@ -328,9 +331,12 @@
     top: 0;
     width: 100%;
     height: 100%;
-    .video_box_hide{
+    background: url(../imgs/dataVimg/homeBgDataV.png) no-repeat 0 -10em / 100% 120% #041b40;
+
+    .video_box_hide {
       z-index: 12;
     }
+
     .video_box {
       position: absolute;
       left: 0;
@@ -342,6 +348,8 @@
       align-items: center;
       justify-content: center;
       flex-wrap: wrap;
+      pointer-events: none;
+
       video {
         width: 89%;
         height: 83%;
@@ -367,15 +375,15 @@
       width: 100%;
       background: unset;
       z-index: 11;
+
       .topMsg_title {
         background: url(../imgs/dataVimg/tipleBg.png) no-repeat 0 0 / 100% 100%;
         height: 2em;
         color: #fff;
         text-align: left;
-        padding-left: 2em;
+        padding-left: 2.5em;
         box-sizing: border-box;
         line-height: 2.2em;
-        font-weight: 700;
         font-family: "DingTalk JinBuTi";
       }
 
@@ -383,7 +391,8 @@
         width: 28%;
         height: 88%;
         z-index: 9;
-        .topMsg2{
+
+        .topMsg2 {
           width: 100%;
           height: 22%;
           box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.04);
@@ -391,6 +400,7 @@
           /* padding: 16px; */
           margin-bottom: 3%;
         }
+
         .topMsg {
           width: 100%;
           height: 100%;
@@ -456,6 +466,21 @@
               display: flex;
               align-items: center;
               justify-content: space-between;
+              position: relative;
+
+              .name_ul {
+                width: 43%;
+                height: 80%;
+                color: #fff;
+                position: absolute;
+                right: 0%;
+                top: 1.2em;
+
+                li {
+                  height: 22%;
+                  text-align: left;
+                }
+              }
 
               #echarts4,
               #echarts6 {
@@ -465,14 +490,16 @@
 
             }
           }
+
           width: 100%;
           height: 100%;
         }
 
-        .bottomContent2{
+        .bottomContent2 {
           width: 100%;
-          height: 35%;
+          height: 42%;
         }
+
         .bottomContent {
           width: 100%;
           height: 100%;
@@ -486,7 +513,7 @@
 
             #chartmain {
               width: 80%;
-              height: 80%;
+              height: 100%;
             }
 
           }
@@ -516,6 +543,7 @@
         width: 100%;
         height: 28%;
       }
+
       .rightContent .bottomContent {
         width: 100%;
         height: 100%;
@@ -586,35 +614,42 @@
         .topMsg_2 .topMsg_content {
           height: 80%;
         }
-        .topMsg_22,.topMsg_33{
+
+        .topMsg_22 {
+          width: 100%;
+          height: 28%;
+        }
+
+        .topMsg_33 {
           width: 100%;
           height: 22%;
-          margin-bottom: 3%;
+          margin-bottom: 2%;
         }
+
         .topMsg_2,
-        .topMsg_3{
+        .topMsg_3 {
           width: 100%;
           height: 100%;
         }
+
         .topMsg_4 {
           width: 100%;
           height: 22%;
-          margin-bottom: 3%;
         }
 
         .topMsg_3 {
           .topMsg_content {
-            height: calc(100% - 2em);
+            height: calc(100% - 1em);
             line-height: 2.8em;
             font-size: 1.8em;
             color: #69FFDE;
-            background: url(../imgs/dataVimg/wanchanglv.gif) no-repeat center center / 84% 98%;
+            background: url(../imgs/dataVimg/wanchanglv.gif) no-repeat center center/ 71% 99%;
             display: flex;
             align-items: center;
             justify-content: center;
 
             .topMsg_number_2 {
-              font-size: 0.8em;
+              font-size: 0.75em;
               color: #fff;
             }
 
@@ -633,11 +668,13 @@
           }
 
         }
-        .topMsg2{
+
+        .topMsg2 {
           width: 100%;
           height: 20%;
           margin-bottom: 3%;
         }
+
         .topMsg {
           width: 100%;
           height: 100%;
@@ -766,11 +803,13 @@
         width: calc(100% - 56%);
         height: 88%;
         position: relative;
-        .topMsg3{
+
+        .topMsg3 {
           width: 100%;
           height: 18%;
           margin-top: 2em;
         }
+
         .bottomContent3 {
           height: 30%;
           width: 100%;
@@ -779,6 +818,7 @@
           bottom: 5%;
 
         }
+
         .bottomContent {
           height: 100%;
           width: 100%;
@@ -1027,11 +1067,43 @@
   #echarts8 {
     width: 50%;
     height: 80%;
+    box-sizing: border-box;
+    background: url(../imgs/dataVimg/toplineV.png) no-repeat 26% 50% / 1px 70%;
+
   }
 
   #echarts9 {
     width: 40%;
     height: 80%;
+    box-sizing: border-box;
+    padding-right: 3%;
+    background: url(../imgs/dataVimg/toplineV.png) no-repeat 95% 55% / 1px 70%;
+
+  }
+
+  .cbRightBottomView {
+    flex-wrap: wrap;
+    position: relative;
+
+    .right_b_tip2 {
+      width: 46%;
+      display: block;
+      position: absolute;
+      color: rgba(205, 241, 255, 1);
+      left: 29%;
+      top: 1.2em;
+      text-align: right;
+    }
+
+    .right_b_tip1 {
+      width: 36%;
+      display: block;
+      position: absolute;
+      color: rgba(205, 241, 255, 1);
+      left: 0;
+      top: 1.2em;
+      text-align: right;
+    }
   }
 
   .leftContent .bottomContent {

src/pages/frame/component/top/view.jsx

@@ -769,7 +769,7 @@ export default observer(function (props) {
     messageSourceName,
   } = detailMessage || {}; /**解构 当前点击的详情数据 */
   return (
-    <div class="top2 animate__animated animate__fadeInDown animate__delay-1s">
+    <div class="top2 animate__animated animate__fadeInDown animate__delay-1s animate__slower">
       <div className={$store.app.styleCommon.theme == 'chaBaiDao' ? [styles.top + ' top'] : styles.top}>
         <div className="title_box">
           <img

src/pages/tqcDataVHome/component/leftMenoyView.jsx

@@ -35,7 +35,7 @@ class LeftMenoyView extends Component {
       var option = {
 
         grid: {
-          left: '2%',
+          left: '0%',
           top: '1%',
           right: '5%',
           bottom: '0%',
@@ -50,25 +50,12 @@ class LeftMenoyView extends Component {
           offset: '7',
           axisLabel: {
             textStyle: {
-              color: 'rgba(255,255,255,.6)',
-              fontSize: '14',
+              color: 'rgba(255,255,255,.9)',
+              fontSize: '0',
             }
           },
-          data: ['字段1', '字段2', '字段3', '字段4']
-
-        }, 
-        // {
-        //   axisTick: 'none',
-        //   axisLine: 'none',
-        //   axisLabel: {
-        //     textStyle: {
-        //       color: 'rgba(255,255,255,.6)',
-        //       fontSize: '14',
-        //     }
-        //   },
-        //   data: [1514, 1619, 1623, 1968]
-
-        // }, 
+          data: ['碳酸锂', '氧化纳', '金属锂', '氢氧化钠']
+        },
         {
           name: '单位：件',
           nameGap: '50',
@@ -87,16 +74,18 @@ class LeftMenoyView extends Component {
           name: '条',
           type: 'bar',
           yAxisIndex: 0,
-          data: [25, 30, 34, 40, 43, 48, 52, 56, 70],
+          data: [{ value: 25, name: '碳酸锂' }, { value: 33, name: '氧化纳' }, { value: 35, name: '金属锂' }, { value: 40, name: '氢氧化钠' }],
           label: {
             normal: {
               show: true,
               position: 'right',
               formatter: function (param) {
-                return param.value + '%';
+                return param.value + '万元';
+                // return param.name+"："+param.value + '万元';
+
               },
               textStyle: {
-                color: 'rgba(255,255,255,.8)',
+                color: 'rgba(255,255,255,1)',
                 fontSize: '12',
               }
             }
@@ -104,30 +93,39 @@ class LeftMenoyView extends Component {
           barWidth: 15,
           itemStyle: {
             normal: {
-              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
-                offset: 0,
-                color: '#03c893'
-              },
-              {
-                offset: 1,
-                color: '#0091ff'
-              }
+              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+                { offset: 0, color: 'rgba(255, 206, 0, 1)' },
+                { offset: 0.7, color: '#ffd01d94' },
+                { offset: 1, color: '#ffd01d94' },
               ]),
               barBorderRadius: 15,
+              borderColor: "rgba(255, 206, 0, 1)",
+              borderWidth: 1
             }
           },
+          labelLine: {
+            length: 10,
+            length2: 50,
+          },
+          labelLayout: {
+            x: "20%",
+            y: "20%",
+            verticalAlign: "bottom",
+            dy: -10,
+          },
           z: 2
         }, {
           name: '白框',
           type: 'bar',
           yAxisIndex: 1,
           barGap: '-100%',
-          data: [99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5],
+          data: [99.5, 99.5, 99.5, 99.5],
           barWidth: 15,
           itemStyle: {
             normal: {
-              color: 'rgba(0,0,0,.2)',
+              color: '#ffffff24',
               barBorderRadius: 15,
+
             }
           },
           z: 1
@@ -246,6 +244,12 @@ class LeftMenoyView extends Component {
     return (
       <div className={["eacharView cbLeftMenoyView"]}>
         <div id="echarts6"></div>
+        <ul className={"name_ul"}>
+          <li>碳酸锂</li>
+          <li>氧化纳</li>
+          <li>金属锂</li>
+          <li>氢氧化钠</li>
+        </ul>
         <div id="echarts4"></div>
       </div>
     )

src/pages/tqcDataVHome/component/mapView.jsx

@@ -14,7 +14,7 @@
         preload 属性 :
         设置 auto , 表示 预先加载视频 ;
         设置 none , 表示 不预先加载视频 ;
- * @Last Modified time: 2023-10-25 16:42:50
+ * @Last Modified time: 2023-10-25 17:45:41
  */
 import React, { useState, useEffect, Component } from "react";
 import { useHistory, useLocation, withRouter } from "react-router-dom";
@@ -100,7 +100,7 @@ class MapView extends Component {
   render() {
     const { changGif } = this.state;
     return (
-      <div class="video_box video_box_hide animate__animated animate__fadeOut animate__delay-2s">
+      <div class="video_box video_box_hide animate__animated animate__zoomOut animate__delay-2s animate__slower">
           <video src={require("@assets/imgs/dataVImg/homeVideo.mp4").default} autoplay="autoplay" class="video1"></video>
       </div>
     )

src/pages/tqcDataVHome/component/moodSendView.jsx

@@ -30,113 +30,157 @@ class MoodSendView extends Component {
     setTimeout(() => {
       var dataAxis = ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日'];
       var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 200];
+      var data2 = [120, 22, 141, 24, 29, 30, 30, 93, 49, 91, 90, 55, 34, 33, 77];
       var yMax = 500;
       var dataShadow = [];
       for (var i = 0; i < data.length; i++) {
         dataShadow.push(yMax);
       }
       var option = {
-        title: {
-          text: '',
-          subtext: ''
-        },
-        grid: {
-          x: 40,
-          y: 40,
-          x2: 20,
-          y2: 20,
-
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
         },
-        xAxis: {
-          data: dataAxis,
-          axisLabel: {
-            /*inside: true,*/
-            interval: 0,
-            textStyle: {
-              color: '#fff',
-              fontSize: 12
-
-            }
+        legend: {
+          data: ['发货量', '产量'],
+          fontFamily:'DingTalkJinBuTi',
+          padding: [25, 0, 0, 10],
+          textStyle:{
+            color:"#fff"
           },
-          axisTick: {
-            show: false,
-          },
-          axisLine: {
-            show: true,
-            symbol: ['none', 'arrow'],
-            symbolOffset: 12,
-            lineStyle: {
-              color: '#fff',
-            }
-          },
-          z: 10
+          itemWidth: 11,
+          itemHeight: 11,
         },
-        yAxis: {
-          type: 'value',
-          name: '单位：元',
-          axisLine: {
-            show: true,
-            symbol: ['none', 'arrow'],
-            symbolOffset: 12,
-            lineStyle: {
-              color: '#fff',
-            }
-          },
-          axisTick: {
-            show: false
-          },
-          axisLabel: {
-            textStyle: {
-              color: '#fff',
-              fontSize: 12
+        // toolbox: {
+        //   show: true,
+        //   orient: 'vertical',
+        //   left: 'right',
+        //   top: 'center',
+        //   feature: {
+        //     mark: { show: true },
+        //     dataView: { show: true, readOnly: false },
+        //     magicType: { show: true, type: ['line', 'bar', 'stack'] },
+        //     restore: { show: true },
+        //     saveAsImage: { show: true }
+        //   }
+        // },
+        //   xAxis: {
+        //     data: dataAxis,
+        //     axisTick: {
+        //       show: false,
+        //     },
+        //     axisLine: {
+        //       show: true,
+        //       symbol: ['none', 'arrow'],
+        //       symbolOffset: 12,
+        //       lineStyle: {
+        //         color: '#fff',
+        //       }
+        //     },
+        //     z: 10
+        //   },
+
+        xAxis: [
+          {
+            type: 'category',
+            axisTick: { show: false },
+            data: ['2月', '3月', '4月', '5月', '6月'],
+            axisLabel: {
+              /*inside: true,*/
+              color: "rgba(255,255,255,.6)",
+              interval: 0,
+              textStyle: {
+                color: '#7d7d7d',
+                fontSize: 12
+
+              },
+            },
+            axisLine: {
+              lineStyle: {
+                color: 'rgba(255,255,255,.1)',
+                type: 'dashed',
+              }
+            },
+            splitLine:{
+              show:true,
+              lineStyle:{
+                color: '#3b3b3b',
+                type: 'dashed',
+              }
             }
           }
-        },
-
-        dataZoom: [
+        ],
+        yAxis: [
           {
-            type: 'inside'
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#7d7d7d',
+                type: 'dashed',
+              },
+            },
+            axisTick: { show: false },
+            axisLabel: {
+              formatter: "{value}吨",
+              textStyle: {
+                color: '#7d7d7d',
+                fontSize: 12
+              }
+            },
+            splitLine:{
+              show:true,
+              lineStyle:{
+                color: '#3b3b3b',
+                type: 'dashed',
+
+              }
+            }
           }
         ],
         series: [
-          { // For shadow
+          {
+            name: '产量',
             type: 'bar',
+
+            emphasis: {
+              focus: 'series'
+            },
+            barWidth: 10,
+
             itemStyle: {
-              color: 'rgba(0,0,0,0.05)'
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(255, 206, 0, 1)' },
+                { offset: 0.7, color: 'rgba(255, 206, 0, 1)' },
+                { offset: 1, color: 'rgba(255, 206, 0, 0.3)' },
+              ])
             },
-            barGap: '-100%',
-            barCategoryGap: '40%',
-            data: dataShadow,
-            animation: false
+
+            data: [220, 182, 191, 234, 290]
           },
           {
+            name: '发货量',
             type: 'bar',
-            itemStyle: {
-              color: new echarts.graphic.LinearGradient(
-                0, 0, 0, 1,
-                [
-                  { offset: 0, color: '#0efdff' },
-                  { offset: 0.5, color: '#188df0' },
-                  { offset: 1, color: '#188df0' }
-                ]
-              )
-            },
+            barGap: 0,
+            barWidth: 10,
             emphasis: {
-              itemStyle: {
-                color: new echarts.graphic.LinearGradient(
-                  0, 0, 0, 1,
-                  [
-                    { offset: 0, color: '#2378f7' },
-                    { offset: 0.7, color: '#2378f7' },
-                    { offset: 1, color: '#0efdff' }
-                  ]
-                )
-              }
+              focus: 'series'
+            },
+            itemStyle: {
+              labelLine:{
+                show:false
+              },
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(105, 255, 222, 1)' },
+                { offset: 0.7, color: 'rgba(105, 255, 222, 1)' },
+                { offset: 1, color: 'rgba(105, 255, 222, 0.3)' },
+              ])
             },
-            data: data
+            data: [320, 332, 301, 334, 390]
           }
         ]
-      };
+      }
       var myChart = echarts.init(document.getElementById('chartmain'));
       // 使用刚指定的配置项和数据显示图表。
       myChart.setOption(option);

src/pages/tqcDataVHome/component/oneQualified.jsx

@@ -35,68 +35,83 @@ class BottomLineForSend extends Component {
         tooltip: {
           trigger: 'axis',
           axisPointer: { type: 'shadow' },
+          borderColor:"rgba(105, 255, 222, 0.5)",
+          borderWidth:2,
+          padding:5,
+          textStyle:{
+            fontSize:12,
+            color:"#ededed"
+          },
+          formatter: '{a0}: {c0}<br />{a1}: {c1}',
+          backgroundColor:"#0000008a"
         }, "grid": {
-          "top": "15%",
-          "right": "10%",
+          "top": "20%",
+          "right": "15%",
           "bottom": "20",
-          "left": "10%",
+          "left": "15%",
         },
         legend: {
           data: ['目标一次及格率', '实际一次及格率'],
           right: 'center',
+          padding: [10, 0, 0, 15],
           top: 0,
           textStyle: {
             color: "#fff"
           },
           itemWidth: 12,
-          itemHeight: 10,
+          itemHeight: 5,
         },
         "xAxis": [
           {
             "type": "category",
 
-            data: ['2016', '2017', '2018', '2019'],
+            data: ['2月', '3月', '4月', '5月', '6月'],
             axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
             axisLabel: {
-              textStyle: { color: "rgba(255,255,255,.7)", fontSize: '14', },
+              textStyle: { color: "rgba(255,255,255,.7)", fontSize: '12', },
             },
+            splitLine:{
+              show:true,
+              lineStyle:{
+                color: '#3b3b3b',
+                type: 'dashed',
+
+              }
+            }
 
           },
         ],
         "yAxis": [
           {
-            "type": "value",
-            "name": "单位1",
-            "show": true,
-            axisTick: { show: false },
-            "axisLabel": {
-              "show": true,
-              color: "rgba(255,255,255,.6)"
-
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#7d7d7d',
+                type: 'dashed',
+              },
             },
-            axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },//左线色
-
-          },
-          {
-            "type": "value",
-            "name": "单位2",
-            "show": true,
             axisTick: { show: false },
-            "axisLabel": {
-              "show": true,
+            axisLabel: {
               formatter: "{value}",
-              color: "rgba(255,255,255,.6)"
+              textStyle: {
+                color: '#7d7d7d',
+                fontSize: 12
+              }
             },
-            axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },//右线色
-            splitLine: { show: true, lineStyle: { color: 'rgba(255,255,255,.1)' } },//x轴线
+            splitLine:{
+              show:true,
+              lineStyle:{
+                color: '#3b3b3b',
+                type: 'dashed',
+
+              }
+            }
           },
         ],
         "series": [
           {
             "name": "目标一次及格率",
             "type": "line",
-            "yAxisIndex": 1,
-
             "data": [66, 16.8, 1.33, 12.65],
             lineStyle: {
               normal: {
@@ -114,8 +129,6 @@ class BottomLineForSend extends Component {
           {
             "name": "实际一次及格率",
             "type": "line",
-            "yAxisIndex": 1,
-
             "data": [0, 11.48, 18.00, 25.65],
             lineStyle: {
               normal: {

src/pages/tqcDataVHome/component/rightBottomView.jsx

@@ -35,8 +35,8 @@ class RightBottomView extends Component {
       var option = {
 
         grid: {
-          left: '2%',
-          top: '1%',
+          left: '5%',
+          top: '15%',
           right: '5%',
           bottom: '0%',
           containLabel: true
@@ -47,16 +47,18 @@ class RightBottomView extends Component {
         yAxis: [{
           axisTick: 'none',
           axisLine: 'none',
-          offset: '7',
           axisLabel: {
+            padding:[0,25,0,0],
             textStyle: {
               color: '#69FFDE',
               fontSize: '16',
+              fontWeight: 700,
+              fontFamily: 'DingTalkJinBuTi',
             }
           },
           data: ['2020', '2021', '2022']
 
-        }, 
+        },
         {
           name: '单位：件',
           nameGap: '50',
@@ -73,10 +75,11 @@ class RightBottomView extends Component {
         }],
         legend: {
           data: '碳排放强度',
-          right: 'center',
-          top: 0,
+          // right: 'center',
+          // top: 0,
           textStyle: {
-            color: "#fff"
+            color: "#fff",
+            fontSize: 12
           },
           itemWidth: 12,
           itemHeight: 10,
@@ -85,34 +88,34 @@ class RightBottomView extends Component {
           name: '条',
           type: 'bar',
           yAxisIndex: 0,
-          data: [25, 30, 34],
+          data: [88, 73, 34],
           label: {
             normal: {
               show: true,
-              position: 'right',
+              position: 'insideBottomLeft',
               formatter: function (param) {
-                return param.value + '%';
+                return param.value;
               },
               textStyle: {
-                color: 'rgba(255,255,255,.8)',
-                fontSize: '12',
+                color: 'rgba(255,255,255,1)',
+                fontSize: '15',
+                padding:[5,0,0,5]
               }
             }
           },
-          barWidth: 15,
+          barWidth: 23,
           itemStyle: {
             normal: {
-              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
-                offset: 0,
-                color: '#FFCE00'
-              },
-              {
-                offset: 1,
-                color: '#c8a20494'
-              }
+              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+                { offset: 0, color: 'rgba(255, 206, 0, 1)' },
+                { offset: 0.7, color: '#ffd01d94' },
+                { offset: 1, color: '#ffd01d94' },
               ]),
               barBorderRadius: 15,
-            }
+              borderColor: "rgba(255, 206, 0, 1)",
+              borderWidth: 1
+
+            },
           },
           z: 2
         }, {
@@ -121,11 +124,12 @@ class RightBottomView extends Component {
           yAxisIndex: 1,
           barGap: '-100%',
           data: [99.5, 99.5, 99.5],
-          barWidth: 15,
+          barWidth: 23,
           itemStyle: {
             normal: {
               color: '#ffffff24',
               barBorderRadius: 15,
+
             }
           },
           z: 1
@@ -149,19 +153,23 @@ class RightBottomView extends Component {
       var option = {
 
         grid: {
-          left: '2%',
-          top: '1%',
+          left: '0%',
+          top: '15%',
           right: '5%',
           bottom: '0%',
           containLabel: true
         },
         xAxis: [{
           show: false,
+          inverse: true,
         }],
         yAxis: [{
           axisTick: 'none',
           axisLine: 'none',
-          offset: '7',
+          offset: '15',
+          axisLine: {
+            onZero: false
+          },
           axisLabel: {
             textStyle: {
               color: 'rgba(255,255,255,.6)',
@@ -170,7 +178,7 @@ class RightBottomView extends Component {
           },
           data: ['字段1', '字段2', '字段3']
 
-        }, 
+        },
         {
           name: '单位：件',
           nameGap: '50',
@@ -189,33 +197,32 @@ class RightBottomView extends Component {
           name: '条',
           type: 'bar',
           yAxisIndex: 0,
-          data: [25, 30, 34],
+          data: [25, 55, 88],
           label: {
             normal: {
               show: true,
-              position: 'right',
+              position: 'insideRight',
               formatter: function (param) {
-                return param.value + '%';
+                return param.value;
               },
               textStyle: {
-                color: 'rgba(255,255,255,.8)',
-                fontSize: '12',
+                color: 'rgba(255,255,255,1)',
+                fontSize: '15',
+                padding:[5,5,0,0]
               }
             }
           },
-          barWidth: 15,
+          barWidth: 23,
           itemStyle: {
             normal: {
-              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
-                offset: 0,
-                color: '#03c893'
-              },
-              {
-                offset: 1,
-                color: '#0091ff'
-              }
+              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+                { offset: 1, color: '#69FFDE' },
+                { offset: 0.75, color: '#69FFDE' },
+                { offset: 0, color: 'rgb(83 211 183 / 15%)' },
               ]),
               barBorderRadius: 15,
+              borderColor: "#69FFDE",
+              borderWidth: 1
             }
           },
           z: 2
@@ -225,7 +232,7 @@ class RightBottomView extends Component {
           yAxisIndex: 1,
           barGap: '-100%',
           data: [99.5, 99.5, 99.5],
-          barWidth: 15,
+          barWidth: 23,
           itemStyle: {
             normal: {
               color: '#ffffff24',
@@ -250,10 +257,12 @@ class RightBottomView extends Component {
 
     return (
       <div className={["eacharView cbRightBottomView"]}>
+        <span className="right_b_tip1">碳排放强度</span>
         <div id="echarts9"></div>
         {/* <div className="fonts">
 
         </div> */}
+        <span className="right_b_tip2">碳排放总量/万吨</span>
         <div id="echarts8"></div>
       </div>
     )

src/pages/tqcDataVHome/view.jsx

@@ -2,7 +2,7 @@
  * @Author: dayan_hjm 
  * @Date: 2023-10-25 10:32:44 
  * @Last Modified by: dayan_hjm
- * @Last Modified time: 2023-10-25 16:46:16
+ * @Last Modified time: 2023-10-25 17:48:42
  */
 /*
  * @Author: dayan_hjm 
@@ -157,7 +157,7 @@ class Home extends Component {
               </div>
             </div>
 
-            <div class="center_box2 animate__animated animate__fadeInDown animate__slower">
+            <div class="center_box2 animate__animated animate__fadeInDown animate__slower animate__delay-1s">
               <div className="center_box">
                 <p className="topMsg_title">库存金额</p>
                 <div className="topMsg_content">
@@ -178,7 +178,7 @@ class Home extends Component {
           </div>
 
           <div className="centerCon">
-            <div class="topMsg3 animate__animated animate__fadeInDown animate__slower">
+            <div class="topMsg3 animate__animated animate__fadeInUp animate__slower">
               <div className="topMsg">
                 <div className="topMsg2">
                   <div className="topMsg_content">