gcc/gcc-project-web-25-2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化数据可视化项目

Browse Source
This commit is contained in:
dev_xulongjin
2025-04-27 08:48:28 +08:00
commit 1984d69e6d
41 changed files with 325354 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
experiment_2/img/pisa.hdr Executable file
View File

Binary file not shown.

BIN
experiment_2/img/starfield.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 901 KiB

BIN
experiment_2/img/world.topo.bathy.200401.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

2
experiment_2/js/d3.min.js vendored Executable file
View File

File diff suppressed because one or more lines are too long

65729
experiment_2/js/echarts-gl.js Executable file
View File

File diff suppressed because one or more lines are too long

85683
experiment_2/js/echarts.js Executable file
View File

File diff suppressed because it is too large Load Diff

47
experiment_2/task1.html Executable file
View File

@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D地球</title>
<script src="js/echarts.js"></script>
<script src="js/echarts-gl.js"></script>
</head>
<body>
<div class="chart" id="main" style="width: 800px; height: 600px;"> 3D地球 </div>
<script>
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
backgroundColor: '#000',
globe: {
baseTexture: 'img/world.topo.bathy.200401.jpg',
heightTexture: 'img/world.topo.bathy.200401.jpg',
displacementScale: 0.04,
shading: 'realistic',
environment: 'img/starfield.jpg',
realisticMaterial: {
roughness: 0.9
},
postEffect: {
enable: true
},
light: {
main: {
intensity: 5,
shadow: true
},
ambientCubemap: {
texture: 'img/pisa.hdr',
diffuseIntensity: 0.2
}
}
}
};
option && myChart.setOption(option);
</script>
</body>
</html>

41
experiment_2/task2.html Executable file
View File

@@ -0,0 +1,41 @@
<!DOCTYPE html>
<head>
<title>Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200" style="border: solid 1px red;">
</canvas>
<script>
// 获取Canvas元素并创建2D绘图上下文
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// 绘制一个橙色填充、黑色边框的圆形
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI); // 圆心(100,75)，半径50，完整圆周
ctx.fillStyle = "orange"; // 设置填充颜色为橙色
ctx.strokeStyle = 'black'; // 设置边框颜色为黑色
ctx.fill(); // 填充圆形
ctx.stroke(); // 绘制圆形边框
// 绘制一个绿色填充、红色边框的矩形
ctx.beginPath();
ctx.rect(30, 125, 150, 30); // 矩形左上角坐标(30,125)，宽度150，高度30
ctx.fillStyle = "green"; // 设置填充颜色为绿色
ctx.strokeStyle = 'red'; // 设置边框颜色为红色
ctx.fill(); // 填充矩形
ctx.stroke(); // 绘制矩形边框
// 绘制一个深蓝色填充、紫色边框的竖直矩形
ctx.beginPath();
ctx.rect(30, 10, 20, 115); // 矩形左上角坐标(30,10)，宽度20，高度115
ctx.fillStyle = "navy"; // 设置填充颜色为深蓝色
ctx.strokeStyle = 'purple'; // 设置边框颜色为紫色
ctx.fill(); // 填充矩形
ctx.stroke(); // 绘制矩形边框
</script>
</body>
</html>

22
experiment_2/task3.html Executable file
View File

@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<title>SVG</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<!--
绘制一个多边形，使用 points 属性定义顶点坐标。
样式通过 style 属性设置，包括填充颜色、描边颜色、描边宽度和填充规则。
-->
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill: blue;
stroke: greenyellow;
stroke-width: 5;fill-rule: evenodd;" </svg>
</body>
</html>

20
experiment_2/task4.r Executable file
View File

@@ -0,0 +1,20 @@
# 创建广告投入和销售额的数据向量
x <- c(2,5,1,3,4,1,5,3,4,2) # 广告投入（万元）
y <- c(50,57,41,51,54,38,63,48,59,46) # 销售额（百万元）
# 设置图形参数以提高图形元素的可见性和清晰度
par(cex.axis = 2, # 设置轴刻度标签的放大倍数为2倍
cex.lab = 2, # 设置轴标签文字的放大倍数为2倍
cex.main = 2 # 设置主标题文字的放大倍数为2倍
)
# 绘制广告投入与销售额的散点图，设置点的大小和颜色
plot(x, y,
xlab="广告投入(万元)", # x轴标签
ylab="销售额(百万元)", # y轴标签
main="广告投入与销售额的关系", # 图表标题
pch=19, # 设置点的形状为实心圆点
cex=6, # 设置点的大小为默认大小的两倍
col="orange", # 设置点的颜色为橙色
family='STXihei' ,# 中文库
)

50
experiment_2/task5.html Executable file
View File

@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>d3</title>
<script src="http://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<script>
// 定义SVG画布的宽度和高度
var width = 600;
var height = 600;
// 创建SVG画布并将其添加到body中，设置画布的宽度和高度
var svg = d3.select("body").append("svg")
.attr("width",width)
.attr("height",height);
// 定义数据集，每个数值表示一个矩形条的长度比例
var dataset = [30,20,35,32,21];
// 定义颜色比例尺，将数据值映射到颜色
var colorScale = d3.scaleLinear()
.domain([d3.min(dataset), d3.max(dataset)]) // 数据值范围
.range(["blue", "red"]); // 颜色范围
// 绑定数据到SVG中的rect元素，并根据数据生成矩形条
svg.selectAll("rect")
.data(dataset) // 绑定数据集到rect元素
.enter() // 为数据集中每个元素创建一个新的rect元素
.append("rect") // 添加rect元素到SVG中
.attr("x",10) // 设置矩形条的起始x坐标
.attr("y",function(d,i){
// 根据索引计算每个矩形条的y坐标，确保它们垂直排列
return i * 30;
})
.attr("width",function(d,i){
// 根据数据值动态设置矩形条的宽度
return d * 10;
})
.attr("height",28) // 设置矩形条的高度
.attr("fill", function(d) {
// 根据数据值动态设置填充颜色
return colorScale(d);
});
</script>
</body>
</html>