218 lines
9.8 KiB
HTML
218 lines
9.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>数据可视化 - 可信数据空间</title>
|
||
<link href="../vendor/bootstrap/bootstrap.min.css" rel="stylesheet">
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||
<link href="../assets/css/styles.css" rel="stylesheet">
|
||
<!-- 引入 ECharts -->
|
||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
|
||
</head>
|
||
<body>
|
||
<!-- Header -->
|
||
<div id="header"></div>
|
||
|
||
<div class="container my-5">
|
||
<!-- 概览数据 -->
|
||
<div class="row mb-5">
|
||
<div class="col-12">
|
||
<h2 class="text-center mb-4">服务业绩概览</h2>
|
||
<div class="row g-4">
|
||
<div class="col-md-3">
|
||
<div class="card border-primary h-100">
|
||
<div class="card-body text-center">
|
||
<i class="bi bi-building fs-1 text-primary mb-3"></i>
|
||
<h3 class="card-title">10+</h3>
|
||
<p class="card-text">服务企业数量</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="card border-success h-100">
|
||
<div class="card-body text-center">
|
||
<i class="bi bi-currency-yen fs-1 text-success mb-3"></i>
|
||
<h3 class="card-title">5000万+</h3>
|
||
<p class="card-text">资产评估总额</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="card border-info h-100">
|
||
<div class="card-body text-center">
|
||
<i class="bi bi-graph-up-arrow fs-1 text-info mb-3"></i>
|
||
<h3 class="card-title">100万/年</h3>
|
||
<p class="card-text">交易金额</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="card border-warning h-100">
|
||
<div class="card-body text-center">
|
||
<i class="bi bi-bank fs-1 text-warning mb-3"></i>
|
||
<h3 class="card-title">数千万</h3>
|
||
<p class="card-text">融资意向额度</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 行业分布图表 -->
|
||
<div class="row mb-5">
|
||
<div class="col-md-6">
|
||
<div class="card h-100">
|
||
<div class="card-body">
|
||
<h5 class="card-title">行业分布</h5>
|
||
<div id="industryChart" style="height: 400px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="card h-100">
|
||
<div class="card-body">
|
||
<h5 class="card-title">数据资产规模</h5>
|
||
<div id="dataScaleChart" style="height: 400px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 案例展示 -->
|
||
<div class="row mb-5">
|
||
<div class="col-12">
|
||
<h2 class="text-center mb-4">典型案例</h2>
|
||
<div class="row g-4">
|
||
<!-- 企业案例 -->
|
||
<div class="col-md-4">
|
||
<div class="card h-100">
|
||
<div class="card-body">
|
||
<h5 class="card-title">
|
||
<i class="bi bi-building text-primary me-2"></i>
|
||
企业案例
|
||
</h5>
|
||
<p class="card-text">为全国各地十余家企业提供数据资产咨询、入表和运营服务，涵盖智慧城市、智慧交通、智慧农业等多个领域。</p>
|
||
<ul class="list-unstyled">
|
||
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>资产入表金额：500万+</li>
|
||
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>评估金额：5000万+</li>
|
||
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>年交易金额：100万</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 交通行业案例 -->
|
||
<div class="col-md-4">
|
||
<div class="card h-100">
|
||
<div class="card-body">
|
||
<h5 class="card-title">
|
||
<i class="bi bi-truck text-success me-2"></i>
|
||
交通行业案例
|
||
</h5>
|
||
<p class="card-text">在珠海市、宜宾市、内江市完成了当地公交公司的公交类数据、智慧停车数据等交通领域的数据资产服务。</p>
|
||
<ul class="list-unstyled">
|
||
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>GPS数据：5亿+条</li>
|
||
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>交易数据：1.5亿+条</li>
|
||
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>评估金额：3000万+</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 政府案例 -->
|
||
<div class="col-md-4">
|
||
<div class="card h-100">
|
||
<div class="card-body">
|
||
<h5 class="card-title">
|
||
<i class="bi bi-bank text-info me-2"></i>
|
||
政府案例
|
||
</h5>
|
||
<p class="card-text">在多个地区投资建设可信数据空间、数据要素运营服务站或算力中心。</p>
|
||
<ul class="list-unstyled">
|
||
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>投资规模：2亿+</li>
|
||
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>数据量：80亿+条</li>
|
||
<li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i>交易次数：1000万+</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Footer -->
|
||
<div id="footer"></div>
|
||
|
||
<script src="../vendor/bootstrap/bootstrap.bundle.min.js"></script>
|
||
<script src="../assets/js/components.js"></script>
|
||
<script>
|
||
// 初始化图表
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 行业分布图表
|
||
const industryChart = echarts.init(document.getElementById('industryChart'));
|
||
industryChart.setOption({
|
||
title: {
|
||
text: '行业分布'
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{b}: {c}家 ({d}%)'
|
||
},
|
||
legend: {
|
||
orient: 'vertical',
|
||
left: 'left'
|
||
},
|
||
series: [{
|
||
type: 'pie',
|
||
radius: '50%',
|
||
data: [
|
||
{ value: 4, name: '智慧城市' },
|
||
{ value: 3, name: '智慧交通' },
|
||
{ value: 2, name: '智慧农业' },
|
||
{ value: 3, name: '其他' }
|
||
],
|
||
emphasis: {
|
||
itemStyle: {
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 0,
|
||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||
}
|
||
}
|
||
}]
|
||
});
|
||
|
||
// 数据资产规模图表
|
||
const dataScaleChart = echarts.init(document.getElementById('dataScaleChart'));
|
||
dataScaleChart.setOption({
|
||
title: {
|
||
text: '数据资产规模'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['2020', '2021', '2022', '2023', '2024']
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
name: '亿条'
|
||
},
|
||
series: [{
|
||
data: [10, 25, 40, 60, 80],
|
||
type: 'line',
|
||
smooth: true,
|
||
areaStyle: {}
|
||
}]
|
||
});
|
||
|
||
// 监听窗口大小变化，调整图表大小
|
||
window.addEventListener('resize', function() {
|
||
industryChart.resize();
|
||
dataScaleChart.resize();
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |