基本案例
基于案例修改后效果图如下:
代码:
<html>
<head>
<meta charset="utf-8" />
</head>
<style>
.container {
width: 600px;
margin: 20px auto;
padding: 20px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
border-radius: 12px;
text-align: center;
}
h1 {
border-bottom: 3px solid #000;
padding-bottom: 12px;
}
</style>
<body>
<div class="container">
<h1>应用使用时长</h1>
<div id="highchart"></div>
</div>
</body>
<script src="./js/jquery.min.js"></script>
<script src="./js/highcharts.js"></script>
<script>
let max = 21600;
let min = 3600;
let appxa = [
"王者荣耀",
"微信",
"百度网盘",
"VS code",
"网易云",
"QQ",
"谷歌浏览器",
"新浪微博微博",
"微信开发者工具",
];
let option = {
chart: {
type: "bar",
},
colors: ["#D84E13"],
title: {
text: null,
},
legend: {
enabled: false,
},
credits: {
enabled: false,
},
xAxis: {
lineWidth: 0,
gridLineWidth: 0,
},
yAxis: {
min: 0,
title: {
text: null,
},
labels: {
enabled: false,
},
lineWidth: 0,
gridLineWidth: 0,
},
tooltip: {
pointFormat:
'<span style="color:#D84E13">\u25CF</span>{series.name} : {point.time}<br/>',
},
plotOptions: {
series: {
borderRadius: 6,
},
bar: {
dataLabels: {
enabled: true,
align: "left",
style: {
fontWeight: "normal",
textOutline: "none",
},
formatter: function () {
return this.point.time;
},
},
},
},
series: [
{
name: "使用时间",
data: [],
},
],
};
$(function () {
let fomatDate = (sec) => {
let h = Math.floor(sec / 3600);
let m = Math.floor((sec % 3600) / 60);
return `${h}小时${m}分钟`;
};
for (let i = 0; i < 9; i++) {
let time = min + Math.round(Math.random() * (max - min));
option.series[0].data[i] = {
name: appxa[i],
y: time,
time: fomatDate(time),
dataLabels: {
inside: time > 7200 ? true : false,
style: {
color: time > 7200 ? "#fff" : "#000",
},
},
};
}
// 排序
option.series[0].data.sort((a, b) => {
return b.y - a.y;
});
// 设置 x轴
let formatName = [];
for (let j = 0; j < appxa.length; j++) {
formatName[j] = option.series[0].data[j].name;
}
option.xAxis.categories = formatName;
$("#highchart").highcharts(option);
});
</script>
</html>