lianjie_admin/app/Admin/Actions/Metrics/Distance.php

<?php


namespace App\Admin\Actions\Metrics;


use Dcat\Admin\Admin;
use Dcat\Admin\Widgets\Metrics\Round;

class Distance extends Round
{
    protected $distance;
    protected $number;
    public function __construct($distance, $number)
    {
        $this->distance = $distance;
        $this->number = $number;
        parent::__construct($title=null, $icon=null);
    }

    /**
     * 初始化卡片内容
     */
    protected function init()
    {
        parent::init();
        $this->height = 160;
        $this->style('padding-top:0');
        $this->chartLabels(['1km以内', '1-3km', '3km以上']);
    }


    /**
     * 渲染模板
     *
     * @return string
     */
    public function render()
    {
        $this->fill();
        Admin::script($this->script());
        return parent::render();
    }

    public function script()
    {
        return <<<JS
         $('#shipping').parent().parent().parent().parent().prev().addClass('pt-0');
JS;
    }


    /**
     * 写入数据.
     *
     * @return void
     */
    public function fill()
    {
        $this->withContent($this->distance[0], $this->distance[1],$this->distance[2]);
        // 图表数据
        $this->withChart([
            $this->distance[0]>0?sprintf("%.2f",($this->distance[0]/$this->number)*100):0,
            $this->distance[0]>0?sprintf("%.2f",($this->distance[1]/$this->number)*100):0,
            $this->distance[0]>0?sprintf("%.2f",($this->distance[2]/$this->number)*100):0,
        ]);

        // 总数
        $this->chartTotal('总数', $this->number);
    }


    /**
     * 设置图表数据.
     *
     * @param array $data
     *
     * @return $this
     */
    public function withChart(array $data)
    {
        return $this->chart([
            'series' => $data,
        ]);
    }

    /**
     * 卡片内容.
     *
     * @param int $finished
     * @param int $pending
     * @param int $rejected
     *
     * @return $this
     */
    public function withContent($d1, $d2, $d3)
    {
        return $this->content(
            <<<HTML
<div class="col-12 d-flex flex-column flex-wrap text-center" id="shipping" style="max-width: 220px;">
    <div class="chart-info d-flex justify-content-between mb-1 mt-2">
          <div class="series-info d-flex align-items-center">
              <i class="fa fa-circle-o text-bold-700 text-primary"></i>
              <span class="text-bold-600 ml-50">1km以内</span>
          </div>
          <div class="product-result">
              <span>{$d1}</span>
          </div>
    </div>

    <div class="chart-info d-flex justify-content-between mb-1">
          <div class="series-info d-flex align-items-center">
              <i class="fa fa-circle-o text-bold-700 text-warning"></i>
              <span class="text-bold-600 ml-50">1-3km</span>
          </div>
          <div class="product-result">
              <span>{$d2}</span>
          </div>
    </div>

     <div class="chart-info d-flex justify-content-between mb-1">
          <div class="series-info d-flex align-items-center">
              <i class="fa fa-circle-o text-bold-700 text-danger"></i>
              <span class="text-bold-600 ml-50">3km以上</span>
          </div>
          <div class="product-result">
              <span>{$d3}</span>
          </div>
    </div>
</div>
HTML
        );
    }
}