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>
|