123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143 |
- <template>
- <div class="chart-container">
- <h3>整体设备借用次数趋势</h3>
-
- <div class="filter-bar">
- <button
- v-for="range in ranges"
- :key="range.value"
- :class="{ active: selectedRange === range.value }"
- @click="selectedRange = range.value"
- >
- {{ range.label }}
- </button>
- </div>
-
- <div v-if="hasData">
- <v-chart :option="chartOption" autoresize style="height: 300px;" />
- </div>
- <div v-else class="empty-tip">暂无数据</div>
- </div>
- </template>
-
- <script setup lang="ts">
- import { ref, computed, watch, onMounted } from 'vue'
- import VChart from 'vue-echarts'
- import { use } from 'echarts/core'
- import {
- CanvasRenderer
- } from 'echarts/renderers'
- import {
- LineChart
- } from 'echarts/charts'
- import {
- TitleComponent,
- TooltipComponent,
- GridComponent,
- LegendComponent
- } from 'echarts/components'
- import * as api from '../api'
-
- use([
- CanvasRenderer,
- LineChart,
- TitleComponent,
- TooltipComponent,
- GridComponent,
- LegendComponent
- ])
-
- interface BorrowTrend {
- date: string
- borrow_count: number
- total_duration: number
- }
-
- const ranges = [
- { label: '近一周', value: 'week' },
- { label: '近一个月', value: 'month' },
- { label: '近一年', value: 'year' }
- ]
-
- const selectedRange = ref('week')
- const rawData = ref<BorrowTrend[]>([])
-
- const fetchData = async () => {
- // const res = await api.GetBorrowTrends(selectedRange.value)
- const res = await api.GetBorrowTrends()
- if (res.code === 2000) {
- rawData.value = res.data.trends
- } else {
- rawData.value = []
- }
- }
-
- watch(selectedRange, fetchData)
- onMounted(fetchData)
-
- const hasData = computed(() => rawData.value.length > 0)
-
- const chartOption = computed(() => {
- const dates = rawData.value.map(item => item.date)
- const borrowCounts = rawData.value.map(item => item.borrow_count)
- const durations = rawData.value.map(item => item.total_duration)
-
- return {
- tooltip: {
- trigger: 'axis'
- },
- legend: {
- data: ['借用次数', '使用时长']
- },
- xAxis: {
- type: 'category',
- data: dates
- },
- yAxis: {
- type: 'value',
- name: '数量'
- },
- series: [
- {
- name: '借用次数',
- type: 'line',
- data: borrowCounts,
- smooth: true
- },
- {
- name: '使用时长',
- type: 'line',
- data: durations,
- smooth: true
- }
- ]
- }
- })
- </script>
-
- <style scoped>
- .chart-container {
- width: 100%;
- margin: 0 auto;
- }
- .filter-bar {
- margin-bottom: 10px;
- }
- .filter-bar button {
- margin-right: 8px;
- padding: 6px 12px;
- border: none;
- background: #eee;
- cursor: pointer;
- }
- .filter-bar button.active {
- background: #409eff;
- color: white;
- }
- .empty-tip {
- text-align: center;
- color: #999;
- padding: 20px;
- }
- </style>
-
|