1164 lines
36 KiB
HTML
1164 lines
36 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>供应链金融数据价值分析 - 可信数据空间</title>
|
||
<!-- Bootstrap 5 CSS -->
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
<!-- Font Awesome -->
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
|
||
<!-- 自定义样式 -->
|
||
<link href="../../assets/css/style.css" rel="stylesheet">
|
||
<!-- 组件样式 -->
|
||
<link rel="stylesheet" href="../../assets/css/components/header.css">
|
||
<link rel="stylesheet" href="../../assets/css/components/footer.css">
|
||
<!-- 页面样式 -->
|
||
<link rel="stylesheet" href="../../assets/css/pages/bi-dashboard.css">
|
||
<style>
|
||
:root {
|
||
--flow-line-color: #E2E8F0;
|
||
--node-primary: #3B82F6;
|
||
--node-success: #10B981;
|
||
--node-warning: #F59E0B;
|
||
--node-danger: #EF4444;
|
||
}
|
||
|
||
.flow-container {
|
||
position: relative;
|
||
padding: 2rem;
|
||
margin: 2rem 0;
|
||
background: white;
|
||
border-radius: 12px;
|
||
min-height: 400px;
|
||
}
|
||
|
||
.flow-node {
|
||
position: relative;
|
||
padding: 1rem;
|
||
border-radius: 8px;
|
||
background: white;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
margin: 1rem 0;
|
||
transition: transform 0.3s;
|
||
}
|
||
|
||
.flow-node:hover {
|
||
transform: translateY(-3px);
|
||
}
|
||
|
||
.flow-line {
|
||
position: absolute;
|
||
background: var(--flow-line-color);
|
||
z-index: 0;
|
||
}
|
||
|
||
.flow-line-horizontal {
|
||
height: 2px;
|
||
}
|
||
|
||
.flow-line-vertical {
|
||
width: 2px;
|
||
}
|
||
|
||
.flow-arrow {
|
||
position: absolute;
|
||
color: var(--flow-line-color);
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.flow-stage {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
position: relative;
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.flow-stage:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.node-metrics {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 1rem;
|
||
padding-top: 1rem;
|
||
border-top: 1px solid #E2E8F0;
|
||
}
|
||
|
||
.metric-item {
|
||
text-align: center;
|
||
}
|
||
|
||
.metric-value {
|
||
font-size: 1.2rem;
|
||
font-weight: bold;
|
||
color: var(--node-primary);
|
||
}
|
||
|
||
.metric-label {
|
||
font-size: 0.8rem;
|
||
color: #64748B;
|
||
}
|
||
|
||
.chart-container {
|
||
height: 200px;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.node-header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.node-header i {
|
||
margin-right: 0.5rem;
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.node-title {
|
||
margin: 0;
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.node-status {
|
||
margin-left: auto;
|
||
padding: 0.25rem 0.5rem;
|
||
border-radius: 4px;
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.status-active {
|
||
background: rgba(59, 130, 246, 0.1);
|
||
color: var(--node-primary);
|
||
}
|
||
|
||
.bi-header {
|
||
text-align: center;
|
||
padding: 2rem 0;
|
||
background: linear-gradient(135deg, #1a365d 0%, #2a4365 100%);
|
||
color: white;
|
||
border-radius: 12px;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.bi-title {
|
||
font-size: 2.5rem;
|
||
font-weight: bold;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.bi-subtitle {
|
||
font-size: 1.2rem;
|
||
opacity: 0.8;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.bi-meta {
|
||
font-size: 0.9rem;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.bi-meta span {
|
||
margin: 0 1rem;
|
||
}
|
||
|
||
.time-selector {
|
||
text-align: center;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.time-selector .btn {
|
||
margin: 0 0.5rem;
|
||
}
|
||
|
||
.supply-chain-flow {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 2rem;
|
||
position: relative;
|
||
}
|
||
|
||
.chain-node {
|
||
flex: 1;
|
||
padding: 1.5rem;
|
||
background: white;
|
||
border-radius: 12px;
|
||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||
position: relative;
|
||
margin: 0 1rem;
|
||
}
|
||
|
||
.node-icon {
|
||
font-size: 2rem;
|
||
margin-bottom: 1rem;
|
||
color: var(--node-primary);
|
||
}
|
||
|
||
.node-info h3 {
|
||
font-size: 1.2rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.node-stats {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
}
|
||
|
||
.stat-item {
|
||
text-align: center;
|
||
}
|
||
|
||
.stat-value {
|
||
display: block;
|
||
font-size: 1.5rem;
|
||
font-weight: bold;
|
||
color: var(--node-primary);
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 0.8rem;
|
||
color: #64748B;
|
||
}
|
||
|
||
.data-flow-indicator {
|
||
position: absolute;
|
||
right: -2rem;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
z-index: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.flow-arrow {
|
||
font-size: 2rem;
|
||
color: var(--node-primary);
|
||
}
|
||
|
||
.flow-value {
|
||
font-size: 0.8rem;
|
||
color: #64748B;
|
||
}
|
||
|
||
@keyframes flowAnimation {
|
||
0% { opacity: 0.3; }
|
||
50% { opacity: 1; }
|
||
100% { opacity: 0.3; }
|
||
}
|
||
|
||
.data-flow-indicator {
|
||
animation: flowAnimation 2s infinite;
|
||
}
|
||
|
||
/* 数据质量监控样式 */
|
||
.quality-monitor-section {
|
||
background: white;
|
||
border-radius: 12px;
|
||
padding: 1.5rem;
|
||
margin: 2rem 0;
|
||
}
|
||
|
||
.section-title {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.section-title i {
|
||
margin-right: 0.5rem;
|
||
color: var(--node-primary);
|
||
}
|
||
|
||
.quality-score {
|
||
margin-left: auto;
|
||
background: rgba(59, 130, 246, 0.1);
|
||
color: var(--node-primary);
|
||
padding: 0.5rem 1rem;
|
||
border-radius: 20px;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.quality-card {
|
||
background: #f8fafc;
|
||
border-radius: 8px;
|
||
padding: 1rem;
|
||
height: 100%;
|
||
}
|
||
|
||
.quality-header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 1rem;
|
||
color: #1e293b;
|
||
}
|
||
|
||
.quality-header i {
|
||
margin-right: 0.5rem;
|
||
color: var(--node-primary);
|
||
}
|
||
|
||
.progress-ring {
|
||
text-align: center;
|
||
margin-bottom: 1rem;
|
||
position: relative;
|
||
width: 80px;
|
||
height: 80px;
|
||
margin: 0 auto 1rem;
|
||
background: conic-gradient(
|
||
var(--node-primary) calc(var(--progress) * 1%),
|
||
#e2e8f0 0
|
||
);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.progress-value {
|
||
font-size: 1.2rem;
|
||
font-weight: bold;
|
||
color: var(--node-primary);
|
||
}
|
||
|
||
.progress-label {
|
||
font-size: 0.8rem;
|
||
color: #64748b;
|
||
}
|
||
|
||
.quality-stats {
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.stat-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 0.5rem;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.stat-row .value {
|
||
font-weight: 500;
|
||
color: var(--node-primary);
|
||
}
|
||
|
||
.quality-trend-chart {
|
||
margin-top: 2rem;
|
||
height: 300px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 网格背景 -->
|
||
<div class="grid-background"></div>
|
||
|
||
<div class="container-fluid py-3">
|
||
<!-- BI看板头部 -->
|
||
<div class="bi-header">
|
||
<div class="header-content">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<h1 class="bi-title">供应链金融数据价值分析</h1>
|
||
<div class="time-selector">
|
||
<div class="btn-group" role="group">
|
||
<button type="button" class="btn btn-primary active">今日</button>
|
||
<button type="button" class="btn btn-primary">本周</button>
|
||
<button type="button" class="btn btn-primary">本月</button>
|
||
<button type="button" class="btn btn-primary">本季度</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bi-meta">
|
||
<span><i class="far fa-clock"></i> 更新时间：2024-01-18 10:30:45</span>
|
||
<span><i class="far fa-calendar-alt"></i> 统计周期：近30天</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tab导航 -->
|
||
<div class="bi-tabs">
|
||
<div class="nav-wrapper">
|
||
<nav class="nav nav-tabs">
|
||
<a class="nav-link active" data-bs-toggle="tab" href="#revenue">
|
||
<i class="fas fa-chart-line"></i>
|
||
数据收益分析
|
||
</a>
|
||
<a class="nav-link" data-bs-toggle="tab" href="#catalog">
|
||
<i class="fas fa-database"></i>
|
||
数据资源目录
|
||
</a>
|
||
<a class="nav-link" data-bs-toggle="tab" href="#usage">
|
||
<i class="fas fa-users"></i>
|
||
数据使用统计
|
||
</a>
|
||
<a class="nav-link" data-bs-toggle="tab" href="#security">
|
||
<i class="fas fa-shield-alt"></i>
|
||
安全合规监控
|
||
</a>
|
||
</nav>
|
||
</div>
|
||
|
||
<!-- Tab内容 -->
|
||
<div class="tab-content">
|
||
<!-- 数据收益分析 -->
|
||
<div class="tab-pane fade show active" id="revenue">
|
||
<div class="row g-3">
|
||
<!-- 收益概览卡片 -->
|
||
<div class="col-md-3">
|
||
<div class="metric-card">
|
||
<div class="metric-value">¥ 1,234,567</div>
|
||
<div class="metric-label">本月数据收益</div>
|
||
<div class="metric-trend up">
|
||
<i class="fas fa-arrow-up"></i>
|
||
12.5%
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 更多收益指标卡片 -->
|
||
</div>
|
||
|
||
<!-- 收益分配图表 -->
|
||
<div class="row g-3 mt-3">
|
||
<div class="col-md-8">
|
||
<div class="chart-container">
|
||
<!-- 收益分配趋势图 -->
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="chart-container">
|
||
<!-- 收益分配饼图 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 供应方明细表格 -->
|
||
<div class="data-table-section mt-4">
|
||
<h3 class="section-title">供应方收益明细</h3>
|
||
<div class="data-table-wrapper">
|
||
<table class="data-table">
|
||
<!-- 表格内容 -->
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 数据资源目录 -->
|
||
<div class="tab-pane fade" id="catalog">
|
||
<!-- 数据目录搜索 -->
|
||
<div class="catalog-search">
|
||
<div class="search-box">
|
||
<i class="fas fa-search"></i>
|
||
<input type="text" placeholder="搜索数据表或字段...">
|
||
</div>
|
||
<div class="filter-tags">
|
||
<!-- 筛选标签 -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 数据目录列表 -->
|
||
<div class="catalog-list">
|
||
<!-- 数据表卡片 -->
|
||
</div>
|
||
|
||
<!-- 数据字典 -->
|
||
<div class="data-dictionary">
|
||
<!-- 字典内容 -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 数据使用统计 -->
|
||
<div class="tab-pane fade" id="usage">
|
||
<!-- 使用量趋势 -->
|
||
<div class="usage-trends">
|
||
<!-- 趋势图表 -->
|
||
</div>
|
||
|
||
<!-- 用户分析 -->
|
||
<div class="user-analysis">
|
||
<!-- 用户分析图表 -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 安全合规监控 -->
|
||
<div class="tab-pane fade" id="security">
|
||
<!-- 风险预警 -->
|
||
<div class="risk-alerts">
|
||
<!-- 预警列表 -->
|
||
</div>
|
||
|
||
<!-- 合规检查 -->
|
||
<div class="compliance-checks">
|
||
<!-- 合规检查结果 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 脚本引用 -->
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
|
||
<script src="../../assets/js/common/components.js"></script>
|
||
<script src="../../assets/js/pages/bi.js"></script>
|
||
<script>
|
||
// 初始化图表
|
||
const dataValueChart = echarts.init(document.getElementById('dataValueChart'));
|
||
const contributionChart = echarts.init(document.getElementById('contributionChart'));
|
||
const businessValueChart = echarts.init(document.getElementById('businessValueChart'));
|
||
|
||
// 数据要素价值分配图表配置
|
||
const dataValueOption = {
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{b}: {c} ({d}%)'
|
||
},
|
||
legend: {
|
||
orient: 'vertical',
|
||
right: 10,
|
||
top: 'center'
|
||
},
|
||
series: [{
|
||
type: 'pie',
|
||
radius: ['40%', '70%'],
|
||
avoidLabelOverlap: false,
|
||
itemStyle: {
|
||
borderRadius: 10,
|
||
borderColor: '#fff',
|
||
borderWidth: 2
|
||
},
|
||
label: {
|
||
show: false
|
||
},
|
||
data: [
|
||
{value: 35, name: '原始数据提供方'},
|
||
{value: 25, name: '数据清洗加工方'},
|
||
{value: 20, name: '数据标注方'},
|
||
{value: 15, name: '算法模型贡献方'},
|
||
{value: 5, name: '其他'}
|
||
]
|
||
}]
|
||
};
|
||
|
||
// 渲染图表
|
||
dataValueChart.setOption(dataValueOption);
|
||
|
||
// 新增图表初始化
|
||
const creditScoreChart = echarts.init(document.getElementById('creditScoreChart'));
|
||
const riskTrendChart = echarts.init(document.getElementById('riskTrendChart'));
|
||
const heatmapChart = echarts.init(document.getElementById('heatmapChart'));
|
||
const supplierValueChart = echarts.init(document.getElementById('supplierValueChart'));
|
||
const blockchainChart = echarts.init(document.getElementById('blockchainChart'));
|
||
|
||
// 企业信用评分分布图表配置
|
||
const creditScoreOption = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['AAA', 'AA', 'A', 'BBB', 'BB', 'B', 'CCC']
|
||
},
|
||
yAxis: {
|
||
type: 'value'
|
||
},
|
||
series: [{
|
||
name: '企业数量',
|
||
type: 'bar',
|
||
data: [120, 200, 150, 80, 70, 110, 30],
|
||
itemStyle: {
|
||
color: function(params) {
|
||
const colorList = ['#67e0e3', '#37a2da', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293', '#e062ae'];
|
||
return colorList[params.dataIndex];
|
||
}
|
||
}
|
||
}]
|
||
};
|
||
|
||
// 风险指标趋势图表配置
|
||
const riskTrendOption = {
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data: ['逾期率', '不良率', '代偿率', '回收率']
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: ['1月', '2月', '3月', '4月', '5月', '6月']
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter: '{value}%'
|
||
}
|
||
},
|
||
series: [{
|
||
name: '逾期率',
|
||
type: 'line',
|
||
data: [3.2, 3.5, 3.1, 2.8, 2.9, 2.7]
|
||
}, {
|
||
name: '不良率',
|
||
type: 'line',
|
||
data: [1.8, 1.9, 1.7, 1.6, 1.5, 1.4]
|
||
}, {
|
||
name: '代偿率',
|
||
type: 'line',
|
||
data: [0.8, 0.9, 0.7, 0.6, 0.5, 0.4]
|
||
}, {
|
||
name: '回收率',
|
||
type: 'line',
|
||
data: [85, 83, 86, 87, 88, 89]
|
||
}]
|
||
};
|
||
|
||
// 数据使用热力图配置
|
||
const heatmapOption = {
|
||
tooltip: {
|
||
position: 'top'
|
||
},
|
||
grid: {
|
||
top: '15%'
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||
splitArea: {
|
||
show: true
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
data: ['上午', '下午', '晚上'],
|
||
splitArea: {
|
||
show: true
|
||
}
|
||
},
|
||
visualMap: {
|
||
min: 0,
|
||
max: 100,
|
||
calculable: true,
|
||
orient: 'horizontal',
|
||
left: 'center',
|
||
top: '0'
|
||
},
|
||
series: [{
|
||
name: '数据调用量',
|
||
type: 'heatmap',
|
||
data: [
|
||
// 示例数据
|
||
[0, 0, 85], [0, 1, 90], [0, 2, 40],
|
||
[1, 0, 75], [1, 1, 80], [1, 2, 35],
|
||
[2, 0, 65], [2, 1, 70], [2, 2, 30]
|
||
// ... 更多数据点
|
||
],
|
||
label: {
|
||
show: true
|
||
},
|
||
emphasis: {
|
||
itemStyle: {
|
||
shadowBlur: 10,
|
||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||
}
|
||
}
|
||
}]
|
||
};
|
||
|
||
// 渲染新增图表
|
||
creditScoreChart.setOption(creditScoreOption);
|
||
riskTrendChart.setOption(riskTrendOption);
|
||
heatmapChart.setOption(heatmapOption);
|
||
|
||
// 数据价值贡献度分析配置
|
||
const contributionOption = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
legend: {
|
||
data: ['权重']
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'value',
|
||
max: 100
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
data: ['数据新鲜度', '数据质量', '数据唯一性', '数据规模', '数据完整性']
|
||
},
|
||
series: [{
|
||
name: '权重',
|
||
type: 'bar',
|
||
data: [85, 92, 78, 65, 88],
|
||
label: {
|
||
show: true,
|
||
position: 'right',
|
||
formatter: '{c}%'
|
||
},
|
||
itemStyle: {
|
||
color: function(params) {
|
||
const colorList = ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6'];
|
||
return colorList[params.dataIndex];
|
||
}
|
||
}
|
||
}]
|
||
};
|
||
|
||
// 业务价值分配配置
|
||
const businessValueOption = {
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{b}: {c}%'
|
||
},
|
||
legend: {
|
||
orient: 'vertical',
|
||
left: 'left',
|
||
},
|
||
series: [{
|
||
type: 'pie',
|
||
radius: '50%',
|
||
data: [
|
||
{value: 35, name: '核心企业'},
|
||
{value: 30, name: '金融机构'},
|
||
{value: 20, name: '供应商/经销商'},
|
||
{value: 15, name: '平台运营方'}
|
||
],
|
||
emphasis: {
|
||
itemStyle: {
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 0,
|
||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||
}
|
||
},
|
||
itemStyle: {
|
||
borderRadius: 10,
|
||
borderColor: '#fff',
|
||
borderWidth: 2
|
||
}
|
||
}]
|
||
};
|
||
|
||
// 数据供应方价值面板配置（更新现有配置）
|
||
const supplierValueOption = {
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
legend: {
|
||
bottom: '0%'
|
||
},
|
||
radar: {
|
||
radius: '60%',
|
||
indicator: [
|
||
{name: '数据质量', max: 100},
|
||
{name: '使用频次', max: 100},
|
||
{name: '收益贡献', max: 100},
|
||
{name: '行业影响', max: 100},
|
||
{name: '生态贡献', max: 100}
|
||
],
|
||
splitArea: {
|
||
areaStyle: {
|
||
color: ['#f8f9fa', '#e9ecef', '#dee2e6', '#ced4da', '#adb5bd']
|
||
}
|
||
}
|
||
},
|
||
series: [{
|
||
name: '供应方价值评估',
|
||
type: 'radar',
|
||
data: [{
|
||
value: [85, 90, 75, 80, 70],
|
||
name: '综合评分',
|
||
areaStyle: {
|
||
color: 'rgba(59, 130, 246, 0.2)'
|
||
},
|
||
lineStyle: {
|
||
color: '#3B82F6'
|
||
},
|
||
itemStyle: {
|
||
color: '#3B82F6'
|
||
}
|
||
}]
|
||
}]
|
||
};
|
||
|
||
// 区块链存证记录配置（更新现有配置）
|
||
const blockchainOption = {
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: function(params) {
|
||
return `${params.name}<br/>时间：${params.value[0]}<br/>类型：${params.value[1]}`;
|
||
}
|
||
},
|
||
legend: {
|
||
data: ['数据使用', '收益分配', '权限变更'],
|
||
bottom: '0'
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '15%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'time',
|
||
splitLine: {
|
||
show: false
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
data: ['数据使用', '收益分配', '权限变更'],
|
||
splitLine: {
|
||
show: false
|
||
}
|
||
},
|
||
series: [{
|
||
name: '存证记录',
|
||
type: 'scatter',
|
||
symbolSize: 12,
|
||
data: [
|
||
{
|
||
value: ['2024-01-15 10:00:00', '数据使用'],
|
||
itemStyle: {color: '#10B981'}
|
||
},
|
||
{
|
||
value: ['2024-01-15 14:30:00', '收益分配'],
|
||
itemStyle: {color: '#3B82F6'}
|
||
},
|
||
{
|
||
value: ['2024-01-16 09:15:00', '权限变更'],
|
||
itemStyle: {color: '#F59E0B'}
|
||
},
|
||
{
|
||
value: ['2024-01-16 15:45:00', '数据使用'],
|
||
itemStyle: {color: '#10B981'}
|
||
},
|
||
{
|
||
value: ['2024-01-17 11:20:00', '收益分配'],
|
||
itemStyle: {color: '#3B82F6'}
|
||
}
|
||
]
|
||
}]
|
||
};
|
||
|
||
// 模型迭代效果分析配置
|
||
const modelIterationOption = {
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data: ['AUC', 'KS', 'PSI']
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['V1.0', 'V1.1', 'V1.2', 'V2.0', 'V2.1']
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
splitLine: {
|
||
show: false
|
||
}
|
||
},
|
||
series: [{
|
||
name: 'AUC',
|
||
type: 'line',
|
||
smooth: true,
|
||
data: [0.75, 0.78, 0.82, 0.85, 0.87]
|
||
}, {
|
||
name: 'KS',
|
||
type: 'line',
|
||
smooth: true,
|
||
data: [0.35, 0.38, 0.42, 0.45, 0.48]
|
||
}, {
|
||
name: 'PSI',
|
||
type: 'line',
|
||
smooth: true,
|
||
data: [0.15, 0.12, 0.10, 0.08, 0.07]
|
||
}]
|
||
};
|
||
|
||
// 渲染所有图表
|
||
contributionChart.setOption(contributionOption);
|
||
businessValueChart.setOption(businessValueOption);
|
||
supplierValueChart.setOption(supplierValueOption);
|
||
blockchainChart.setOption(blockchainOption);
|
||
|
||
// 初始化新图表
|
||
const modelIterationChart = echarts.init(document.getElementById('modelIterationChart'));
|
||
const modelTrainingChart = echarts.init(document.getElementById('modelTrainingChart'));
|
||
|
||
// 渲染模型相关图表
|
||
modelIterationChart.setOption(modelIterationOption);
|
||
|
||
// 模型训练监控配置
|
||
const modelTrainingOption = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross'
|
||
}
|
||
},
|
||
legend: {
|
||
data: ['样本规模', '特征覆盖率', '数据质量分布', 'GPU使用率'],
|
||
top: 10
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#666'
|
||
}
|
||
}
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: '数量/比率',
|
||
min: 0,
|
||
max: 100,
|
||
position: 'left',
|
||
axisLabel: {
|
||
formatter: '{value}%'
|
||
}
|
||
},
|
||
{
|
||
type: 'value',
|
||
name: '样本规模',
|
||
min: 0,
|
||
max: 1000000,
|
||
position: 'right',
|
||
axisLabel: {
|
||
formatter: function(value) {
|
||
return (value/10000).toFixed(1) + '万';
|
||
}
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '样本规模',
|
||
type: 'bar',
|
||
yAxisIndex: 1,
|
||
data: [450000, 520000, 580000, 650000, 750000, 850000],
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{offset: 0, color: '#83bff6'},
|
||
{offset: 0.5, color: '#188df0'},
|
||
{offset: 1, color: '#188df0'}
|
||
])
|
||
}
|
||
},
|
||
{
|
||
name: '特征覆盖率',
|
||
type: 'line',
|
||
smooth: true,
|
||
data: [85, 87, 90, 92, 95, 96],
|
||
itemStyle: {
|
||
color: '#10B981'
|
||
}
|
||
},
|
||
{
|
||
name: '数据质量分布',
|
||
type: 'line',
|
||
smooth: true,
|
||
data: [78, 82, 85, 88, 90, 92],
|
||
itemStyle: {
|
||
color: '#F59E0B'
|
||
}
|
||
},
|
||
{
|
||
name: 'GPU使用率',
|
||
type: 'line',
|
||
smooth: true,
|
||
data: [65, 75, 70, 85, 80, 90],
|
||
itemStyle: {
|
||
color: '#EF4444'
|
||
},
|
||
markLine: {
|
||
silent: true,
|
||
lineStyle: {
|
||
color: '#EF4444'
|
||
},
|
||
data: [{
|
||
yAxis: 80,
|
||
name: '警戒线'
|
||
}]
|
||
}
|
||
}
|
||
]
|
||
};
|
||
|
||
// 渲染模型训练监控图表
|
||
modelTrainingChart.setOption(modelTrainingOption);
|
||
|
||
// 添加加载状态控制
|
||
function showLoading(chartId) {
|
||
const chart = echarts.getInstanceByDom(document.getElementById(chartId));
|
||
chart.showLoading({
|
||
text: '数据加载中...',
|
||
maskColor: 'rgba(255, 255, 255, 0.8)'
|
||
});
|
||
}
|
||
|
||
function hideLoading(chartId) {
|
||
const chart = echarts.getInstanceByDom(document.getElementById(chartId));
|
||
chart.hideLoading();
|
||
}
|
||
|
||
// 添加图表工具栏
|
||
const baseChartOption = {
|
||
toolbox: {
|
||
feature: {
|
||
dataZoom: {},
|
||
magicType: {type: ['line', 'bar']},
|
||
restore: {},
|
||
saveAsImage: {}
|
||
}
|
||
}
|
||
};
|
||
|
||
// 添加防抖处理
|
||
function debounce(fn, delay) {
|
||
let timer = null;
|
||
return function() {
|
||
const context = this;
|
||
const args = arguments;
|
||
clearTimeout(timer);
|
||
timer = setTimeout(() => {
|
||
fn.apply(context, args);
|
||
}, delay);
|
||
};
|
||
}
|
||
|
||
// 优化响应式处理
|
||
window.addEventListener('resize', debounce(function() {
|
||
[dataValueChart, contributionChart, businessValueChart, creditScoreChart, riskTrendChart, heatmapChart, supplierValueChart, blockchainChart, modelIterationChart, modelTrainingChart].forEach(chart => {
|
||
chart && chart.resize();
|
||
});
|
||
}, 200));
|
||
|
||
// 添加图表联动
|
||
function setupChartLinkage() {
|
||
dataValueChart.on('click', function(params) {
|
||
// 更新相关图表数据
|
||
updateRelatedCharts(params.name);
|
||
});
|
||
}
|
||
|
||
// 添加数据刷新机制
|
||
function setupDataRefresh() {
|
||
const refreshInterval = 5 * 60 * 1000; // 5分钟
|
||
setInterval(() => {
|
||
refreshAllCharts();
|
||
}, refreshInterval);
|
||
}
|
||
|
||
// 添加数据质量趋势图配置
|
||
const qualityTrendChart = echarts.init(document.getElementById('qualityTrendChart'));
|
||
const qualityTrendOption = {
|
||
title: {
|
||
text: '数据质量趋势分析',
|
||
left: 'center'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data: ['完整性', '准确性', '时效性', '一致性'],
|
||
bottom: 0
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '10%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: ['1月', '2月', '3月', '4月', '5月', '6月']
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
min: 60,
|
||
max: 100,
|
||
axisLabel: {
|
||
formatter: '{value}%'
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '完整性',
|
||
type: 'line',
|
||
smooth: true,
|
||
data: [92, 93, 94, 95, 95.5, 95.8],
|
||
lineStyle: {
|
||
color: '#3B82F6'
|
||
}
|
||
},
|
||
{
|
||
name: '准确性',
|
||
type: 'line',
|
||
smooth: true,
|
||
data: [90, 91, 92, 92.5, 93, 93.2],
|
||
lineStyle: {
|
||
color: '#10B981'
|
||
}
|
||
},
|
||
{
|
||
name: '时效性',
|
||
type: 'line',
|
||
smooth: true,
|
||
data: [85, 86, 87, 88, 89, 89.5],
|
||
lineStyle: {
|
||
color: '#F59E0B'
|
||
}
|
||
},
|
||
{
|
||
name: '一致性',
|
||
type: 'line',
|
||
smooth: true,
|
||
data: [88, 89, 90, 90.5, 91, 91.7],
|
||
lineStyle: {
|
||
color: '#8B5CF6'
|
||
}
|
||
}
|
||
]
|
||
};
|
||
|
||
qualityTrendChart.setOption(qualityTrendOption);
|
||
</script>
|
||
</body>
|
||
</html> |