Price Target Fan
使用从共同起点延伸的目标路径比较价格预测。
适用场景
- 当界面需要以下行为时使用 Price Target Fan：使用从共同起点延伸的目标路径比较价格预测。
安装
选择安装方式，用法示例将同步更新导入路径。
$ bunx --bun shadcn-vue@2.8.2 add https://orvui.efu.me/r/price-target-fan.json
首次使用时，将安装的 src/components/orvui/styles.css 导入项目样式入口。
示例
预览
$205.00+14.8%Mean target
| Observation | Price | Analysts |
|---|---|---|
| 2025-09-14 | $158.40 | |
| 2025-10-14 | $164.20 | |
| 2025-11-14 | $160.80 | |
| 2025-12-14 | $173.10 | |
| 2026-01-14 | $170.60 | |
| 2026-02-14 | $181.30 | |
| 2026-03-14 | $175.80 | |
| 2026-04-14 | $183.70 | |
| 2026-05-14 | $178.20 | |
| 2026-06-14 | $184.10 | |
| 2026-07-14 | $180.50 | |
| 2026-08-14 | $177.30 | |
| 2026-09-14 | $178.52 | |
| Current | $178.52 | |
| High target | $232.00 | 9 |
| Mean target | $205.00 | 34 |
| Low target | $168.00 | 6 |
packages/vue/src/charts/price-target-fan/demo.vue
<script setup lang="ts">
import { PriceTargetFan, type PriceTarget } from "@/components/orvui/charts/price-target-fan";
const prices = [
158.4, 164.2, 160.8, 173.1, 170.6, 181.3, 175.8, 183.7, 178.2, 184.1, 180.5,
177.3, 178.52,
];
const history = prices.map((price, index) => ({
date: new Date(Date.UTC(2025, 8 + index, 14)).toISOString().slice(0, 10),
price,
}));
const targets: [PriceTarget, PriceTarget, PriceTarget] = [
{ key: "High", price: 232, analysts: 9 },
{ key: "Mean", price: 205, analysts: 34 },
{ key: "Low", price: 168, analysts: 6 },
];
</script>
<template>
<PriceTargetFan
:current="178.52"
:history="history"
:targets="targets"
:dates="{ horizon: 'Sep 2027' }"
/>
</template>
packages/vue/src/charts/price-target-fan/src/PriceTargetFan.vue
状态与事件
需要由表单、路由或父组件管理时，绑定下列状态并接收对应更新。v-model 是属性与 update 事件的简写；值的类型应与 API 一致。
| 组件 | Vue 绑定 | 更新事件 |
|---|---|---|
PriceTargetFan | v-model:activenull | { type: "history"; date: string; } | { type: "target"; key: string; } | update:active |
可选受控属性未传入时，按组件文档的默认行为工作；不要用固定的 false 或空值代替未传入。异步请求和持久化在应用中处理，再把结果传回组件。
API 参考
PriceTargetFan
label?stringAccessible name of the chart.
"Price target · 12 months"currentnumberLast traded price; the history walks to this point.
—targets[PriceTarget, PriceTarget, PriceTarget]High, mean and low targets, in that order.
—dates?{ start?: string; mid?: string; horizon?: string; }Axis labels, oldest to horizon.
{}history?PriceHistoryPoint[]Actual prices, oldest first, using ISO dates. Empty history renders only the current price and targets.
[]active?null | { type: "history"; date: string; } | { type: "target"; key: string; }—defaultActive?null | { type: "history"; date: string; } | { type: "target"; key: string; }nullonActiveChange?(active: PriceTargetFanActive | null) => void—className?string—事件
update:active—@update:activeactiveChange—@activeChange插槽
default() => VNodeChild#defaultPriceTargetFanHeader
插槽
default() => VNodeChild#defaultPriceTargetFanPlot
插槽
default(props: {}) => any#defaultPriceTargetFanSvg
插槽
default() => VNodeChild#defaultPriceTargetFanTooltip
插槽
default—作用域参数: overlay
#default无障碍
为交互控件提供明确的无障碍名称。保留文档中的键盘路径、可见焦点与减少动态效果状态；自定义插槽应继续保留所替代部件的语义。
常见问题
- 如何配置 Price Target Fan？
- 通过 label、current、targets、dates、history、active、defaultActive、onActiveChange、className 配置 Price Target Fan；API 表列出其类型与默认值。
- 如何连接到应用状态？
- 监听 update:active、activeChange，将组件连接到应用状态。
- 可以在服务端渲染吗？
- 可以在 Vue SSR 应用中正常渲染。服务端与客户端的初始 props 应保持一致；浏览器测量与交互资源在挂载后启动。
更新于
来源与许可 ↗MIT · 0.1.1