1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| <template>
| <div class="art-card h-105 p-4 box-border mb-5 max-sm:mb-4">
| <ArtBarChart
| class="box-border p-2"
| barWidth="50%"
| height="13.7rem"
| :showAxisLine="false"
| :data="chartData"
| :xAxisData="xAxisLabels"
| />
| <div class="ml-1">
| <h3 class="mt-5 text-lg font-medium">用户概述</h3>
| <p class="mt-1 text-sm">比上周 <span class="text-success font-medium">+23%</span></p>
| <p class="mt-1 text-sm">我们为您创建了多个选项，可将它们组合在一起并定制为像素完美的页面</p>
| </div>
| <div class="flex-b mt-2">
| <div class="flex-1" v-for="(item, index) in list" :key="index">
| <p class="text-2xl text-g-900">{{ item.num }}</p>
| <p class="text-xs text-g-500">{{ item.name }}</p>
| </div>
| </div>
| </div>
| </template>
|
| <script setup>
| const xAxisLabels = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月']
| const chartData = [160, 100, 150, 80, 190, 100, 175, 120, 160]
| const list = [
| { name: '总用户量', num: '32k' },
| { name: '总访问量', num: '128k' },
| { name: '日访问量', num: '1.2k' },
| { name: '周同比', num: '+5%' }
| ]
| </script>
|
|
