update

module/Application/view/dashboard/analysisResponseTime.phtml

@@ -0,0 +1,105 @@
+<?php
+$this->layout('layout/dashboardLayout');
+?>
+
+<div id="app">
+    <div id="main" style="width: 100%;height:400px;"></div>
+    <div class="panel panel-default">
+        <!-- Table -->
+        <table class="table">
+            <thead>
+            <tr>
+                <th style="width: 100px">id</th>
+                <th>请求参数</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr v-for="(item, index) in state.dataProvider">
+                <td>{{ index }}</td>
+                <td>{{ item }}</td>
+            </tr>
+            </tbody>
+        </table>
+    </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 = {
+                    color: ['#91cc75', '#ee6666'],
+                    tooltip: {
+                        trigger: 'axis',
+                        axisPointer: {
+                            // Use axis to trigger tooltip
+                            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
+                        }
+                    },
+                    legend: {},
+                    xAxis: {
+                        type: 'value'
+                    },
+                    yAxis: {
+                        type: 'category',
+                        data: ['<?= implode("','", $title) ?>']
+                    },
+                    series: [
+                        {
+                            name: '正常请求',
+                            type: 'bar',
+                            stack: 'total',
+                            label: {
+                                show: true
+                            },
+                            data: [<?= implode(',', \Application\Service\Extension\Helper\ArrayHelper::getColumn($data, 'normal')) ?>]
+                        },
+                        {
+                            name: '慢请求',
+                            type: 'bar',
+                            stack: 'total',
+                            label: {
+                                show: true
+                            },
+                            data: [<?= implode(',', \Application\Service\Extension\Helper\ArrayHelper::getColumn($data, 'slow')) ?>]
+                        },
+                    ]
+                };
+                myChart.setOption(option);
+                myChart.on('click', function(event) {
+                    console.log(event.name)
+                    fetchData(event.name)
+                });
+            })
+
+            function fetchData(url) {
+                fetch('/api/dashboard/analysisResponseTime?url=' + url, {
+                    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>