SYSUI自定义图表示例

ziblog

已于 2025-06-27 13:22:14 修改

阅读量673

点赞数 25

CC 4.0 BY-SA版权

文章标签：图表

于 2025-06-09 17:31:18 首次发布

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148539267

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SYSUI自定义图表示例</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f5f7fa;
margin: 0;
padding: 20px;
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 30px;
padding: 20px;
background: linear-gradient(135deg, #6e8efb, #a777e3);
color: white;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.chart-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.chart-box {
background: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: calc(50% - 40px);
min-width: 300px;
transition: transform 0.3s ease;
}
.chart-box:hover {
transform: translateY(-5px);
}
.chart-title {
text-align: center;
margin-bottom: 15px;
color: #555;
font-weight: bold;
}
.footer {
text-align: center;
margin-top: 30px;
padding: 20px;
color: #777;
font-size: 14px;
}
.link {
color: #6e8efb;
text-decoration: none;
}
.link:hover {
text-decoration: underline;
}
@media (max-width: 768px) {
.chart-box {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>SYSUI 自定义图表示例</h1>
<p>使用Chart.js实现的数据可视化效果</p>

</div>

<div class="chart-container">
<div class="chart-box">
<h3 class="chart-title">月度销售额</h3>
<canvas id="barChart"></canvas>
</div>

<div class="chart-box">
<h3 class="chart-title">满意度评分</h3>
<canvas id="radarChart"></canvas>
</div>
</div>

// 饼图
const pieCtx = document.getElementById('pieChart').getContext('2d');
const pieChart = new Chart(pieCtx, {
type: 'pie',
data: {
labels: ['产品A', '产品B', '产品C', '产品D'],
datasets: [{
data: [35, 25, 20, 20],
backgroundColor: [
'rgba(110, 142, 251, 0.7)',
'rgba(167, 119, 227, 0.7)',
'rgba(75, 192, 192, 0.7)',
'rgba(255, 159, 64, 0.7)'
],
borderColor: [
'rgba(110, 142, 251, 1)',
'rgba(167, 119, 227, 1)',
'rgba(75, 192, 192, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'right',
}
},
animation: {
animateScale: true,
animateRotate: true
}
}
});

// 折线图
const lineCtx = document.getElementById('lineChart').getContext('2d');
const lineChart = new Chart(lineCtx, {
type: 'line',
data: {
labels: ['2018', '2019', '2020', '2021', '2022', '2023'],
datasets: [{
label: '年度销售额 (万元)',
data: [85, 92, 78, 105, 120, 135],
fill: false,
backgroundColor: 'rgba(167, 119, 227, 0.7)',
borderColor: 'rgba(167, 119, 227, 1)',
tension: 0.3,
borderWidth: 3
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: false
}
},
animation: {
duration: 2000
}
}
});

// 雷达图
const radarCtx = document.getElementById('radarChart').getContext('2d');
const radarChart = new Chart(radarCtx, {
type: 'radar',
data: {
labels: ['产品质量', '客户服务', '交付速度', '价格竞争力', '售后服务'],
datasets: [{
label: '客户满意度',
data: [8, 7.5, 9, 7, 8.5],
backgroundColor: 'rgba(110, 142, 251, 0.2)',
borderColor: 'rgba(110, 142, 251, 1)',
pointBackgroundColor: 'rgba(110, 142, 251, 1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(110, 142, 251, 1)'
}]
},
options: {
responsive: true,
scales: {
r: {
angleLines: {
display: true
},
suggestedMin: 0,
suggestedMax: 10
}
},
animation: {
duration: 2000
}
}
});
</script>
</body>
</html>