效果
自主准备静态文件
Admin::js('static/daterangepicker/moment.min.js');
Admin::js('static/daterangepicker/daterangepicker.js');
Admin::css('static/daterangepicker/daterangepicker.css');
代码
<?php
namespace App\Admin\Widgets\ECharts;
use Dcat\Admin\Widgets\Widget;
use Illuminate\Contracts\Support\Renderable;
use Dcat\Admin\Admin;
class EChartsWithTimePicker extends Widget implements Renderable
{
protected $id;
protected $dataUrl;
protected $option;
protected $from;
protected $to;
protected $width;
protected $height;
protected $fields;
public function __construct($dataUrl, $option = [], $from = '', $to = '', $width = '100%', $height = '400px', $fields = [],$id=null)
{
// $this->id = 'echarts_'.uniqid();
$this->id = 'echarts_dgyun_v1'.($id ?? '');
$this->dataUrl = $dataUrl;
$this->option = $option;
$this->from = $from;
$this->to = $to;
$this->width = $width;
$this->height = $height;
$this->fields = $fields;
}
function staticFile()
{
Admin::js('static/daterangepicker/moment.min.js');
Admin::js('static/daterangepicker/daterangepicker.js');
Admin::css('static/daterangepicker/daterangepicker.css');
}
public function render()
{
$this->staticFile();
$option = json_encode($this->option, JSON_UNESCAPED_UNICODE);
$dataUrl = $this->dataUrl;
$from = $this->from;
$to = $this->to;
$fieldsHtml = '';
foreach($this->fields as $f){
$k = htmlspecialchars($f['key']);
$ph = isset($f['placeholder']) ? htmlspecialchars($f['placeholder']) : '';
$fieldsHtml .= "<input type='text' id=\"{$this->id}_{$k}\" class='form-control' style='width:140px;' placeholder='{$ph}'> ";
}
$html = <<<HTML
<div class="form-inline mb-3">
{$fieldsHtml}
<input type="text" id="{$this->id}_date" value="{$from} - {$to}" class="form-control" style="width:230px;">
<button class="btn btn-primary" id="{$this->id}_refresh">查询</button>
</div>
<div id="{$this->id}" style="width:{$this->width}; height:{$this->height};"></div>
HTML;
$fieldsJs = '';
foreach($this->fields as $f){
$k = addslashes($f['key']);
$fieldsJs .= "params['{$k}'] = $('#{$this->id}_{$k}').val();";
}
$js = <<<JS
Dcat.triggerReady();
Dcat.ready(function(){
var option_{$this->id} = {$option};
if (document.getElementById('{$this->id}')){
var chart_{$this->id} = echarts.init(document.getElementById('{$this->id}'));
chart_{$this->id}.setOption(option_{$this->id});
}
// 初始化daterange
if (document.getElementById('{$this->id}_date')){
$('#{$this->id}_date').daterangepicker({
ranges: {
'今天': [moment(), moment()],
'昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'最近7天': [moment().subtract(6, 'days'), moment()],
'最近30天': [moment().subtract(29, 'days'), moment()],
'本月': [moment().startOf('month'), moment().endOf('month')],
'上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
autoApply: true,
locale: {
format: 'YYYY-MM-DD',
applyLabel: '确定',
cancelLabel: '取消',
fromLabel: '起始时间',
toLabel: '结束时间',
customRangeLabel: '自定义',
daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
firstDay: 1
},
maxDate: moment(),
startDate: '{$from}',
endDate: '{$to}'
});
}
$('#{$this->id}_refresh').click(function(){
var params = {};
var range = $('#{$this->id}_date').val().split(' - ');
params['from'] = range[0];
params['to'] = range[1];
{$fieldsJs}
var q = Object.keys(params).map(function(key){return key+'='+encodeURIComponent(params[key]);}).join('&');
var url = '{$dataUrl}' + (q ? ('?' + q) : '');
fetch(url)
.then(response => response.json())
.then(res => {
if (res.option) {
console.log('ajax返回.option', res.option);
chart_{$this->id}.setOption(res.option, true);
} else {
Dcat.error('没有获取到数据');
}
})
.catch(err => {
Dcat.error('请求失败');
});
});
});
JS;
Admin::script($js);
return $html;
}
}
使用方法
public function index(Content $content)
{
$from = now()->format('Y-m-d');
$to = now()->format('Y-m-d');
$option =[
'title' => ['text' => ''],
'tooltip' => ['trigger' => 'axis'],
'legend' => ['data' => []],
'xAxis' => [
'type' => 'category',
'boundaryGap' => false,
'data' => [],
],
'yAxis' => ['type' => 'value'],
'series' => [],
];
$widget = new EChartsWithTimePicker(
admin_url('/you_api'),
$option, $from, $to, '100%', '600px',[
['key'=>'ip', 'placeholder'=>'IP'],
['key'=>'name', 'placeholder'=>'名称'],
],'my_id'
);
return $content->header('图表')->body($widget);
}
