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 17:48:44
+ * @Last Modified time: 2023-10-30 11:14:06
  */
 
 @import url("../../themes/themes.less");
@@ -474,10 +474,10 @@
                 color: #fff;
                 position: absolute;
                 right: 0%;
-                top: 1.2em;
+                top: 0.5em;
 
                 li {
-                  height: 22%;
+                  height: 25%;
                   text-align: left;
                 }
               }
@@ -485,7 +485,11 @@
               #echarts4,
               #echarts6 {
                 width: 45%;
-                height: 80%;
+                height: 90%;
+              }
+              #echarts6{
+                margin-top: -2em;
+                background: url(../imgs/dataVimg/guanghuan.png) no-repeat left 43% / 102% 120%;
               }
 
             }

src/pages/tqcDataVHome/component/leftMenoyView.jsx

@@ -2,7 +2,7 @@
  * @Author: dayan_hjm 库存金额
  * @Date: 2023-10-23 09:32:12 
  * @Last Modified by: dayan_hjm
- * @Last Modified time: 2023-10-23 10:14:04
+ * @Last Modified time: 2023-10-30 11:24:04
  */
 
 
@@ -74,7 +74,98 @@ class LeftMenoyView extends Component {
           name: '条',
           type: 'bar',
           yAxisIndex: 0,
-          data: [{ value: 25, name: '碳酸锂' }, { value: 33, name: '氧化纳' }, { value: 35, name: '金属锂' }, { value: 40, name: '氢氧化钠' }],
+          data: [{
+            value: 25, name: '碳酸锂', itemStyle: {
+              normal: {
+                // barBorderRadius: 15,
+                // borderColor: "rgba(141, 147, 255, 1)",
+                // borderWidth: 1,
+                color: {
+                  // 完成的圆环的颜色
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: 'rgba(141, 147, 255, 0.3)', // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: 'rgba(141, 147, 255, 1)', // 100% 处的颜色
+                    },
+                  ],
+                },
+              },
+            },
+
+          }, {
+            value: 33, name: '氧化纳', itemStyle: {
+              normal: {
+                // barBorderRadius: 15,
+                // borderColor: "rgba(105, 255, 222, 1)",
+                // borderWidth: 1,
+
+                color: {
+                  // 完成的圆环的颜色
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: 'rgba(105, 255, 222, 0.3)', // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: 'rgba(105, 255, 222, 1)', // 100% 处的颜色
+                    },
+                  ],
+                },
+              },
+            },
+
+          }, {
+            value: 35, name: '金属锂', itemStyle: {
+              normal: {
+                // barBorderRadius: 15,
+                // borderColor: "rgba(47, 210, 255, 1)",
+                // borderWidth: 1,
+
+                color: {
+                  // 完成的圆环的颜色
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: 'rgba(47, 210, 255, 0.3)', // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: 'rgba(47, 210, 255, 1)', // 100% 处的颜色
+                    },
+                  ],
+                },
+              },
+            },
+
+          }, {
+            value: 40, name: '氢氧化钠', itemStyle: {
+              normal: {
+                // barBorderRadius: 15,
+                // borderColor: "rgba(255, 206, 0, 1)",
+                // borderWidth: 1,
+
+                color: {
+                  // 完成的圆环的颜色
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: 'rgba(255, 206, 0, 0.3)', // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: 'rgba(255, 206, 0, 1)', // 100% 处的颜色
+                    },
+                  ],
+                },
+              },
+            },
+
+          }],
           label: {
             normal: {
               show: true,
@@ -99,8 +190,8 @@ class LeftMenoyView extends Component {
                 { offset: 1, color: '#ffd01d94' },
               ]),
               barBorderRadius: 15,
-              borderColor: "rgba(255, 206, 0, 1)",
-              borderWidth: 1
+              // borderColor: "rgba(255, 206, 0, 1)",
+              // borderWidth: 1
             }
           },
           labelLine: {
@@ -148,21 +239,22 @@ class LeftMenoyView extends Component {
       var option = {
         title: {
           text: '16%',
-          subtext: '氢氧化锂',
+          subtext: '氢氧化钠',
           x: 'center',
           y: '40%',
           textStyle: {
             color: '#fff',
-            fontSize: 15,
+            fontSize: 20,
             lineHeight: 10,
           },
           subtextStyle: {
-            color: '#90979c',
-            fontSize: 12,
+            color: 'rgba(205, 241, 255, 1)',
+            fontSize: 14,
             lineHeight: 10,
-
+            marginTop: 15,
           },
         },
+
         tooltip: {
           trigger: 'item',
           formatter: "{b} : {c} ({d}%)"
@@ -183,48 +275,98 @@ class LeftMenoyView extends Component {
           center: ['50%', '50%'],
           color: ['rgb(131,249,103)', '#8D93FF', '#2FD2FF', '#FFCE00'], //'#FBFE27','rgb(11,228,96)','#FE5050'
           data: [{
-            "value": 1924,
-            "name": ""
-          }, {
-            "value": 1055,
-            "name": ""
-          }, {
-            "value": 1532,
-            "name": ""
-          }
-          ].sort(function (a, b) {
-            return a.value - b.value
-          }),
-          roseType: 'radius',
-
-          label: {
-            normal: {
-              formatter: ['{c|{c}万}', '{b|{b}}'].join('\n'),
-              rich: {
-                c: {
-                  color: 'rgb(241,246,104)',
-                  fontSize: 12,
-                  fontWeight: 'bold',
-                  lineHeight: 5
+            value: 205,
+            name: '直接访问',
+            itemStyle: {
+              normal: {
+                color: {
+                  // 完成的圆环的颜色
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: 'rgba(141, 147, 255, 0.3)', // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: 'rgba(141, 147, 255, 1)', // 100% 处的颜色
+                    },
+                  ],
                 },
-                b: {
-                  color: 'rgb(98,137,169)',
-                  fontSize: 12,
-                  height: 44
+              },
+            },
+          },
+          {
+            value: 310,
+            name: '邮件营销',
+            itemStyle: {
+              normal: {
+                color: {
+                  // 完成的圆环的颜色
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: 'rgba(105, 255, 222, 0.3)', // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: 'rgba(105, 255, 222, 1)', // 100% 处的颜色
+                    },
+                  ],
                 },
               },
-            }
+            },
           },
-          labelLine: {
-            normal: {
-              lineStyle: {
-                color: 'rgb(98,137,169)',
+          {
+            value: 234,
+            name: '联盟广告',
+            itemStyle: {
+              normal: {
+                color: {
+                  // 完成的圆环的颜色
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: 'rgba(47, 210, 255, 0.3)', // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: 'rgba(47, 210, 255, 1)', // 100% 处的颜色
+                    },
+                  ],
+                },
               },
-              smooth: 0.2,
-              length: 10,
-              length2: 20,
+            },
+          },
+          {
+            value: 135,
+            name: '视频广告学习相',
+            itemStyle: {
+              normal: {
+                barBorderRadius: 15,
+                color: {
+                  // 完成的圆环的颜色
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: 'rgba(255, 206, 0, 0.3)', // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: 'rgba(255, 206, 0, 1)', // 100% 处的颜色
+                    },
+                  ],
+                },
+              },
+            },
+          },
+          ],
+          roseType: 'radius',
 
-            }
+          label: {
+            show: false
+          },
+          labelLine: {
+            show: false
           }
         }]
       };

src/pages/tqcDataVHome/component/rightBottomView.jsx

@@ -2,7 +2,7 @@
  * @Author: dayan_hjm 碳排放
  * @Date: 2023-10-23 09:32:12 
  * @Last Modified by: dayan_hjm
- * @Last Modified time: 2023-10-23 11:12:30
+ * @Last Modified time: 2023-10-30 11:16:36
  */