根据上述文件找出各种数据使用hbuilderx写出完整的保姆级代码
时间: 2024-12-13 13:18:31 浏览: 6
HBuilderX.3.6.4.20220922.zip
根据《大数据可视化考查要求.docx》的内容,以下是使用 HBuilderX 编写的完整代码示例,涵盖所有要求的部分:
### 项目结构
```
项目文件夹
│ index.html
│ style.css
│ script.js
├── css
│ └── custom.css
├── js
│ └── custom.js
└── images
└── logo.png
```
### `index.html`
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>大学生就业趋势与专业分布分析 - 张三 (学号)</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<div class="container">
<header class="text-center my-4">
<h1>大学生就业趋势与专业分布分析</h1>
<p>张三 (学号)</p>
</header>
<section id="charts">
<div class="row">
<div class="col-md-6">
<div id="bar-chart"></div>
</div>
<div class="col-md-6">
<div id="pie-chart"></div>
</div>
</div>
<div class="row mt-4">
<div class="col-md-6">
<div id="radar-chart"></div>
</div>
<div class="col-md-6">
<div id="scatter-chart"></div>
</div>
</div>
</section>
</div>
<script src="js/echarts.min.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
```
### `css/custom.css`
```css
body {
font-family: Arial, sans-serif;
}
#charts div {
height: 400px;
}
```
### `js/custom.js`
```javascript
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/bar');
require('echarts/lib/chart/pie');
require('echarts/lib/chart/radar');
require('echarts/lib/chart/scatter');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
// 柱状图
var barChart = echarts.init(document.getElementById('bar-chart'));
var barOption = {
title: {
text: '不同专业的就业率比较'
},
tooltip: {},
xAxis: {
data: ["计算机科学", "经济学", "法学", "医学"]
},
yAxis: {},
series: [{
name: '就业率',
type: 'bar',
data: [90, 85, 80, 75]
}]
};
barChart.setOption(barOption);
// 饼图
var pieChart = echarts.init(document.getElementById('pie-chart'));
var pieOption = {
title: {
text: '就业地区分布比例'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [{
name: '地区',
type: 'pie',
radius: '50%',
data: [
{value: 335, name: '北京'},
{value: 310, name: '上海'},
{value: 234, name: '广州'},
{value: 135, name: '深圳'}
]
}]
};
pieChart.setOption(pieOption);
// 雷达图
var radarChart = echarts.init(document.getElementById('radar-chart'));
var radarOption = {
title: {
text: '不同专业毕业生的就业能力评估'
},
tooltip: {},
radar: {
indicator: [
{name: '沟通能力', max: 100},
{name: '团队协作', max: 100},
{name: '解决问题', max: 100},
{name: '创新思维', max: 100},
{name: '专业知识', max: 100}
]
},
series: [{
name: '评估',
type: 'radar',
data: [
{
value: [80, 70, 85, 90, 88],
name: '计算机科学'
}
]
}]
};
radarChart.setOption(radarOption);
// 散点图
var scatterChart = echarts.init(document.getElementById('scatter-chart'));
var scatterOption = {
title: {
text: '毕业生的平均薪资与工作年限的关系'
},
tooltip: {},
xAxis: {
name: '工作年限',
type: 'value'
},
yAxis: {
name: '平均薪资 (万元)',
type: 'value'
},
series: [{
name: '薪资 vs 工作年限',
type: 'scatter',
data: [
[1, 5], [2, 7], [3, 9], [4, 12], [5, 15]
]
}]
};
scatterChart.setOption(scatterOption);
```
### 项目报告模板
#### 摘要
简要介绍项目的背景、目的和主要成果。
#### 引言
详细说明项目的研究背景、意义和研究目标。
#### 实验方法
描述数据收集的方法,使用的工具和技术,以及数据处理的过程。
#### 实验结果
展示数据可视化的效果图,包括柱形图、饼图、雷达图和散点图,并进行详细的分析。
#### 实验心得
总结在项目过程中遇到的问题及解决方法,分享个人的心得体会。
#### 参考文献
列出项目中引用的所有参考文献。
### 提交要求
1. 将项目文件夹压缩并命名为“22级网络专1班 + 学号 + 张三.zip”。
2. 提交压缩包和项目报告。
希望这些代码和模板对你有帮助!如果有任何问题,请随时联系我。
阅读全文