修改页面结构
This commit is contained in:
370
pages/dashboard/UserTrendChart.uvue
Normal file
370
pages/dashboard/UserTrendChart.uvue
Normal file
@@ -0,0 +1,370 @@
|
||||
<template>
|
||||
<view class="chart-container">
|
||||
<!-- 图表标题与切换 -->
|
||||
<view class="chart-header">
|
||||
<view class="header-left">
|
||||
<view class="title-icon">
|
||||
<text class="iconfont">≡</text>
|
||||
</view>
|
||||
<text class="chart-title">用户增长趋势</text>
|
||||
</view>
|
||||
|
||||
<view class="chart-controls">
|
||||
<view
|
||||
v-for="p in periods"
|
||||
:key="p.value"
|
||||
class="seg-btn"
|
||||
:class="{ active: range === p.value }"
|
||||
@click="changeRange(p.value)"
|
||||
>
|
||||
<text class="seg-btn-text">{{ p.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 图表内容 -->
|
||||
<view class="chart-body">
|
||||
<view class="axis-titles">
|
||||
<text class="axis-title">新增用户 (人)</text>
|
||||
</view>
|
||||
|
||||
<view class="chart-view-wrapper">
|
||||
<EChartsView
|
||||
v-if="!loading && chartOption"
|
||||
:option="chartOption"
|
||||
class="echarts-view"
|
||||
/>
|
||||
|
||||
<!-- Loading 状态 -->
|
||||
<view v-if="loading" class="loading-state">
|
||||
<text class="loading-text">加载中...</text>
|
||||
</view>
|
||||
|
||||
<!-- 空数据状态 -->
|
||||
<view v-if="!loading && trendData.length === 0" class="empty-state">
|
||||
<text class="empty-text">暂无趋势数据</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref, computed, onMounted, watch } from 'vue'
|
||||
import EChartsView from '@/uni_modules/charts/EChartsView.vue'
|
||||
import { UserTrend } from '@/types/charts.uts'
|
||||
|
||||
/**
|
||||
* UserTrendChart 用户趋势图
|
||||
* 展示日粒度用户增长，采用平滑曲线面积图
|
||||
*/
|
||||
|
||||
// --- 状态定义 ---
|
||||
const loading = ref(false)
|
||||
const range = ref('7d')
|
||||
const trendData = ref<UserTrend[]>([])
|
||||
|
||||
const periods = [
|
||||
{ label: '7天', value: '7d' },
|
||||
{ label: '30天', value: '30d' }
|
||||
]
|
||||
|
||||
// --- ECharts 配置计算属性 ---
|
||||
const chartOption = computed(() : any => {
|
||||
if (trendData.value.length === 0) return null
|
||||
|
||||
const xData = trendData.value.map(item => item.date)
|
||||
const yData = trendData.value.map(item => item.count)
|
||||
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
lineStyle: { color: '#1890ff', type: 'dashed' }
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '10%',
|
||||
top: '5%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: xData,
|
||||
axisLine: { lineStyle: { color: '#f0f0f0' } },
|
||||
axisLabel: {
|
||||
color: '#999',
|
||||
fontSize: 10,
|
||||
rotate: xData.length > 7 ? 45 : 0
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: { lineStyle: { type: 'dashed', color: '#f5f5f5' } },
|
||||
axisLabel: { color: '#999', fontSize: 10 }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '新增用户',
|
||||
type: 'line',
|
||||
data: yData,
|
||||
smooth: true, // 平滑折线
|
||||
showSymbol: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
itemStyle: {
|
||||
color: '#1890ff',
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: '#1890ff'
|
||||
},
|
||||
// 区域填充效果
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0, y: 0, x2: 0, y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(24, 144, 255, 0.25)' },
|
||||
{ offset: 1, color: 'rgba(24, 144, 255, 0)' }
|
||||
]
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
// --- 方法定义 ---
|
||||
|
||||
const changeRange = (v: string) => {
|
||||
range.value = v
|
||||
}
|
||||
|
||||
/**
|
||||
* 模拟接口请求
|
||||
* 使用 useRequest 模式的封装
|
||||
*/
|
||||
const fetchData = (r: string) => {
|
||||
loading.value = true
|
||||
|
||||
// 模拟业务逻辑
|
||||
setTimeout(() => {
|
||||
const mockData: UserTrend[] = []
|
||||
const count = r === '7d' ? 7 : 30
|
||||
const now = new Date()
|
||||
|
||||
for (let i = count - 1; i >= 0; i--) {
|
||||
const d = new Date(now.getTime() - i * 24 * 60 * 60 * 1000)
|
||||
mockData.push({
|
||||
date: `${(d.getMonth() + 1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')}`,
|
||||
count: Math.floor(Math.random() * 80) + (i % 7 === 0 ? 50 : 20)
|
||||
} as UserTrend)
|
||||
}
|
||||
|
||||
trendData.value = mockData
|
||||
loading.value = false
|
||||
}, 800)
|
||||
}
|
||||
|
||||
// 暴露方法给外部调用
|
||||
defineExpose({
|
||||
refresh: () => fetchData(range.value)
|
||||
})
|
||||
|
||||
// --- 生命周期与监听 ---
|
||||
onMounted(() => {
|
||||
fetchData(range.value)
|
||||
})
|
||||
|
||||
watch(range, (newVal) => {
|
||||
fetchData(newVal)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.chart-container {
|
||||
background: #ffffff;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #f0f0f0;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.title-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: #e6f7ff;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.chart-controls {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.seg-btn {
|
||||
height: 26px;
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-left: 1px solid #d9d9d9;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.seg-btn:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.seg-btn.active {
|
||||
background: #1890ff;
|
||||
border-color: #1890ff;
|
||||
}
|
||||
|
||||
.seg-btn-text {
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.seg-btn.active .seg-btn-text {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.chart-body {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.axis-titles {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.axis-title {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.chart-view-wrapper {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.echarts-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.loading-state, .empty-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.loading-text, .empty-text {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
||||
// --- Data Fetching ---
|
||||
const fetchTrendData = () => {
|
||||
loading.value = true
|
||||
// 模拟 API 请求: GET /api/user/trend
|
||||
setTimeout(() => {
|
||||
const mock: UserTrend[] = []
|
||||
const now = new Date()
|
||||
for (let i = 14; i >= 0; i--) {
|
||||
const d = new Date(now.getTime() - i * 24 * 60 * 60 * 1000)
|
||||
mock.push({
|
||||
date: `${(d.getMonth() + 1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')}`,
|
||||
count: Math.floor(Math.random() * 50) + 20 + (i === 5 ? 100 : 0)
|
||||
})
|
||||
}
|
||||
trendData.value = mock
|
||||
loading.value = false
|
||||
}, 600)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchTrendData()
|
||||
})
|
||||
|
||||
// 暴露刷新接口
|
||||
defineExpose({
|
||||
refresh: fetchTrendData
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.chart-wrapper {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.echarts-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.loading-overlay, .empty-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(255,255,255,0.6);
|
||||
}
|
||||
|
||||
.loading-text, .empty-text {
|
||||
color: #999;
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user