词云图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>词云图</title>
<!-- 第①空，从实训要求素材中下载wordcloud2.js 文件，并在下行写出语句将其引入到网页 -->
<script src="js/wordcloud2.js"></script>
</head>
<body>
<!-- 第②空，在下面div元素中写出使元素（内容）居中对齐的设置 -->
<div id="canvas-container" style="text-align:center;">
<!-- 第③空，在下面写出创建画布元素的代码，要求画布的宽*高为600*400像素 -->
<canvas id="cavsElem" width="600" height="400">
您的浏览器不支持canvas
</canvas>
</div>
</body>
</html>
<script>
var options = eval({
"list": [
['我爱中国', 10],
['神舟火箭', 9],
['空间站', 7],
['北斗系统', 6],
['5G', 4],
['6G', 5],
['C919飞机', 8],
/*第④空，在下面写出关键词为‘天宫二号’，词频为6的列表项*/
['天宫二号',6],
['大国重器', 10],
['航母',7],
['歼20',8],
['东风51D',9],
['核武器',8],
['原子弹',9],
['中子弹',7],
['氢弹',6],
['新冠疫苗',8],
['高铁',7],
/*第⑤空，在下面写出关键词为‘蛟龙号’，词频为8的列表项*/
['蛟龙号',8]
],
"gridSize": 10, // size of the grid in pixels
"weightFactor": 5, // number to multiply for size of each word in the list
"fontWeight": 'normal', // 'normal', 'bold' or a callback
"fontFamily": 'Times, serif', // font to use
"color": 'random-light', // 'random-dark' or 'random-light'
/*第⑥空，在下面写出画布颜色（backgroundColor）为白色的设置*/
"backgroundColor":'#fff',
"rotateRatio": 1 // probability for the word to rotate. 1 means always rotate
});
/*第⑥空，在下面写出获取画布对象的代码*/
var canvas = document.getElementById("cavsElem");
/*第⑦空，在下面写出为画布设置1像素大小黑色边框的代码*/
canvas.style.border="1px solid black";
WordCloud(canvas, options); //调用WordCloud()生成词云图
</script>
<!DOCTYPE html>
<html>
论文
<head lang="en">
<meta charset="UTF-8">
<title>论文排版技巧</title>
</head>
<style>
h1,
h4 {
/*第①空，在下行写出使文章标题文字内容居中的样式声明代码*/
text-align: center;
}
.spanall {
/*第②空，在下行写出使摘要内容跨所有的样式声明代码*/
column-span: all;
text-indent: 0em;
}
.secgragh {
width: 1000px;
/*第③空，在下行写出使段落内容分2栏排版的声明代码*/
column-count: 2;
/*指定每列固定宽度，列的实际宽度和容器宽度有关*/
column-width: 450px;
/*设置列与列之间的空隙*/
column-gap: 2em;
/*第④空，在下行写出设置列中间的分割线为1像素的银色实线的代码*/
column-rule: 1px solid silver;
font-size: 18px;
/*第⑤空，在下行写出使元素水平居中的声明代码*/
margin: 0 auto;
}
.indent {
/*第⑥空，在下行写出使段落文字首行缩进2个字符的声明代码*/
text-indent: 2em;
}
span {
/*第⑦⑧空，在下面2行写出使摘要文字首字下沉2行的声明代码*/
float: left;
font-size: 2em;
line-height: 1.2em;
width: 1.2em;
}
img {
width: 450px;
height: 400px;
}
img:hover {
/*第⑨空，在行写出使鼠标悬停图片产生半透明效果的声明代码*/
opacity: 0.5;
}
.ficcapt {
width: 400px;
text-align: center;
/*第⑩空，在行写出使a元素变为块元素的声明代码*/
display: block;
}
<yle>
<body>
<h1>怀化学院人才培养模式创新实践</h1>
<div class="secgragh indent">
<h4 class="spanall">摘要</h4>
<p class="spanall">
<span>怀</span>化学院创新人才培养模式，加大校企合作力度，与国内众多知名企业联合，充分利用企业优质资源，培养学生应用创新能力，人才培养质量显著提高，为国家培养了一大批应用型人才，得到了社会用人单位的高度肯定。
</p>
<p>
北京千锋教育科技有限公司是一家专门致力于高素质软件开发人才培养的高科技公司。它依托程序员平台 csdn
,整合了国内众多知名软件企业的资源,并邀请到任跨国公司和国内大中型企业架构师,系统分析师、企业培训师组成自己的团队。
</p>
<p>
传智播客致力于为企业培养人才的培训理念，以“学员自学入门教程，通过基础考核后进行强化培训”为招生原则，以“针对企业需求，重视基础理论建设，强化高端应用技能”为教学目标，以“高薪保证强大的资深教育团队”为教学后盾，解决所有培训学员的后顾之忧，并解决用人企业难以招聘到合格人才的困扰。
</p>
<p>
他们都对CSS即层叠样式表（Cascading StyleSheet）比较推崇。认为在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括：
盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。
<img src="pic.jpg" alt="CSS3" style=""><!--插入图片-->
<a class="ficcapt">图1 素质拓展活动</a>
</p>
</div>
</body>
<html>
疫情
<!DOCTYPE html>
<html style="height:100%;">
<head>
<meta charset="utf-8">
<title>疫情数据可视化</title>
<!-- /*第①空，在下行写出引入ECharts支持组件echarts.min.js的代码*/ -->
<script src="js/echarts.min.js"></script>
<!-- /*第②空，在下行写出引入中国地图组件china.js的代码。组件见实训材料包。*/ -->
<script src="js/china.js"></script>
<style type="text/css">
.fd {
position: relative;
/*第③空，在下行写出使元素左浮动的声明代码*/
float: left;
}
</style>
</head>
<body style="height:100%;">
<div class="fd" style="width:25%;height:100%;">
<div id="qs" style="height:50%;"></div>
<div id="top10" style="height:50%;"></div>
</div>
<div class="fd" id="main" style="width:50%;height:100%;"></div>
<div class="fd" id="gc" style="width:25%;height:100%;"></div>
<script>
var mydata = [{
name: '北京',
value: 9
}, {
name: '天津',
value: 15
}, {
name: '上海',
value: 59
}, {
name: '重庆',
value: 0
}, {
name: '河北',
value: 1
}, {
name: '河南',
value: 19
}, {
name: '云南',
value: 174
}, {
name: '辽宁',
value: 13
}, {
name: '黑龙江',
value: 13
}, {
name: '湖南',
value: 5
}, {
name: '安徽',
value: 0
}, {
name: '山东',
value: 26
}, {
name: '新疆',
value: 0
}, {
name: '江苏',
value: 4
}, {
name: '浙江',
value: 51
}, {
name: '江西',
value: 0
}, {
name: '湖北',
value: 12
}, {
name: '广西',
value: 28
}, {
name: '甘肃',
value: 0
}, {
name: '山西',
value: 1
}, {
name: '内蒙古',
value: 6
}, {
name: '陕西',
value: 8
}, {
name: '吉林',
value: 3
}, {
name: '福建',
value: 58
}, {
name: '贵州',
value: 0
}, {
name: '广东',
value: 34
}, {
name: '青海',
value: 0
}, {
name: '西藏',
value: 0
}, {
name: '四川',
value: 14
}, {
name: '宁夏',
value: 0
}, {
name: '海南',
value: 0
}, {
name: '台湾',
value: 1749
}, {
name: '香港',
value: 90
}, {
name: '澳门',
value: 11
}];
yAxis: {
type: 'value'
},
series: [{
name: '现存确诊',
type: 'line',
//第⑧空，在下行写出使折线图的连线为平滑曲线的代码
smooth: true,
data: [120, 132, 101, 134, 90, 230, 210]
}, {
name: '现存疑似',
type: 'line',
data: [220, 182, 191, 234, 290, 330, 310]
}],
color: ['#ff0000', '#c23531']
};
var chartline = echarts.init(document.getElementById('qs'));
chartline.setOption(optionline);
var optionpie = {
title: {
text: '全国现有确诊构成',
subtext: '（单位：例）',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
top: 50,
orient: 'vertical',
left: 'left',
data: ['港澳台病例', '31省本土病例', '境外输入病例']
},
series: [{
name: '现存确诊',
//第⑨空，在下行写出使用饼图渲染数据的代码
type: "pie",
radius: '55%',
center: ['50%', '60%'],
data: [{
value: 1849,
name: '港澳台病例'
}, {
value: 55,
name: '31省本土病例'
}, {
value: 2367,
name: '境外输入病例'
}],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
var chartpie = echarts.init(document.getElementById('gc'));
chartpie.setOption(optionpie);
var optionbar = {
title: {
text: '境外输入确诊省市TOP10',
subtext: '数据来自网络'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
inverse: true,
type: 'category',
data: ['上海', '广东', '云南', '福建', '四川', '黑龙江', '陕西', '北京', '浙江', '天津']
},
series: [{
type: 'bar',
//第⑩空，在下行写出使柱状图的条块为红色的代码
color: "red",
data: [2289, 1629, 1060, 510, 473, 403, 401, 287, 205, 179]
}]
};
var chartbar = echarts.init(document.getElementById('top10'));
chartbar.setOption(optionbar);
</script>
</body>
</html>
4731
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
