From d654d3fce62d44dc6ed410fe355ebb0e20bd797b Mon Sep 17 00:00:00 2001
From: MaZen <phpreaper@163.com>
Date: Tue, 3 Sep 2024 20:11:06 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=B5=8B=E8=AF=95=E7=89=88?=
 =?UTF-8?q?=E5=88=86=E5=AD=90=E5=88=86=E6=AF=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Chart/FullPaymentRateColumnCharts.php     | 35 +++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/app/Admin/Metrics/Chart/FullPaymentRateColumnCharts.php b/app/Admin/Metrics/Chart/FullPaymentRateColumnCharts.php
index 548eea3..d640f5b 100644
--- a/app/Admin/Metrics/Chart/FullPaymentRateColumnCharts.php
+++ b/app/Admin/Metrics/Chart/FullPaymentRateColumnCharts.php
@@ -10,6 +10,7 @@ use App\Models\PaymentList;
 use App\Models\SecondaryCollege;
 use App\Models\Speciality;
 use App\Models\UsersMember;
+use Dcat\Admin\Support\JavaScript;
 use Dcat\Admin\Widgets\ApexCharts\Chart;
 use Illuminate\Support\Facades\DB;
 
@@ -32,12 +33,15 @@ class FullPaymentRateColumnCharts extends Chart
                 "height"=>350, //高度
                 "type"=>"bar", //chart 类型
             ],
+
         ]);
 
-        $data = [[
+        $data = [
+            [
             "name" => "缴费率",
             "data" => [],
-        ]];
+            ]
+        ];
         $label = [];
 
         // 执行你的数据查询逻辑
@@ -129,5 +133,32 @@ class FullPaymentRateColumnCharts extends Chart
         $this->option("labels",$label);
         $this->option("yaxis",["max" => 100]); //Y轴最大值
 
+        $this->option(
+            'tooltip.custom',
+            JavaScript::make("function({ series, seriesIndex, dataPointIndex, w }) {
+                        <div class=\"apexcharts-tooltip apexcharts-theme-light\" style=\"left: 392.603px; top: 29.6094px;\">
+                        <div class=\"apexcharts-tooltip-title\" style=\"font-family: Helvetica, Arial, sans-serif; font-size: 12px;\">
+                            信息工程学院</div>
+                        <div class=\"apexcharts-tooltip-series-group apexcharts-active\" style=\"display: flex;\">
+                        <span class=\"apexcharts-tooltip-marker\" style=\"background-color: rgb(0, 143, 251);\">
+                        </span>
+                        <div class=\"apexcharts-tooltip-text\" style=\"font-family: Helvetica, Arial, sans-serif; font-size: 12px;\">
+                        <div class=\"apexcharts-tooltip-y-group\">
+                        <span class=\"apexcharts-tooltip-text-label\">缴费率: </span>
+                        <span class=\"apexcharts-tooltip-text-value\">87.65</span>
+                        </div>
+                        <div class=\"apexcharts-tooltip-z-group\">
+                        <span class=\"apexcharts-tooltip-text-z-label\">
+                        </span>
+                        <span class=\"apexcharts-tooltip-text-z-value\">
+                        </span>
+                        </div>
+                        </div>
+                        </div>
+                        </div>
+                    }")  //  这个值最后段代码会作为JS代码执行
+        );
+
+
     }
 }