72 lines
2.3 KiB
PHTML
72 lines
2.3 KiB
PHTML
<?php
|
|
$this->layout('layout/dashboardLayout');
|
|
?>
|
|
|
|
<div id="app">
|
|
<div id="main" style="width: 100%;height:400px;"></div>
|
|
</div>
|
|
|
|
<script>
|
|
const { createApp, reactive, onMounted } = Vue
|
|
|
|
createApp({
|
|
setup() {
|
|
const state = reactive({
|
|
dataProvider: {},
|
|
searchDataProvider: {
|
|
params: '1'
|
|
}
|
|
})
|
|
|
|
onMounted(() => {
|
|
var chartDom = document.getElementById('main');
|
|
var myChart = echarts.init(chartDom);
|
|
var option;
|
|
option = {
|
|
title: {
|
|
text: '请求数量'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['00-01', '01-02', '02-03', '03-04', '04-05', '05-06', '06-07', '07-08', '08-09', '09-10', '10-11', '11-12', '12-13','13-14', '14-15', '15-16', '16-17', '17-18', '18-19', '19-20', '20-21', '21-22', '22-23']
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
<?php foreach ($data as $item): ?>
|
|
{
|
|
name: '<?= $item['name'] ?>',
|
|
data: [<?= implode(',', $item['data']) ?>],
|
|
type: 'line'
|
|
},
|
|
<?php endforeach; ?>
|
|
]
|
|
};
|
|
myChart.setOption(option);
|
|
})
|
|
|
|
function fetchData() {
|
|
fetch('/api/dashboard/form-log', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
|
|
},
|
|
body: Qs.stringify(state.searchDataProvider)
|
|
}).then(res => res.json()).then(res => {
|
|
state.dataProvider = res.data
|
|
console.log(res)
|
|
})
|
|
}
|
|
return {
|
|
fetchData,
|
|
state
|
|
}
|
|
}
|
|
}).mount('#app')
|
|
</script>
|