feat : 库存金额自动轮播

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-30 11:14:06
+ * @Last Modified time: 2023-10-30 16:42:23
  */
 
 @import url("../../themes/themes.less");
@@ -1109,7 +1109,35 @@
       text-align: right;
     }
   }
-
+  .testDiv{
+    width: 4em;
+    display: flex;
+    align-items: center;
+    justify-self: center;
+    flex-wrap: wrap;
+    margin-left: -2.5em;
+    margin-top: -2em;
+    .p3{
+      font-size: 0.2em;
+    margin-left: 0.2em;
+    display: inline-block;
+    }
+    .p2{
+      font-size: 0.5em;
+      text-align: center;
+      width: 100%;
+      color:#CDF1FF
+    }
+    .p1{
+      text-align: center;
+    width: 100%;
+    display: flex;
+    align-items: baseline;
+    justify-content: center;
+    font-size: 1.6em;
+  
+    }
+  }
   .leftContent .bottomContent {
     height: 100% !important;
 

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-30 15:03:36
+ * @Last Modified time: 2023-10-30 17:01:39
  */
 
 
@@ -236,139 +236,214 @@ class LeftMenoyView extends Component {
     setTimeout(() => {
       // 基于准备好的dom，初始化echarts实例
       var myChart = echarts.init(document.getElementById('echarts6'));
+      const colorList = ['#ffd813', '#08daaa', '#6571fc'];
+      let index = 0;
+      function fun() {
+        var timer = setInterval(function () {
+          myChart.dispatchAction({
+            type: 'hideTip',
+            seriesIndex: 0,
+            dataIndex: index,
+          });
+          // 显示提示框
+          myChart.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: index,
+          });
+          // 取消高亮指定的数据图形
+          myChart.dispatchAction({
+            type: 'downplay',
+            seriesIndex: 0,
+            dataIndex: index == 0 ? 5 : index - 1,
+          });
+          myChart.dispatchAction({
+            type: 'highlight',
+            seriesIndex: 0,
+            dataIndex: index,
+          });
+          index++;
+          if (index > 5) {
+            index = 0;
+          }
+        }, 1500);
+      }
+      fun();
+      setTimeout(function () {
+        fun();
+      }, 5000);
       var option = {
-        title: {
-          text: '16%',
-          subtext: '氢氧化钠',
-          x: 'center',
-          y: '40%',
+        // //标题
+        // title: {
+        //   text: '16%',
+        //   subtext: '氢氧化钠',
+        //   x: 'center',
+        //   y: '40%',
+        //   textStyle: {
+        //     color: '#fff',
+        //     fontSize: 20,
+        //     lineHeight: 10,
+        //   },
+        //   subtextStyle: {
+        //     color: 'rgba(205, 241, 255, 1)',
+        //     fontSize: 14,
+        //     lineHeight: 10,
+        //     marginTop: 15,
+        //   },
+        // },
+
+        //图例组件
+
+        tooltip: {
+          trigger: 'item',
+          position: ['50%', '50%'],
+          formatter: function (params, ticket, callback) {
+            $.get('detail?name=' + params.name, function (content) {
+              callback(ticket, toHTML(content));
+            });
+            return `<div class="testDiv"><p class="p1">
+              ${params.percent ? params.percent.toFixed() : 0}<spanp class="p3">%</span>
+            </p>
+            <p class="p2">${params.name}</p>
+            </div>`;
+          },
+          backgroundColor: 'black',
+
           textStyle: {
             color: '#fff',
             fontSize: 20,
             lineHeight: 10,
           },
-          subtextStyle: {
-            color: 'rgba(205, 241, 255, 1)',
-            fontSize: 14,
-            lineHeight: 10,
-            marginTop: 15,
-          },
-        },
-        tooltip: {
-          trigger: 'item',
-          formatter: "{b} : {c} ({d}%)"
         },
+        series: [
+          {
+            type: 'pie',
+            radius: ['50%', '65%'],
+            center: ['50%', '50%'],
+            roseType: 'area',
+            //标题与数字一行显示
+            label: {
+              show: false,
 
-        series: [{
-          name: '访问来源',
-          type: 'pie',
-          radius: ['50%', '70%'],
-          center: ['50%', '50%'],
-          color: ['rgb(131,249,103)', '#8D93FF', '#2FD2FF', '#FFCE00'], //'#FBFE27','rgb(11,228,96)','#FE5050'
-          data: [{
-            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% 处的颜色
-                    },
-                  ],
+            },
+
+            //标题与数字分二行显示
+            // label: {
+            //     alignTo: 'edge',
+            //     formatter: '{name|{b}}\n{time|{d}%}',
+            //     minMargin: 5,
+            //     edgeDistance: 10,
+            //     lineHeight: 30,
+            //     rich: {
+            //         time: {
+            //             fontSize: 10,
+            //             color: 'auto'
+            //         }
+            //     }
+            // },
+            labelLine: {
+              show: false
+            },
+
+            data: [{
+              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% 处的颜色
+                      },
+                    ],
+                  },
                 },
               },
             },
-          },
-          {
-            value: 310,
-            name: '邮件营销',
-            itemStyle: {
-              borderCap:'round',
+            {
+              value: 310,
+              name: '氧化锂',
+              itemStyle: {
+                borderCap: 'round',
 
-              normal: {
-                color: {
-                  // 完成的圆环的颜色
-                  colorStops: [
-                    {
-                      offset: 0,
-                      color: 'rgba(105, 255, 222, 0.3)', // 0% 处的颜色
-                    },
-                    {
-                      offset: 1,
-                      color: 'rgba(105, 255, 222, 1)', // 100% 处的颜色
-                    },
-                  ],
+                normal: {
+                  color: {
+                    // 完成的圆环的颜色
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: 'rgba(105, 255, 222, 0.3)', // 0% 处的颜色
+                      },
+                      {
+                        offset: 1,
+                        color: 'rgba(105, 255, 222, 1)', // 100% 处的颜色
+                      },
+                    ],
+                  },
                 },
               },
             },
-          },
-          {
-            value: 234,
-            name: '联盟广告',
-            itemStyle: {
-              borderCap:'round',
+            {
+              value: 234,
+              name: '金属锂',
+              itemStyle: {
+                borderCap: 'round',
 
-              normal: {
-                color: {
-                  // 完成的圆环的颜色
-                  colorStops: [
-                    {
-                      offset: 0,
-                      color: 'rgba(47, 210, 255, 0.3)', // 0% 处的颜色
-                    },
-                    {
-                      offset: 1,
-                      color: 'rgba(47, 210, 255, 1)', // 100% 处的颜色
-                    },
-                  ],
+                normal: {
+                  color: {
+                    // 完成的圆环的颜色
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: 'rgba(47, 210, 255, 0.3)', // 0% 处的颜色
+                      },
+                      {
+                        offset: 1,
+                        color: 'rgba(47, 210, 255, 1)', // 100% 处的颜色
+                      },
+                    ],
+                  },
                 },
               },
             },
-          },
-          {
-            value: 135,
-            name: '视频广告学习相',
-            itemStyle: {
-              borderCap:'round',
+            {
+              value: 135,
+              name: '氢氧化锂',
+              itemStyle: {
+                borderCap: 'round',
 
-              normal: {
-                barBorderRadius: 15,
-                color: {
-                  // 完成的圆环的颜色
-                  colorStops: [
-                    {
-                      offset: 0,
-                      color: 'rgba(255, 206, 0, 0.3)', // 0% 处的颜色
-                    },
-                    {
-                      offset: 1,
-                      color: 'rgba(255, 206, 0, 1)', // 100% 处的颜色
-                    },
-                  ],
+                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
-          }
-        }]
+        ],
       };
 
 
+
       // 使用刚指定的配置项和数据显示图表。
       myChart.setOption(option);
       window.addEventListener("resize", function () {