修改ui

src/views/dashboard/charts/RightChartBase.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-04-28 13:42:51
- * @LastEditTime: 2024-06-28 09:28:56
+ * @LastEditTime: 2024-07-03 14:13:59
  * @LastEditors: zhp
  * @Description:
 -->
@@ -79,22 +79,23 @@ export default {
               color: "rgba(237,237,237,0.5)",
             },
           },
+          extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
+          backgroundColor: '#001829',
+          borderColor: '#001829',
           formatter: params => {
-            // 获取xAxis data中的数据
-            let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>`
-            params.forEach(item => {
-              let color = Object.prototype.toString.call(item.color) == "[object String]" ? item.color : item.color.colorStops ? item.color.colorStops[0].color : ''
-              console.log(item.color, color);
-              dataStr += `<div>
-          <div style="margin: 0 8px;">
-            <span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${color};"></span>
-            <span>${item.seriesName}</span>
-            <span style="float:right;color:#000000;margin-left:20px;">${item.data}</span>
-          </div>
-        </div>`
-            })
-            return dataStr
-          }
+            console.log('params', params)
+            var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
+            for (var i = 0, l = params.length; i < l; i++) {
+              let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
+              // console.log(item.color, color);
+              res +=
+                "<br/>" +
+                `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
+                `<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
+                `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
+            }
+            return res;
+          },
         },
         xAxis: {
           axisTick: {