|
@@ -12,10 +12,10 @@
|
|
|
<div>
|
|
|
<el-row shadow="hover" class="ml10">
|
|
|
<el-form :inline="true" :model="formData" @keyup.enter="query" ref="queryRef">
|
|
|
- <el-form-item>
|
|
|
+ <el-form-item >
|
|
|
<el-date-picker v-model="formData.time" type="daterange" start-placeholder="开始时间" end-placeholder="结束时间" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item prop="appId">
|
|
|
+ <el-form-item prop="appId">
|
|
|
<el-input :placeholder="'请输入应用ID'" clearable v-model="formData.appId" />
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
@@ -259,8 +259,6 @@ function initLineChart(): void {
|
|
|
onMounted(() => {
|
|
|
initLineChart();
|
|
|
initQualityChart();
|
|
|
- console.log(qualityChart);
|
|
|
- initBehaviorChart();
|
|
|
});
|
|
|
|
|
|
watch(timeGranularity, () => {
|
|
@@ -341,61 +339,16 @@ function initQualityChart(): void {
|
|
|
|
|
|
|
|
|
|
|
|
-
|
|
|
-// 用户行为分析(静态)
|
|
|
-const behaviorChartRef = ref<HTMLDivElement | null>(null);
|
|
|
-let behaviorChart: echarts.ECharts | null = null;
|
|
|
-
|
|
|
-const behaviorXAxis = ref<string[]>([
|
|
|
- '2025-07-01',
|
|
|
- '2025-07-08',
|
|
|
- '2025-07-15',
|
|
|
- '2025-07-22',
|
|
|
- '2025-07-29',
|
|
|
- '2025-08-05',
|
|
|
- '2025-08-12',
|
|
|
- '2025-08-19',
|
|
|
- '2025-08-26',
|
|
|
- '2025-09-02',
|
|
|
- '2025-09-09',
|
|
|
- '2025-09-16',
|
|
|
-]);
|
|
|
-
|
|
|
-const activeUsersSeries = ref<number[]>([100, 120, 130, 110, 105, 90, 80, 70, 95, 110, 100, 85]);
|
|
|
-const avgSessionSeries = ref<number[]>([120, 130, 140, 125, 120, 110, 100, 95, 115, 125, 120, 110]);
|
|
|
-const behaviorAvgSeries = ref<number[]>([110, 115, 120, 115, 110, 105, 100, 95, 110, 115, 110, 105]);
|
|
|
-
|
|
|
-function initBehaviorChart(): void {
|
|
|
- if (!behaviorChartRef.value) return;
|
|
|
- if (behaviorChart) behaviorChart.dispose();
|
|
|
- behaviorChart = echarts.init(behaviorChartRef.value);
|
|
|
- const option: echarts.EChartsOption = {
|
|
|
- tooltip: { trigger: 'axis', valueFormatter: (v) => `${v}s` },
|
|
|
- legend: { data: ['活跃用户数', '平均会话时长', '行为均值'] },
|
|
|
- grid: { left: 40, right: 20, top: 30, bottom: 30 },
|
|
|
- xAxis: { type: 'category', data: behaviorXAxis.value },
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- min: 0,
|
|
|
- max: 150,
|
|
|
- axisLabel: { formatter: '{value}s' },
|
|
|
- splitLine: { lineStyle: { color: '#f3f4f6' } },
|
|
|
- },
|
|
|
- series: [
|
|
|
- { name: '活跃用户数', type: 'line', smooth: true, data: activeUsersSeries.value },
|
|
|
- { name: '平均会话时长', type: 'line', smooth: true, data: avgSessionSeries.value, color: '#f59e0b' },
|
|
|
- { name: '行为均值', type: 'line', smooth: true, data: behaviorAvgSeries.value, color: '#60a5fa' },
|
|
|
- ],
|
|
|
- };
|
|
|
- behaviorChart.setOption(option);
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.highlight{
|
|
|
color: #2196f3;
|
|
|
}
|
|
|
+.el-form-item--default{
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
+.el-form.el-form--inline .el-form-item--default.el-form-item:last-of-type, .el-form.el-form--inline .el-form-item--small.el-form-item:last-of-type{
|
|
|
+ margin-bottom: 0 !important;
|
|
|
+}
|
|
|
</style>
|