实时体育数据 数据来源：西瓜体育
⚽ 足球实时 (10)
| 主队 | 比分 | 客队 | 联赛 | 时间(北京) |
|---|---|---|---|---|
| 斯卢茨克 | 0:0 | 鲍里索夫BATE-2队 | 白俄罗斯足球甲级联赛 | 20:00 |
| 塔尔图坦美卡 | 0:0 | 纳尔瓦特兰斯 | 爱沙尼亚足球甲级联赛 | 19:30 |
| 梅查尔 | 0:0 | 埃塞俄比亚梅丁 | 埃塞俄比亚足球超级联赛 | 20:00 |
| 新特罗伊茨克诺斯塔 | 0:1 | 巴尔瑙尔迪纳摩 | 俄罗斯FNL 2联赛第四组 | 19:00 |
| 布拉特沃格 | 0:0 | 耶夫 | 挪威足球乙级联赛第一组 | 20:00 |
| 科克舍套奥克热特佩斯 | 0:0 | 托博尔 | 哈萨克斯坦足球超级联赛 | 20:00 |
| 阿伦达尔 | 3:1 | 特雷夫 | 挪威足球乙级联赛第一组 | 18:00 |
| 塔林莱瓦迪亚U21队 | 4:0 | 塔林FC | 爱沙尼亚足球乙级联赛 | 17:30 |
| 塔林纳卡列夫 | 5:1 | 诺姆卡尔尤U21队 | 爱沙尼亚足球乙级联赛 | 17:30 |
| 多尔比兹诺尼瓦 | 6:0 | 莫洛杰奇诺 | 白俄罗斯足球甲级联赛 | 18:00 |
更新于 2026-06-21 20:06（北京时间）
立即购买 图表
动态赛事数据，支持多种图表展示：赛程趋势、球队表现及联赛热门。尽在西瓜体育。
西瓜体育组件
请确保在您的文档中引入Chartist的CSS和JS文件：vendor/chartist/dist/chartist.min.css 和 vendor/chartist/dist/chartist.min.js。本页即是参考。
数据接口说明
西瓜体育为您提供了丰富的数据属性API，可直接在HTML文档中调用插件核心功能。主要有三大属性：
data-line-chart | data-bar-chart | data-pie-chart 以JSON格式传入数据，分别用于展示赛程趋势、球队表现或联赛热门图。data-options以JSON格式传入更多配置选项。data-series-color为每个数据集分配独立颜色。数据以JSON格式传入。 下方代码示例供您参考。
更多功能与选项，请访问插件官网：
http://gionkunz.github.io/chartist-js/index.html西瓜体育专注高清直播，身临其境，为用户提供专业可靠的体验。
Company 1
Company 2
Company 3
<!-- Line chart: Multiple lines of different color + Legend -->
<!-- Legend -->
<div class="d-flex flex-wrap justify-content-center fs-ms">
<div class="border rounded py-1 px-2 me-2 mb-2">
<div class="d-inline-block align-middle me-1" style="width: .75rem; height: .75rem; background-color: #4e54c8;"></div>
<span class="d-inline-block align-middle">Company 1</span>
</div>
<div class="border rounded py-1 px-2 me-2 mb-2">
<div class="d-inline-block align-middle me-1" style="width: .75rem; height: .75rem; background-color: #fea569;"></div>
<span class="d-inline-block align-middle">Company 2</span>
</div>
<div class="border rounded py-1 px-2 me-2 mb-2">
<div class="d-inline-block align-middle me-1" style="width: .75rem; height: .75rem; background-color: #f34770;"></div>
<span class="d-inline-block align-middle">Company 3</span>
</div>
</div>
<!-- Chart -->
<div class="ct-chart ct-perfect-fourth" data-line-chart='{"labels": ["W1", "W2", "W3", "W4", "W5", "W6", "W7", "W8", "W9"], "series": [[12, 9, 7, 8, 6, 4, 3, 2, 0], [2, 1, 3, 7, 9, 8, 7.7, 4, 7], [1, 3, 4, 5, 6, 8, 9, 10, 11]]}' data-options='{"axisY": {"onlyInteger": true}}' data-series-color='{"colors": ["#4e54c8", "#fea569", "#f34770"]}'></div>// Line chart: Multiple lines of different color + Legend
// Legend
.d-flex.flex-wrap.justify-content-center.fs-ms
.border.rounded.py-1.px-2.me-2.mb-2
.d-inline-block.align-middle.me-1(style="width: .75rem; height: .75rem; background-color: #4e54c8;")
span.d-inline-block.align-middle Company 1
.border.rounded.py-1.px-2.me-2.mb-2
.d-inline-block.align-middle.me-1(style="width: .75rem; height: .75rem; background-color: #fea569;")
span.d-inline-block.align-middle Company 2
.border.rounded.py-1.px-2.mb-2
.d-inline-block.align-middle.me-1(style="width: .75rem; height: .75rem; background-color: #f34770;")
span.d-inline-block.align-middle Company 3
// Chart
.ct-chart.ct-perfect-fourth(data-line-chart='{"labels": ["W1", "W2", "W3", "W4", "W5", "W6", "W7", "W8", "W9"], "series": [[12, 9, 7, 8, 6, 4, 3, 2, 0], [2, 1, 3, 7, 9, 8, 7.7, 4, 7], [1, 3, 4, 5, 6, 8, 9, 10, 11]]}', data-options='{"axisY": {"onlyInteger": true}}', data-series-color='{"colors": ["#4e54c8", "#fea569", "#f34770"]}')
围绕实时资讯，掌握全局，西瓜体育持续打磨更优质的服务。
Company 1
Company 2
<!-- Bar chart: Multiple bars of different color + Legend -->
<!-- Legend -->
<div class="d-flex flex-wrap justify-content-center fs-ms">
<div class="border rounded py-1 px-2 me-2 mb-2">
<div class="d-inline-block align-middle me-1" style="width: .75rem; height: .75rem; background-color: #f34770;"></div>
<span class="d-inline-block align-middle">Company 1</span>
</div>
<div class="border rounded py-1 px-2 me-2 mb-2">
<div class="d-inline-block align-middle me-1" style="width: .75rem; height: .75rem; background-color: #fea569;"></div>
<span class="d-inline-block align-middle">Company 2</span>
</div>
</div>
<!-- Chart -->
<div class="ct-chart ct-perfect-fourth" data-bar-chart='{"labels": ["2016", "2017", "2018", "2019", "2020", "2021"], "series": [[12000, 9000, 7000, 8000, 11000, 6000], [3500, 5000, 8750, 1300, 3000, 8750]]}', data-series-color='{"colors": ["#f34770", "#fea569"]}'></div>// Bar chart: Multiple bars of different color + Legend
// Legend
.d-flex.flex-wrap.justify-content-center.fs-ms
.border.rounded.py-1.px-2.me-2.mb-2
.d-inline-block.align-middle.me-1(style="width: .75rem; height: .75rem; background-color: #f34770;")
span.d-inline-block.align-middle Company 1
.border.rounded.py-1.px-2.me-2.mb-2
.d-inline-block.align-middle.me-1(style="width: .75rem; height: .75rem; background-color: #fea569;")
span.d-inline-block.align-middle Company 2
// Chart
.ct-chart.ct-perfect-fourth(data-bar-chart='{"labels": ["2016", "2017", "2018", "2019", "2020", "2021"], "series": [[12000, 9000, 7000, 8000, 11000, 6000], [3500, 5000, 8750, 1300, 3000, 8750]]}', data-series-color='{"colors": ["#f34770", "#fea569"]}')
西瓜体育深耕智能推荐，精准匹配领域，用心服务每一位用户。
Company 1
Company 2
Company 3
<!-- Pie chart: Multiple slices of different color + Legend -->
<!-- Legend -->
<div class="d-flex flex-wrap justify-content-center fs-ms">
<div class="border rounded py-1 px-2 me-2 mb-2">
<div class="d-inline-block align-middle me-1" style="width: .75rem; height: .75rem; background-color: #69b3fe;"></div>
<span class="d-inline-block align-middle">Company 1</span>
</div>
<div class="border rounded py-1 px-2 me-2 mb-2">
<div class="d-inline-block align-middle me-1" style="width: .75rem; height: .75rem; background-color: #42d697;"></div>
<span class="d-inline-block align-middle">Company 2</span>
</div>
<div class="border rounded py-1 px-2 me-2 mb-2">
<div class="d-inline-block align-middle me-1" style="width: .75rem; height: .75rem; background-color: #f34770;"></div>
<span class="d-inline-block align-middle">Company 3</span>
</div>
</div>
<!-- Chart -->
<div class="ct-chart ct-perfect-fourth" data-pie-chart='{"series": [5, 3, 4]}', data-series-color='{"colors": ["#69b3fe", "#42d697", "#f34770"]}'></div>// Pie chart: Multiple slices of different color + Legend
// Legend
.d-flex.flex-wrap.justify-content-center.fs-ms
.border.rounded.py-1.px-2.me-2.mb-2
.d-inline-block.align-middle.me-1(style="width: .75rem; height: .75rem; background-color: #69b3fe;")
span.d-inline-block.align-middle Company 1
.border.rounded.py-1.px-2.me-2.mb-2
.d-inline-block.align-middle.me-1(style="width: .75rem; height: .75rem; background-color: #42d697;")
span.d-inline-block.align-middle Company 2
.border.rounded.py-1.px-2.me-2.mb-2
.d-inline-block.align-middle.me-1(style="width: .75rem; height: .75rem; background-color: #f34770;")
span.d-inline-block.align-middle Company 3
// Chart
.ct-chart.ct-perfect-fourth(data-pie-chart='{"series": [5, 3, 4]}', data-series-color='{"colors": ["#69b3fe", "#42d697", "#f34770"]}')