各组完成率的统计与分析的这样一个综合案例
可以使用HTML ,JS,Echarts 来完成制作
我们可以借助于AIGC,ChatGPT 人工智能来帮我们完成代码的输出。
在ChatGPT中我们只需要发送指令就可以了。
例如:请使用HTMl与JS,Echarts完成一个动态仪表盘的实例,可以随机生成不同的数据,在一个页面中生成8个不同的仪表盘,第1个图表的标题为第1组完成率,第2个图表的标题为第2组完成率,后面的图表标题以此类推。
完整代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dynamic Dashboard</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<style>
.chart {
width: 300px;
height: 300px;
display: inline-block;
}
</style>
</head>
<body>
<div id="dashboard"></div>
<script>
// 随机生成仪表盘数据
function generateData() {
return Math.floor(Math.random() * 101); // 生成0到100之间的随机数
}
// 创建仪表盘图表
function createGaugeChart(containerId, title) {
var container = document.getElementById(containerId);
var chart = echarts.init(container);
var option = {
title: {
text: title,
left: 'center'
},
series: [
{
name: '完成率',
type: 'gauge',
detail: {formatter: '{value}%'},
data: [{value: generateData(), name: '完成率'}]
}
]
};
chart.setOption(option);
// 更新仪表盘数据
setInterval(function () {
option.series[0].data[0].value = generateData();
chart.setOption(option);
}, 300);
}
// 创建8个仪表盘
function createDashboard() {
var dashboard = document.getElementById('dashboard');
for (var i = 1; i <= 8; i++) {
var containerId = 'chart' + i;
var title = '第' + i + '组完成率';
var container = document.createElement('div');
container.id = containerId;
container.className = 'chart';
dashboard.appendChild(container);
createGaugeChart(containerId, title);
}
}
createDashboard();
</script>
</body>
</html>
将上述代码保存为HTML文件,打开即可得到多个仪表盘显示各组完成率的情况。
更多实战案例如下:
AIGC ChatGPT 职场案例
AI 绘画 与 短视频制作
PowerBI 商业智能 68集
数据库Mysql 8.0 54集
数据库Oracle 21C 142集
Office 2021实战应用
Python 数据分析实战,
ETL Informatica 数据仓库案例实战
Excel 2021实操 100集,
Excel 2021函数大全 80集
Excel 2021高级图表应用89集,
Excel 2021大屏可视化制作 56集
Excel 2021实用技巧300集
PPT 2021 商业汇报实战应用69集
数据分析可视化Tableau 80集
数据可视化FineReport 50集
送你各类文档模板PPT,表格,大屏可视化 超过5000+模板
案例实战 https://edu.csdn.net/combo/detail/2552
以上内容在:https://edu.csdn.net/lecturer/840?spm=1002.2001.3001.4144
以上内容在: 以上内容在:https://edu.csdn.net/lecturer/840?spm=1002.2001.3001.4144
以上内容在:https://edu.csdn.net/lecturer/840?spm=1002.2001.3001.4144
以上内容在:https://edu.csdn.net/lecturer/840?spm=1002.2001.3001.4144