HNWelcomeSystemAdminDcat/app/Admin/Metrics/Examples/Follow/AllCollegesCharts.php

<?php

namespace App\Admin\Metrics\Examples\Follow;

use App\Models\AdmissionNewStudents;
use App\Models\CompletedOfflineStep;
use App\Models\Config;
use App\Models\OfflineStep;
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;

class AllCollegesCharts extends Chart
{
    //各二级学院女生报道率
    public function __construct($containerSelector = null, $options = [])
    {
        parent::__construct($containerSelector, $options);

        $this->setUpOptions();
    }


    //初始化方法，主要是调用$this->options()方法，执行整个option的初始化操作。
    protected function setUpOptions()
    {
        $this->options([
            "chart"=>[
                "height"=>300, //高度
                "type"=>"bar", //chart 类型
            ],
        ]);

        $data = [[
            "name" => "总人数",
            "data" => [],
            "tooltip" => [
                [
                    "name" => "男生",
                    "data" => [],
                    "color" => '#ff6b6b'
                ],
                [
                    "name" => "女生",
                    "data" => [],
                    "color"=>"#a21919"
                ]
            ],
        ]];
        $label = [];

        // 执行你的数据查询逻辑
        //取出当前年份
        $config = Config::query()->where([
            "unique_identification" => "annual_session"
        ])->first();

        //二级学院
        $list = SecondaryCollege::query()->where([
            "status" => SecondaryCollege::STATUS_YES
        ])->get(["id", "name"])->toArray();

        //不为空时
        if(!empty($list)){
            // 新生数据
            $studentsIds = AdmissionNewStudents::query()->where(["is_new_student" => "1"])->pluck('idCard')->toArray();

            foreach($list as $key => $item){
                $all = UsersMember::query()
                    ->whereIn("idcard", $studentsIds)
                    ->where("enroll_status", 1)
                    ->where(function ($query)use($item) {
                        $specialityIds = Speciality::query()->where("secondary_college_id", $item['id'])->pluck('id')->toArray();
                        $query->whereIn('speciality_id', $specialityIds);
                    })
                    ->select('sex', DB::raw('count(*) as total'))
                    ->groupBy('sex')
                    ->pluck('total', 'sex')
                    ->toArray();

                $list[$key]["registering"] = array_sum($all);
                $list[$key]["studentsNum"] = $all[1] ?? 0;
                $list[$key]["completedOfflineStep"] = $all[2] ?? 0;
            }


            foreach($list as $item){
                array_push($label, $item["name"]);
                if(!empty($item["registering"])){
                    array_push($data[0]["data"], $item["registering"]);
                    array_push($data[0]['tooltip'][0]['data'], $item["studentsNum"]);
                    array_push($data[0]['tooltip'][1]['data'], $item["completedOfflineStep"]);
                }else{
                    array_push($data[0]["data"], 0);
                    array_push($data[0]['tooltip'][0]['data'], 0);
                    array_push($data[0]['tooltip'][1]['data'], 0);
                }
            }
        }


        $this->option("series",$data);
        $this->option("labels",$label);
        $this->option("yaxis",["max" => 2000]); //Y轴最大值

        $tooltipCustomFunction = <<<JS
function({ series, seriesIndex, dataPointIndex, w }) {

    let newStr = "";
    w.config.series[0].tooltip.forEach(item=>{
        newStr += `<div style="display: flex;padding: 0 10px;align-items: center;margin-top: 8px;">
                <div style="width:12px;height:12px;border-radius:50%;background-color: \${item.color};margin-right: 10px;">

                </div>
                <div style="font-size: 12px;">
                    \${item.name}: \${item.data[dataPointIndex]}
                </div>
            </div>`
    })

    return `
        <div style=' border: 1px solid #e3e3e3; background: rgba(255, 255, 255, 0.96); border-radius: 5px; box-shadow: 2px 2px 6px -4px #999; font-size: 14px;'>
            <div style='padding:6px;background: #ECEFF1;border-bottom: 1px solid #ddd;font-size:12px;'>\${w.config.labels[dataPointIndex]}</div>
            <div style="display: flex;padding: 0 10px;align-items: center; margin-top: 8px;">
                <div style="width:12px;height:12px;border-radius:50%;background-color: rgb(0, 143, 251);margin-right: 10px;">

                </div>
                <div style="font-size: 12px;">
                    \${w.config.series[0].name}: \${w.config.series[0].data[dataPointIndex]}
                </div>
            </div>
            \${newStr}
        </div>
    `;
}
JS;

        $this->option('tooltip.custom', JavaScript::make($tooltipCustomFunction));
    }
}