2-2制作看板-CSDN博客

本文链接：https://blog.csdn.net/2401_90061550/article/details/147470522

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XX网店用户画像分析看板</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<style>
.chart-container {
width: 50%;
float: left;
margin-bottom: 20px;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}

</style>
</head>
<body>
<div class="navbar">
<a href="#home">首页</a>
<a href="#reports">报告</a>
<a href="#analysis">分析</a>
<a href="#settings">设置</a>
</div>
<div class="chart-container">
<div id="purchaseFrequency"></div>
</div>
<div class="chart-container">
<div id="purchaseTimeDistribution"></div>
</div>
<div class="chart-container">
<div id="purchaseHabits"></div>
</div>
<div class="chart-container">
<div id="userPortrait"></div>
</div>

<script>
Highcharts.chart('purchaseFrequency', {
chart: {
type: 'column'
},
title: {
text: '购买频率'
},
xAxis: {
categories: ['每周', '每月', '每季度', '每年']
},
yAxis: {
title: {
text: '人数'
}
},
series: [{
name: '购买频率',
data: [120, 200, 150, 80],
color: '#90CAF9'
}]
});

Highcharts.chart('purchaseTimeDistribution', {
chart: {
type: 'line'
},
title: {
text: '购买时间分布'
},
xAxis: {
categories: ['早晨', '上午', '中午', '下午', '晚上', '深夜']
},
yAxis: {
title: {
text: '购买次数'
}
},
series: [{
name: '时间分布',
data: [30, 100, 60, 120, 80, 40],
color: '#FFECB3'
}]
});

Highcharts.chart('purchaseHabits', {
chart: {
type: 'bar'
},
title: {
text: '购买习惯'
},
xAxis: {
categories: ['促销', '常规', '节假日']
},
yAxis: {
title: {
text: '人数'
}
},
series: [{
name: '购买习惯',
data: [300, 450, 200],
color: '#C5E1A5'
}]
});

Highcharts.chart('userPortrait', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: '用户画像'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
accessibility: {
point: {
valueSuffix: '%'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
name: '比例',
colorByPoint: true,
data: [{
name: '18-25岁',
y: 300,
color: '#FFCCBC'
}, {
name: '26-35岁',
y: 450,
color: '#FFAB91'
}, {
name: '36-45岁',
y: 350,
color: '#FF7043'
}, {
name: '男',
y: 400,
color: '#81D4FA'
}, {
name: '女',
y: 500,
color: '#FFCCBC'
}, {
name: '一线城市',
y: 450,
color: '#FFAB91'
}, {
name: '二线城市',
y: 400,
color: '#FF7043'
}, {
name: '三线城市',
y: 300,
color: '#81D4FA'
}]
}]
});
</script>
</body>
</html>