专为体育资讯门户、赛事直播平台及垂直社区打造的高性能前端插件矩阵。无需重构底层数据管道，仅需数行代码即可将实时比分看板、多维指数走势曲线、2D赛况动画沙盘及对阵技术统计无缝嵌入Web、H5与原生客户端。
摒弃传统静态数字表格，将赛前初指、临场变盘与滚球毫秒级水位波动转化为高帧率折线图与离散度热力矩阵，帮助媒体受众直观洞察市场倾向与关键事件节点。
| 指数机构 | 初指 | 即时滚球 | 趋势 |
|---|---|---|---|
红黄牌、进球、VAR介入自动打点于指数折线坐标轴。
当单一区间水位跳动超过阈值时自动高亮脉冲提示。
一键展开相同初指结构下近50场历史赛果胜率分布。
在无视频版权或弱网环境下，通过低延迟二维球场态势沙盘、实时危险进攻热区与精细化技术统计挂件，为用户提供高留存率的图文可视化陪伴式观赛体验。
支持足球4-3-3/3-5-2动态站位渲染、篮球五人正负值雷达图，点击球员头像即可弹出本场触球热区、传球成功率与关键解围数据浮层。
告别生硬的传统 iFrame 第三方割裂感。组件底层通过 CSS Variables 变量注入与主题配置文件，支持一键切换明暗色系、盘口小数格式、圆角密度与品牌主色调。
依托 CSS Container Queries（容器查询）技术，组件不依赖外部视口宽度，而是根据父级挂载容器尺寸自动折叠或展开指数列，完美适配从4K演播大屏到移动端竖屏小卡片的任意版面。
默认展开完整多机构同屏对比、欧亚指数联动折线、2D球场沙盘与历史交锋深度统计面板，支持鼠标悬停（Hover）即时预览分钟级变盘明细。
针对单手触控手势深度优化，提供底部抽屉式指数走势弹窗、横向滑动盘口胶囊以及省流模式下的高帧率Canvas赛况动画，杜绝发热与掉帧。
提供背景全透明（Alpha通道）模式，可直接作为体育主播OBS推流插件或视频播放器顶部跑马灯挂件，在进球与封盘瞬间触发高颜值动效横幅。
智赛数科前端组件库基于原生 Web Components 标准构建，完美兼容 Vue 3、React、Next.js 及传统服务端渲染架构，通过全球边缘CDN节点实现毫秒级按需懒加载。
宿主网站的全局 CSS 不会污染组件内部布局，组件内部脚本亦不会干扰宿主页面路由与状态管理。
暴露丰富的自定义事件接口（如点击某个盘口单元格、切换比赛场次），方便宿主应用衔接自有用户互动逻辑。
支持边缘网关 Referer 校验与动态短效 JWT 签名鉴权，确保您购买的赛事数据流不被第三方盗链滥用。
<!-- 1. 引入智赛数科轻量化组件加载器 (Gzip < 38KB) -->
<script type="module" src="https://cdn.sports-solutions.com.cn/sdk/v4/zs-widgets.esm.js"></script>
<!-- 2. 在页面任意容器内声明式挂载指数走势与比分沙盘组件 -->
<zs-odds-trend
app-key="ZS_LIVE_TOKEN_99281A"
match-id="2025091844"
markets="ah,1x2,ou"
odds-format="hk"
theme="optical-dark"
locale="zh-CN">
</zs-odds-trend>
<script>
// 3. 监听用户在组件内点击指数单元格的交互回调
document.querySelector('zs-odds-trend').addEventListener('zs:market-click', (e) => {
console.log('选中指数项:', e.detail.marketType, e.detail.currentOdds);
});
</script><script setup>
import { onMounted } from 'vue'
import { initZhisaiWidgets, ZsMatchTracker, ZsOddsMatrix } from '@zhisai/sports-widgets/vue'
onMounted(() => {
initZhisaiWidgets({
token: import.meta.env.VITE_ZS_WIDGET_TOKEN,
wsEndpoint: 'wss://stream.sports-solutions.com.cn/v4/live'
})
})
const handleOddsChange = (payload) => {
console.log('捕获滚球水位异动:', payload.matchId, payload.delta)
}
</script>
<template>
<div class="match-detail-grid">
<ZsMatchTracker :match-id="currentMatchId" pitch-mode="2d-optical" />
<ZsOddsMatrix :match-id="currentMatchId" @odds-tick="handleOddsChange" />
</div>
</template>import { ZsWidgetProvider, OddsTrendWidget, ScoreboardWidget } from '@zhisai/sports-widgets/react';
export default function MatchCenterView({ matchId }) {
return (
<ZsWidgetProvider
appKey={process.env.NEXT_PUBLIC_ZS_KEY}
themePreset="optical"
oddsFormat="decimal"
>
<section className="grid grid-cols-12 gap-6">
<div className="col-span-7">
<ScoreboardWidget matchId={matchId} showMomentum={true} />
</div>
<div className="col-span-5">
<OddsTrendWidget
matchId={matchId}
bookmakers={['pinnacle', 'bet365', 'macauslot']}
onCellSelect={(cell) => console.log('Selected:', cell)}
/>
</div>
</section>
</ZsWidgetProvider>
);
}联系智赛数科解决方案架构师，获取包含英超、欧冠、NBA及主流电竞赛事的测试版 SDK AppKey，支持在您的预发布环境中实测毫秒级指数推流与定制化换肤效果。