historic-stock
This commit is contained in:
张 元山
parent
25efd2b071
commit
deb9834cd4
@ -3,8 +3,8 @@ import { computed } from "vue";
|
||||
import { useWindowSize } from "@vueuse/core";
|
||||
|
||||
import size375 from "./size375/index.vue";
|
||||
import size768 from "./size768/index.vue";
|
||||
import size1440 from "./size1440/index.vue";
|
||||
import size768 from "./size1920/index.vue";
|
||||
import size1440 from "./size1920/index.vue";
|
||||
import size1920 from "./size1920/index.vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
@ -1,96 +1,264 @@
|
||||
<script setup>
|
||||
import { NCarousel, NCard } from "naive-ui";
|
||||
import { ref, onMounted } from "vue";
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
// 轮播图片示例
|
||||
const images = [
|
||||
'https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=800&q=80',
|
||||
'https://images.unsplash.com/photo-1465101046530-73398c7f28ca?auto=format&fit=crop&w=800&q=80',
|
||||
'https://images.unsplash.com/photo-1519125323398-675f0ddb6308?auto=format&fit=crop&w=800&q=80',
|
||||
];
|
||||
|
||||
// ECharts 实例
|
||||
const chartRef = ref();
|
||||
let chartInstance = null;
|
||||
|
||||
onMounted(() => {
|
||||
if (chartRef.value) {
|
||||
chartInstance = echarts.init(chartRef.value);
|
||||
chartInstance.setOption({
|
||||
title: { text: '历史数据趋势', left: 'center', textStyle: { color: '#fff', fontSize: 24 } },
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['一月', '二月', '三月', '四月', '五月', '六月'],
|
||||
axisLabel: { color: '#fff' },
|
||||
axisLine: { lineStyle: { color: '#fff' } }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: { color: '#fff' },
|
||||
splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } },
|
||||
axisLine: { lineStyle: { color: '#fff' } }
|
||||
},
|
||||
series: [{
|
||||
data: [120, 200, 150, 80, 70, 110],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0, y: 0, x2: 0, y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(59,130,246,0.5)' },
|
||||
{ offset: 1, color: 'rgba(59,130,246,0)' }
|
||||
]
|
||||
}
|
||||
},
|
||||
lineStyle: { width: 4, color: '#3b82f6' },
|
||||
symbol: 'circle',
|
||||
symbolSize: 12,
|
||||
itemStyle: { color: '#f59e0b', borderColor: '#fff', borderWidth: 2 },
|
||||
animationDuration: 1200
|
||||
}]
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main ref="main" class="relative w-full h-[calc(100vh-120px)] flex flex-col items-center justify-center overflow-hidden bg-gradient-to-br from-[#1e293b] via-[#334155] to-[#0f172a] animate-bg-move">
|
||||
<!-- 背景流动渐变动画 -->
|
||||
<div class="absolute inset-0 -z-1 animate-bg-move bg-gradient-to-tr from-[#2563eb]/60 via-[#9333ea]/40 to-[#f59e0b]/30 blur-2xl opacity-80"></div>
|
||||
<div class="relative z-10 w-full h-full flex flex-1 flex-row items-center justify-center gap-12 px-12 pt-8">
|
||||
<!-- 左侧图片轮播 -->
|
||||
<div class="w-1/3 h-[420px] rounded-3xl shadow-2xl overflow-hidden bg-white/10 backdrop-blur-md animate-bounce-in">
|
||||
<NCarousel autoplay show-arrow effect="card" class="h-full">
|
||||
<img v-for="img in images" :key="img" :src="img" class="object-cover w-full h-full" />
|
||||
</NCarousel>
|
||||
</div>
|
||||
<!-- 右侧信息卡片 -->
|
||||
<div class="w-1/3 h-[420px] flex flex-col justify-between p-8 rounded-3xl bg-white/20 backdrop-blur-2xl shadow-xl animate-blob">
|
||||
<NCard class="bg-transparent border-none shadow-none text-white" content-style="background:transparent;">
|
||||
<template #header>
|
||||
<div class="text-3xl font-bold mb-2 animate-bounce-in">高大上数据看板</div>
|
||||
</template>
|
||||
<div class="text-lg mb-4 animate-delay-200 animate-bounce-in">这里可以放置一些关键指标、简介或实时数据。</div>
|
||||
<ul class="space-y-2">
|
||||
<li class="flex items-center gap-2 animate-delay-400 animate-bounce-in"><span class="i-uil:chart-line text-2xl text-primary"></span> 指标一：<span class="font-bold">12345</span></li>
|
||||
<li class="flex items-center gap-2 animate-delay-600 animate-bounce-in"><span class="i-uil:users-alt text-2xl text-accent"></span> 指标二：<span class="font-bold">6789</span></li>
|
||||
<li class="flex items-center gap-2 animate-delay-600 animate-bounce-in"><span class="i-uil:clock text-2xl text-secondary"></span> 更新时间：<span class="font-bold">2024-06-01</span></li>
|
||||
</ul>
|
||||
</NCard>
|
||||
<div class="historic-data-container">
|
||||
<img src="@/assets/image/historic-stock.png" alt="1" />
|
||||
|
||||
<div class="header">
|
||||
<h1 class="title">Historical Data</h1>
|
||||
<div class="filter-container">
|
||||
<n-dropdown
|
||||
trigger="click"
|
||||
:options="periodOptions"
|
||||
@select="handlePeriodChange"
|
||||
:value="state.selectedPeriod"
|
||||
>
|
||||
<n-button
|
||||
>{{ state.selectedPeriod }} <n-icon><chevron-down-outline /></n-icon
|
||||
></n-button>
|
||||
</n-dropdown>
|
||||
|
||||
<n-dropdown
|
||||
trigger="click"
|
||||
:options="durationOptions"
|
||||
@select="handleDurationChange"
|
||||
:value="state.selectedDuration"
|
||||
>
|
||||
<n-button
|
||||
>{{ state.selectedDuration }}
|
||||
<n-icon><chevron-down-outline /></n-icon
|
||||
></n-button>
|
||||
</n-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 下方 ECharts 图表 -->
|
||||
<div class="relative z-10 w-4/5 h-[320px] mt-12 rounded-3xl bg-white/10 backdrop-blur-md shadow-2xl animate-icon-in flex items-center justify-center">
|
||||
<div ref="chartRef" class="w-full h-full"></div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<n-data-table
|
||||
:columns="columns"
|
||||
:data="state.tableData"
|
||||
:bordered="false"
|
||||
:single-line="false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// 可根据需要自定义更多样式
|
||||
</style>
|
||||
<script setup>
|
||||
import { NDataTable, NButton, NDropdown, NIcon } from "naive-ui";
|
||||
import { reactive, onMounted, h } from "vue";
|
||||
import axios from "axios";
|
||||
import { ChevronDownOutline } from "@vicons/ionicons5";
|
||||
|
||||
// 数据筛选选项
|
||||
const periodOptions = [
|
||||
{ label: "Daily", key: "Daily" },
|
||||
{ label: "Weekly", key: "Weekly" },
|
||||
{ label: "Monthly", key: "Monthly" },
|
||||
{ label: "Quarterly", key: "Quarterly" },
|
||||
{ label: "Annual", key: "Annual" },
|
||||
];
|
||||
|
||||
const durationOptions = [
|
||||
{ label: "3 Months", key: "3 Months" },
|
||||
{ label: "6 Months", key: "6 Months" },
|
||||
{ label: "Year to Date", key: "Year to Date" },
|
||||
{ label: "1 Year", key: "1 Year" },
|
||||
{ label: "5 Years", key: "5 Years" },
|
||||
{ label: "10 Years", key: "10 Years" },
|
||||
];
|
||||
|
||||
const state = reactive({
|
||||
selectedPeriod: "Daily",
|
||||
selectedDuration: "3 Months",
|
||||
tableData: [],
|
||||
});
|
||||
|
||||
// 表格列定义
|
||||
const columns = [
|
||||
{
|
||||
title: "Date",
|
||||
key: "date",
|
||||
align: "left",
|
||||
},
|
||||
{
|
||||
title: "Open",
|
||||
key: "open",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "High",
|
||||
key: "high",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "Low",
|
||||
key: "low",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "Close",
|
||||
key: "close",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "Adj. Close",
|
||||
key: "adjClose",
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "Change",
|
||||
key: "change",
|
||||
align: "center",
|
||||
render(row) {
|
||||
const value = parseFloat(row.change);
|
||||
const color = value < 0 ? "#ff4d4f" : value > 0 ? "#52c41a" : "";
|
||||
return h("span", { style: { color } }, row.change);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Volume",
|
||||
key: "volume",
|
||||
align: "center",
|
||||
},
|
||||
];
|
||||
|
||||
// 处理下拉选项变更
|
||||
const handlePeriodChange = (key) => {
|
||||
state.selectedPeriod = key;
|
||||
getPageData();
|
||||
};
|
||||
|
||||
const handleDurationChange = (key) => {
|
||||
state.selectedDuration = key;
|
||||
getPageData();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getPageData();
|
||||
});
|
||||
|
||||
const getPageData = async () => {
|
||||
try {
|
||||
// 实际项目中应该根据state.selectedPeriod和state.selectedDuration动态调整API请求
|
||||
let url =
|
||||
"https://stockanalysis.com/api/symbol/a/OTC-MINM/history?type=chart";
|
||||
const res = await axios.get(url);
|
||||
|
||||
// 转换API返回的数据为表格需要的格式
|
||||
// 注意：以下是模拟数据，实际应该根据API返回的数据结构调整
|
||||
state.tableData = [
|
||||
{
|
||||
date: "May 22, 2025",
|
||||
open: "1.87",
|
||||
high: "2.03",
|
||||
low: "1.85",
|
||||
close: "2.00",
|
||||
adjClose: "2.00",
|
||||
change: "-2.44%",
|
||||
volume: "2,103",
|
||||
},
|
||||
{
|
||||
date: "May 21, 2025",
|
||||
open: "2.05",
|
||||
high: "2.05",
|
||||
low: "2.05",
|
||||
close: "2.05",
|
||||
adjClose: "2.05",
|
||||
change: "-",
|
||||
volume: "4",
|
||||
},
|
||||
{
|
||||
date: "May 20, 2025",
|
||||
open: "2.05",
|
||||
high: "2.05",
|
||||
low: "1.86",
|
||||
close: "2.05",
|
||||
adjClose: "2.05",
|
||||
change: "-",
|
||||
volume: "11,042",
|
||||
},
|
||||
{
|
||||
date: "May 19, 2025",
|
||||
open: "2.04",
|
||||
high: "2.05",
|
||||
low: "1.85",
|
||||
close: "2.05",
|
||||
adjClose: "2.05",
|
||||
change: "-",
|
||||
volume: "6,204",
|
||||
},
|
||||
{
|
||||
date: "May 16, 2025",
|
||||
open: "2.05",
|
||||
high: "2.06",
|
||||
low: "1.85",
|
||||
close: "2.05",
|
||||
adjClose: "2.05",
|
||||
change: "2.50%",
|
||||
volume: "3,618",
|
||||
},
|
||||
{
|
||||
date: "May 15, 2025",
|
||||
open: "2.05",
|
||||
high: "2.05",
|
||||
low: "1.93",
|
||||
close: "2.00",
|
||||
adjClose: "2.00",
|
||||
change: "-1.48%",
|
||||
volume: "5,413",
|
||||
},
|
||||
{
|
||||
date: "May 14, 2025",
|
||||
open: "1.95",
|
||||
high: "2.05",
|
||||
low: "1.95",
|
||||
close: "2.03",
|
||||
adjClose: "2.03",
|
||||
change: "4.10%",
|
||||
volume: "8,886",
|
||||
},
|
||||
{
|
||||
date: "May 13, 2025",
|
||||
open: "2.26",
|
||||
high: "2.26",
|
||||
low: "1.80",
|
||||
close: "1.95",
|
||||
adjClose: "1.95",
|
||||
change: "-18.41%",
|
||||
volume: "10,750",
|
||||
},
|
||||
];
|
||||
|
||||
console.log("获取到的数据", state.tableData);
|
||||
} catch (error) {
|
||||
console.error("获取数据失败", error);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.historic-data-container {
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.filter-container {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.n-data-table) {
|
||||
.n-data-table-td {
|
||||
padding: 12px 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user