注：本次作业出现的爬取行为仅用于课程教学
文章目录
git仓库链接和代码规范链接
PSP表格
| PSP | Personal Software Process Stages | 预估耗时（分钟） | 实际耗时（分钟） |
|---|---|---|---|
| Planning | 计划 | 11 | 11 |
| • Estimate | • 估计这个任务需要多少时间 | 11 | 11 |
| Development | 开发 | 2150 | 3608 |
| • Analysis | • 需求分析 (包括学习新技术) | 120 | 847 |
| • Design Spec | • 生成设计文档 | 30 | 53 |
| • Design Review | • 设计复审 | 30 | 95 |
| • Coding Standard | • 代码规范 (为目前的开发制定合适的规范) | 50 | 64 |
| • Design | • 具体设计 | 60 | 83 |
| • Coding | • 具体编码 | 1200 | 2139 |
| • Code Review | • 代码复审 | 60 | 34 |
| • Test | • 测试（自我测试，修改代码，提交修改） | 600 | 293 |
| Reporting | 报告 | 390 | 529 |
| • Test Report | • 测试报告 | 60 | 72 |
| • Size Measurement | • 计算工作量 | 30 | 16 |
| • Postmortem & Process Improvement Plan | • 事后总结, 并提出过程改进计划 | 300 | 441 |
| 合计 | 2551 | 4148 |
成品展示
注：以下图片中的导航栏显示不同是由于展示电脑有的不支持华文行楷字体
1. 首页
-
进入到项目后映入眼帘的是首页
废话- 我们的首页基本按照原型图进行设计，不同的是这次的首页补上了之前漏掉的颜色区间说明和我们的版权设计（嘿嘿），并在导航栏中新加上“了解更多”、“夺金时刻”；我们也去掉了总奖牌显示，因为觉得放着不太美观；对上次助教提出的建议，我们修改了地图区块的配色
- 如同第一次结对作业所说，10提出了很棒的主意，即把奖牌地图放在首页，这样从一开始就很引人注目
- 导航栏的设计依旧使用墩串串，真可爱我们的宝贝墩墩。点击导航栏的文字可进行对应网页的跳转。
- 把鼠标放在不同国家的版图上（也可以单击），会高亮显示（对应国家领土变为蓝色）对应国家的国家名（俄罗斯为奥运代表队）、奖牌总数和金银铜牌的介绍
- 也可以通过点击旁边的颜色区间来出现对应奖牌总数区间的国家
2. 奖牌总览
-
在导航栏点击奖牌总览进入到奖牌总榜、
显示各国代表团的奖牌数及最终排行，中国以绿色背景突出显示
3. 每日赛程
在导航栏点击每日赛程进入到奖牌总榜、
- 面板上方以轮播图的形式展示冬奥的精彩时刻，用户可通过日期、项目、场馆的下拉列表框选择想要查看的赛程。
- 选择日期时，“日期赛程”颜色会加深，以告诉用户当前显示的是所选日期下的赛程。选择项目下拉列表框和场馆下拉列表框时同理。
- 分别选取了冰壶、自由式滑雪和短道速滑的第一场比赛设计详细赛程，因此可通过点击每日赛程中“数据”一栏的“详细数据”打开对应的详细赛程。（快速查找到三个赛程的小技巧：通过项目下拉框分别选择三个项目，即可在第一行看到对应赛程）
4. 附加功能
-
详细赛程
- 通过点击每日赛程中“数据”一栏的“详细数据”进入详细赛程
- 面板上方以轮播图的形式展示冬奥的精彩时刻，展示单项比赛的成绩公报，包含对应项目的参赛选手、得分、排行等比赛数据，还引入了冬奥运动图标。
以下为“02-02 20:05 冰壶 混双循环赛第1轮 瑞典 VS 英国”比赛的详细数据
以下为“02-03 18:00 自由式滑雪 女子雪上技巧资格赛第1轮”比赛的详细数据
以下为“02-05 19:00 短道速滑 女子500米预赛第1组”比赛的详细数据
-
夺金时刻
- 夺金时刻这次移入了导航栏。在上次作业对助教评论的回复中我说会想想怎么样做的更美观，虽然我想到了做美观的方法（在打开此页面时一条一条的轮播显示像绽开的花一样）但是我做不出来QAQ，对不起是我太菜了还口出狂言
- 所以这次还是简单的箭头表示QAQ
-
了解更多
-
了解更多中展示了2022北京冬奥会、2018平昌冬奥会、2014索契冬奥会三个年份冬奥会的吉祥物
-
索契冬奥会吉祥物人多势众，害我们的宝贝墩墩没法在C位，点名批评
-
结对讨论过程描述
- 拿到问题之后，我和队友进行了详尽的讨论，明确好项目的实现形式，各自的分工之后，我们就各自开始了工作
- 在项目中我们遇到了很多问题都有一起讨论，解决问题时查找的资料也有互相分享
这里举例关于导航栏的讨论
设计实现过程
本次项目实现采用前端三大件：HTML+JS+CSS
1. 功能结构图
2. 页面结构分布
页面分为了导航栏、主要内容区和页脚，部分页面有边栏（雪山滑板墩），使用CSS对各区块范围进行划分
-
导航栏
- 导航栏首先需要有一只穿着墩墩的串串，我思考过使用图片，但是也并不好到时候进行修改维护。最后在搜索下找到了对块进行CSS设计达到效果。不过因为那时候实现串串就过了，忘记保存学习的那个网址，还是在这里表示一下感谢！
- 接下来是把墩墩和串串变成墩串串，就是纯粹的CSS啦
- 在部署后网页出现了导航栏位置下沉的情况，10同学打开我发的文件也会有导航栏片偏差，但我本地项目打开又是正常的，我就感觉到匪夷所思啊，后来又对CSS进行了修改把导航栏上提，导航栏总算不乱跑了。
-
其他结构安排就是逐渐掌握CSS神通
3. 奖牌地图
奖牌地图使用echarts实现
- 奖牌地图一开始给我无从下手的感觉，感觉在网页实现简直是我的天啊，太可怕了，难道我要一个个描点再写交互吗？搜了很多资料告诉我用echarts，但是那时候还弄不明白这倒底是个啥玩意儿（真的看不懂他们到底在说啥），所以打算先把地图再画出来，然后再下载对应的json数据（在画原型图时用了魔法在海的彼岸的网站画的，那时候只保存了画好的图片，而且后来才发现那边的地图有鬼！）
- 于是我成为了一名高德地图个人地图开发者，但对世界地图没法做到我想要的效果，我就又成了一名百度地图个人开发者，但是有没有达到效果，我后来又…总之我成了很多地图网站的开发者，但是始终做不到应有的效果，这时候还是很感叹的，希望国内也有优秀的寸土不让的地图制作网站。在这个时候，搜到一个命运般的网站，天呐，讲解的那叫一个清晰啊，建立了我对echarts的初步认知。
- 当然建立了初步认知之后我就开始看得懂之前的资料了，然后通过echarts先整了一个初步的地图雏形出来，就是简单的世界地图。在给他上色之前，我想起了上次漏掉的颜色区块说明，于是打算先实现区块说明。但是要怎么实现呢，我发现了很多使用echarts做的扇形图什么的，最后在看过一个柱状图之后，我发现了visualMap。
- 一开始使用visualMap是做成了连贯的渐变长条，再深入的学习之后发现了可以做成离散的，切分为五段刚好符合我的要求。做成这个就是对每个属性都深入的研究，然后尝试，比如发现“categories”这个属性会和地图冲突，就改掉。
- 地图和各国的交互就是对“series”和“tooltrips”各个属性的学习。一开始nameMap是自己手打的，只打了奖牌榜出现的国家。后来想了想这玩意儿网上应该有，果不其然一搜就有。又学习学习，在做tooltrips对使用自己的简介又犯了难，又是学习学习学习最后发现可以在series中的data写出自己想要的内容，然后在tooltrips中使用parmas对要呈现的操作。总之就是学习学习再学习。
4. 每日赛程、奖牌总榜、详细数据
从官网获取json数据存在代码中，每日赛程和奖牌总榜以及详细赛程的数据都是从json中获取并以表格的形式呈现
5. 夺金时刻、了解更多
- 夺金时刻因为指示弯弯曲曲的箭头加各个位置的文本框实在是太复杂了，时间也没有很允许，所以直接截了原型图中的图放了进去，还是把内容呈现出来了。
- 了解更多就还是用上了上次结对作业学会的PS技术，对各个吉祥物进行了处理，主要是PS里的处理。处理了以后呈现出来还是不难的。
6. 项目部署
- 对项目部署一开始还是很茫然的，这次项目一开始先做了这个的前期准备工作，因为听说一些备案要花费时间。就各种学习，然后买了服务器（准确的说是免费试用）。然后就兴冲冲地去买了我们想要的域名，然后发现要三天才能备案，备了案才能用。然后又发现要使用备案的域名，服务器也要备案，服务器备案使用试用的服务器是不行的。考虑到我们接下来一年内暂时可能不会使用到服务器，于是我们虽然很不舍得，但是我们还是放弃了使用域名。
- 最后的部署也遇到了很多的困难，比如一开始服务器打算用的是windows操作系统，最后由于部署各种不适配还是换回了linux，然后就是学习和尝试。最后遇到的最大问题就是我不想IP地址后面还要切到文件名，即默认自己的首页。可能是对linux系统的不熟悉，也可能是对nginx配置不熟悉，很有可能就是我菜，试了很久很久用了各种方法还是没有成功，这个最后也没有做到输入IP直接进入自己的首页。
代码说明
1. 导航栏实现
<!-- 导航栏-->
<div class="nav">
<!-- 首页-->
<img src="picture/dun_1.png" alt="墩墩1" id="dundun1">
<div id="homepage_label"></div>
<a href="Homepage.html" id="homepage_font">首页</a>
<!-- 奖牌总览-->
<img src="picture/dun_1.png" alt="墩墩1" id="dundun2">
<div id="totalmetal_label"></div>
<a href="Totalmetal.html" id="totalmetal_font">奖牌总览</a>
<!-- 每日赛程-->
<img src="picture/dun_1.png" alt="墩墩1" id="dundun3">
<div id="dailyschedule_label"></div>
<a href="Dailyschedule.html" id="dailyschedule_font">每日赛程</a>
<!-- 了解更多-->
<img src="picture/dun_1.png" alt="墩墩1" id="dundun4">
<div id="knowmore_label"></div>
<a href="Knowmore.html" id="knowmore_font">了解更多</a>
<!-- 夺金时刻-->
<img src="picture/dun_1.png" alt="墩墩1" id="dundun5">
<div id="goldGet_label"></div>
<a href="goldGet.html" id="goldGet_font">夺金时刻</a>
</div>
.nav{
float: left;
width: 300px;
height: 700px;
position: absolute;
}
a{
text-decoration: none;
}
#homepage_label{
width: 0;
height: 50px;
position: absolute;
margin: 50px 50px;
border-left: 3px solid #00FFFF;
border-radius: 2px;
z-index: 1;
}
#dundun1{
margin: 0px 25px;
position: absolute;
width: 60px;
height: 60px;
z-index: 2;
}
#homepage_font{
width: 120px;
font-size: 40px;
font-family: 华文行楷;
position: absolute;
margin: 50px 120px;
color: #00FFFF;
}
#totalmetal_label{
width: 0;
height: 50px;
position: absolute;
margin: 210px 50px;
border-left: 3px solid #FFD700;
border-radius: 2px;
z-index: 1;
}
#dundun2{
margin: 160px 25px;
position: absolute;
width: 60px;
height: 60px;
z-index: 2;
}
#totalmetal_font{
width: 200px;
font-size: 40px;
font-family: 华文行楷;
position: absolute;
margin: 210px 90px;
color: #FFD700;
}
#dailyschedule_label{
width: 0;
height: 50px;
position: absolute;
margin: 370px 50px;
border-left: 3px solid #02A7F0;
border-radius: 2px;
z-index: 1;
}
#dundun3{
margin: 320px 25px;
position: absolute;
width: 60px;
height: 60px;
z-index: 2;
}
#dailyschedule_font{
width: 200px;
font-size: 40px;
font-family: 华文行楷;
position: absolute;
margin: 370px 90px;
color: #02A7F0;
}
#knowmore_label{
width: 0;
height: 50px;
position: absolute;
margin: 680px 50px;
border-left: 3px solid #f15a22;
border-radius: 2px;
z-index: 1;
}
#dundun4{
margin: 640px 25px;
position: absolute;
width: 60px;
height: 60px;
z-index: 2;
}
#knowmore_font{
width: 200px;
font-size: 40px;
font-family: 华文行楷;
position: absolute;
margin: 680px 90px;
color: #f15a22;
}
#goldGet_label{
width: 0;
height: 50px;
position: absolute;
margin: 530px 50px;
border-left: 3px solid #ffe600;
border-radius: 2px;
z-index: 1;
}
#dundun5{
margin: 480px 25px;
position: absolute;
width: 60px;
height: 60px;
z-index: 2;
}
#goldGet_font{
width: 200px;
font-size: 40px;
font-family: 华文行楷;
position: absolute;
margin: 530px 90px;
color: #ffe600;
}
2. 地图和颜色区块说明实现
- 颜色区块
visualMap: {
left: "10%",//组件离容器左侧的距离
type: "piecewise",//定义为分段型 viusalMap
// splitNumber:5,//自动平均切分成5段
pieces: [ //自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式
{min: 20, max: 37,color:"#f05b72"},
{min: 11, max: 19,color:"#ffe600"},
{min: 5, max: 9,color:"#8FCE01"},
{min: 1, max: 4,color:"#008792"},
{min: 0,max:0,color:"#EEEEEE"} // 不指定 min，表示 min 为无限大（-Infinity）。
],
min: 0, //指定 visualMapContinuous 组件的允许的最小值
max: 37,//指定 visualMapContinuous 组件的允许的最大值
itemWidth:40,//长条的宽度
itemHeight:50,//长条的高度
// categories:['20-37', '10-19', '5-9', '1-4', '0'], //用于表示离散型数据（或可以称为类别型数据、枚举型数据）的全集
inRange: { //定义在选中范围中的视觉元素
color: [
'#f05b72',
'#ffe600',
'#8FCE01',
'#008792',
'#EEEEEE'
]
},
text: [' 37', ' 0'],//两端的文本
textStyle: {//字体样式
fontSize: 18,//字号
fontWeight: 'bolder',
color: "#cde6c7"//文字颜色
},
showLabel:true,
calculable: false,//不显示拖拽用的手柄
hoverLink:true//鼠标悬浮到visualMap组件上时，鼠标位置对应的数值在图表中对应的图形元素会高亮
},
- 地图
"color": ['#f05b72',
'#ffe600',
'#8FCE01',
'#008792',
'#EEEEEE'],
"series": [
{
"type": "map", //地图数据表
map:"world",//地图类型。world世界地图
name:"总奖牌数:",
"label": {
normal: {
"show": false,
"position": "top",
"margin": 8,
},
emphasis: {
"show": true,
"position": "top",
"margin": 8,
textStyle: {//字体样式
fontSize: 15,//字号
fontWeight: 'bolder',
color: "#ed1941"//文字颜色
},
areaColor:"#8552a1",
}
},
//自定义地区的名称映射
nameMap:{
'Canada': '加拿大',
'Turkmenistan': '土库曼斯坦',
'Saint Helena': '圣赫勒拿',
'Lao PDR': '老挝',
'Lithuania': '立陶宛',
'Cambodia': '柬埔寨',
'Ethiopia': '埃塞俄比亚',
'Faeroe Is.': '法罗群岛',
'Swaziland': '斯威士兰',
'Palestine': '巴勒斯坦',
'Belize': '伯利兹',
'Argentina': '阿根廷',
'Bolivia': '玻利维亚',
'Cameroon': '喀麦隆',
'Burkina Faso': '布基纳法索',
'Aland': '奥兰群岛',
'Bahrain': '巴林',
'Saudi Arabia': '沙特阿拉伯',
'Fr. Polynesia': '法属波利尼西亚',
'Cape Verde': '佛得角',
'W. Sahara': '西撒哈拉',
'Slovenia': '斯洛文尼亚',
'Guatemala': '危地马拉',
'Guinea': '几内亚',
'Dem. Rep. Congo': '刚果（金）',
'Germany': '德国',
'Spain': '西班牙',
'Liberia': '利比里亚',
'Netherlands': '荷兰',
'Jamaica': '牙买加',
'Solomon Is.': '所罗门群岛',
'Oman': '阿曼',
'Tanzania': '坦桑尼亚',
'Costa Rica': '哥斯达黎加',
'Isle of Man': '曼岛',
'Gabon': '加蓬',
'Niue': '纽埃',
'Bahamas': '巴哈马',
'New Zealand': '新西兰',
'Yemen': '也门',
'Jersey': '泽西岛',
'Pakistan': '巴基斯坦',
'Albania': '阿尔巴尼亚',
'Samoa': '萨摩亚',
'Czech Rep.': '捷克',
'United Arab Emirates': '阿拉伯联合酋长国',
'Guam': '关岛',
'India': '印度',
'Azerbaijan': '阿塞拜疆',
'N. Mariana Is.': '北马里亚纳群岛',
'Lesotho': '莱索托',
'Kenya': '肯尼亚',
'Belarus': '白俄罗斯',
'Tajikistan': '塔吉克斯坦',
'Turkey': '土耳其',
'Afghanistan': '阿富汗',
'Bangladesh': '孟加拉国',
'Mauritania': '毛里塔尼亚',
'Dem. Rep. Korea': '朝鲜',
'Saint Lucia': '圣卢西亚',
'Br. Indian Ocean Ter.': '英属印度洋领地',
'Mongolia': '蒙古',
'France': '法国',
'Cura?ao': '库拉索岛',
'S. Sudan': '南苏丹',
'Rwanda': '卢旺达',
'Slovakia': '斯洛伐克',
'Somalia': '索马里',
'Peru': '秘鲁',
'Vanuatu': '瓦努阿图',
'Norway': '挪威',
'Malawi': '马拉维',
'Benin': '贝宁',
'St. Vin. and Gren.': '圣文森特和格林纳丁斯',
'Korea': '韩国',
'Singapore': '新加坡',
'Montenegro': '黑山共和国',
'Cayman Is.': '开曼群岛',
'Togo': '多哥',
'China': '中国',
'Heard I. and McDonald Is.': '赫德岛和麦克唐纳群岛',
'Armenia': '亚美尼亚',
'Falkland Is.': '马尔维纳斯群岛（福克兰）',
'Ukraine': '乌克兰',
'Ghana': '加纳',
'Tonga': '汤加',
'Finland': '芬兰',
'Libya': '利比亚',
'Dominican Rep.': '多米尼加',
'Indonesia': '印度尼西亚',
'Mauritius': '毛里求斯',
'Eq. Guinea': '赤道几内亚',
'Sweden': '瑞典',
'Vietnam': '越南',
'Mali': '马里',
'Russia': '俄罗斯奥运队',
'Bulgaria': '保加利亚',
'United States': '美国',
'Romania': '罗马尼亚',
'Angola': '安哥拉',
'Chad': '乍得',
'South Africa': '南非',
'Fiji': '斐济',
'Liechtenstein': '列支敦士登',
'Malaysia': '马来西亚',
'Austria': '奥地利',
'Mozambique': '莫桑比克',
'Uganda': '乌干达',
'Japan': '日本',
'Niger': '尼日尔',
'Brazil': '巴西',
'Kuwait': '科威特',
'Panama': '巴拿马',
'Guyana': '圭亚那',
'Madagascar': '马达加斯加',
'Luxembourg': '卢森堡',
'American Samoa': '美属萨摩亚',
'Andorra': '安道尔',
'Ireland': '爱尔兰',
'Italy': '意大利',
'Nigeria': '尼日利亚',
'Turks and Caicos Is.': '特克斯和凯科斯群岛',
'Ecuador': '厄瓜多尔',
'U.S. Virgin Is.': '美属维尔京群岛',
'Brunei': '文莱',
'Australia': '澳大利亚',
'Iran': '伊朗',
'Algeria': '阿尔及利亚',
'El Salvador': '萨尔瓦多',
"C?te d'Ivoire": '科特迪瓦',
'Chile': '智利',
'Puerto Rico': '波多黎各',
'Belgium': '比利时',
'Thailand': '泰国',
'Haiti': '海地',
'Iraq': '伊拉克',
'S?o Tomé and Principe': '圣多美和普林西比',
'Sierra Leone': '塞拉利昂',
'Georgia': '格鲁吉亚',
'Denmark': '丹麦',
'Philippines': '菲律宾',
'S. Geo. and S. Sandw. Is.': '南乔治亚岛和南桑威奇群岛',
'Moldova': '摩尔多瓦',
'Morocco': '摩洛哥',
'Namibia': '纳米比亚',
'Malta': '马耳他',
'Guinea-Bissau': '几内亚比绍',
'Kiribati': '基里巴斯',
'Switzerland': '瑞士',
'Grenada': '格林纳达',
'Seychelles': '塞舌尔',
'Portugal': '葡萄牙',
'Estonia': '爱沙尼亚',
'Uruguay': '乌拉圭',
'Antigua and Barb.': '安提瓜和巴布达',
'Lebanon': '黎巴嫩',
'Uzbekistan': '乌兹别克斯坦',
'Tunisia': '突尼斯',
'Djibouti': '吉布提',
'Greenland': '格陵兰',
'Timor-Leste': '东帝汶',
'Dominica': '多米尼克',
'Colombia': '哥伦比亚',
'Burundi': '布隆迪',
'Bosnia and Herz.': '波斯尼亚和黑塞哥维那',
'Cyprus': '塞浦路斯',
'Barbados': '巴巴多斯',
'Qatar': '卡塔尔',
'Palau': '帕劳',
'Bhutan': '不丹',
'Sudan': '苏丹',
'Nepal': '尼泊尔',
'Micronesia': '密克罗尼西亚',
'Bermuda': '百慕大',
'Suriname': '苏里南',
'Venezuela': '委内瑞拉',
'Israel': '以色列',
'St. Pierre and Miquelon': '圣皮埃尔和密克隆群岛',
'Central African Rep.': '中非',
'Iceland': '冰岛',
'Zambia': '赞比亚',
'Senegal': '塞内加尔',
'Papua New Guinea': '巴布亚新几内亚',
'Trinidad and Tobago': '特立尼达和多巴哥',
'Zimbabwe': '津巴布韦',
'Jordan': '约旦',
'Gambia': '冈比亚',
'Kazakhstan': '哈萨克斯坦',
'Poland': '波兰',
'Eritrea': '厄立特里亚',
'Kyrgyzstan': '吉尔吉斯斯坦',
'Montserrat': '蒙特塞拉特',
'New Caledonia': '新喀里多尼亚',
'Macedonia': '马其顿',
'Paraguay': '巴拉圭',
'Latvia': '拉脱维亚',
'Hungary': '匈牙利',
'Syria': '叙利亚',
'Honduras': '洪都拉斯',
'Myanmar': '缅甸',
'Mexico': '墨西哥',
'Egypt': '埃及',
'Nicaragua': '尼加拉瓜',
'Cuba': '古巴',
'Serbia': '塞尔维亚',
'Comoros': '科摩罗',
'United Kingdom': '英国',
'Fr. S. Antarctic Lands': '南极洲',
'Congo': '刚果（布）',
'Greece': '希腊',
'Sri Lanka': '斯里兰卡',
'Croatia': '克罗地亚',
'Botswana': '博茨瓦纳',
'Siachen Glacier': '锡亚琴冰川地区'
},
itemStyle:{ //地图区域的多边形 图形样式
normal:{
color:"#A8B8A9", //颜色
borderColor:"#A8B8A9", //边框颜色
borderWidth:0.5, //柱条的描边宽度，默认不描边。
borderType:"solid", //柱条的描边类型，默认为实线，支持 'dashed', 'dotted'。
barBorderRadius:0, //柱形边框圆角半径，单位px，支持传入数组分别指定柱形4个圆角半径。
shadowBlur:5, //图形阴影的模糊大小。
shadowColor:"#2a5caa", //阴影颜色
shadowOffsetX:0, //阴影水平方向上的偏移距离。
shadowOffsetY:0, //阴影垂直方向上的偏移距离。
opacity:1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
},
emphasis:{
color:"#A8B8A9", //颜色
borderColor:"#A8B8A9", //边框颜色
borderWidth:0.5, //柱条的描边宽度，默认不描边。
borderType:"solid", //柱条的描边类型，默认为实线，支持 'dashed', 'dotted'。
barBorderRadius:0, //柱形边框圆角半径，单位px，支持传入数组分别指定柱形4个圆角半径。
shadowBlur:5, //图形阴影的模糊大小。
shadowColor:"#2a5caa", //阴影颜色
shadowOffsetX:0, //阴影水平方向上的偏移距离。
shadowOffsetY:0, //阴影垂直方向上的偏移距离。
opacity:1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
areaColor:"#33a3dc"
}
},
// data里的每一个{}中，是一项数据整体，标明了该项数据的名称，值，以及颜色等参数。
"data": [//按照金牌榜排序
{
"name": "挪威", "value": 37,
"gold": 16, "silver": 8, "copper": 13,
},
{
"name": "德国", "value": 27,
"gold": 12, "silver": 10, "copper": 5,
},
{
"name": "中国", "value": 15,
"gold": 9, "silver": 4, "copper": 2,
},
{
"name": "美国", "value": 25,
"gold": 8, "silver": 10, "copper": 7,
},
{
"name": "瑞典", "value": 18,
"gold": 8, "silver": 5, "copper": 5,
},
{
"name": "荷兰","value": 17,
"gold": 8, "silver": 5, "copper": 4,
},
{
"name": "奥地利","value": 18,
"gold": 7, "silver": 7, "copper": 4,
},
{
"name": "瑞士","value": 14,
"gold": 7, "silver": 2, "copper": 5,
},
{
"name": "俄罗斯奥运队","value": 32,
"gold": 6, "silver": 12, "copper": 14,
},
{
"name": "法国","value": 14,
"gold": 5, "silver": 7, "copper": 2,
},
{
"name": "加拿大","value": 26,
"gold": 4, "silver": 8, "copper": 14,
},
{
"name": "日本","value": 18,
"gold": 3, "silver": 6, "copper": 9,
},
{
"name": "意大利","value": 17,
"gold": 2, "silver": 7, "copper": 8,
},
{
"name": "韩国","value": 9,
"gold": 2, "silver": 5, "copper": 2,
},
{
"name": "斯洛文尼亚","value": 7,
"gold": 2, "silver": 3, "copper": 2,
},
{
"name": "芬兰","value": 8,
"gold": 2, "silver": 2, "copper": 4,
},
{
"name": "新西兰","value": 3,
"gold": 2, "silver": 1, "copper": 0,
},
{
"name": "澳大利亚","value": 4,
"gold": 1, "silver": 2, "copper": 1,
},
{
"name": "英国","value": 2,
"gold": 1, "silver": 1, "copper": 0,
},
{
"name": "匈牙利","value": 3,
"gold": 1, "silver": 0, "copper": 2,
},
{
"name": "捷克","value": 2,
"gold": 1, "silver": 0, "copper": 1,
},
{
"name": "斯洛伐克","value": 2,
"gold": 1, "silver": 0, "copper": 1,
},
{
"name": "比利时","value": 2,
"gold": 1, "silver": 0, "copper": 1,
},
{
"name": "白俄罗斯","value": 2,
"gold": 0, "silver": 2, "copper": 0,
},
{
"name": "西班牙","value": 1,
"gold": 0, "silver": 1, "copper": 0,
},
{
"name": "乌克兰","value": 1,
"gold": 0, "silver": 1, "copper": 0,
},
{
"name": "波兰","value": 1,
"gold": 0, "silver": 0, "copper": 1,
},
{
"name": "拉脱维亚","value": 1,
"gold": 0, "silver": 0, "copper": 1,
},
{
"name": "爱沙尼亚","value": 1,
"gold": 0, "silver": 0, "copper": 1,
},
],
"roam": true,不开启鼠标缩放和平移漫游
"zoom": 1,//当前视角的缩放比例
"showLegendSymbol": false,//图例相应区域不显示图例的颜色标识（系列标识的小圆点）
}
],
// 鼠标悬浮，单击产生的效果（在网页上可以动态显示）
"tooltip": {
"show": true,
"trigger": "item",//触发类型,'item'数据项图形触发
"triggerOn": "mousemove|click", //提示框触发的条件'mousemove|click'同时鼠标移动和点击时触发。
"axisPointer": {// 坐标轴指示器配置项
"type": "line"// 'line' 直线指示器
},
"textStyle": {
fontSize: 15,//字号
color: "#feeeed"//文字颜色
},
// formatter:"{b}<br/>{c}",
formatter: function(params) {
var detailedInformation = params.name+'<br/>'+"总奖牌数为:"+params.value+'<br/>' + "金牌数为:"+params.data.gold+
"<br/>"+"银牌数为:"+params.data.silver+"<br/>"+"铜牌数为:"+params.data.copper;
return detailedInformation;
},
"borderWidth": 0
}
};
chart_container.setOption(option_container);
3. 轮播图实现
//设置定时器，每隔2.3秒切换一张图片
setInterval(changeImg,2300);
//切换图片
function changeImg() {
index++;
var a=document.getElementsByClassName("img-slide");
if(index>=a.length) index=0;
for(var i=0;i<a.length;i++){
a[i].style.display='none';
}
a[index].style.display='block';
}
4. 对json数据的提取
//传入参数为json数据
//将json数据转换成表格的形式显示
function output(js)
{
delRow();
var o=JSON.parse(js) //1、JSON.parse()获取json数组并且转化为字符串
for(var i in o)
{
var tr = document.createElement("tr");
var time=o[i]["startdatecn"].substring(5, 16);
if(!o[i]["homename"]==""&&!o[i]["awayname"]=="")
var title=o[i]["title"]+" "+o[i]["homename"]+" VS "+o[i]["awayname"];
else var title=o[i]["title"];
//识别出有设计详细赛程的比赛，在表格的“数据”一栏填入"详细数据",并设置点击跳转到详细赛程页面
if(title=="混双循环赛第1轮 瑞典 VS 英国"&&o[i]["itemcodename"]=="冰壶")
tr.innerHTML = '<tr><td>'+time+'</td>'+'<td>'+o[i]["itemcodename"]+'</td>'+'<td>'+title+'</td>'+'<td>'+o[i]["venuename"]+'</td>'+'<td>'+"已结束"+'</td>'+'<td>'+'<a href="Curling.html">'+"详细数据"+'</a>'+'</td></tr>';
else if(time=="02-03 18:00"&&o[i]["itemcodename"]=="自由式滑雪")
tr.innerHTML = '<tr><td>'+time+'</td>'+'<td>'+o[i]["itemcodename"]+'</td>'+'<td>'+title+'</td>'+'<td>'+o[i]["venuename"]+'</td>'+'<td>'+"已结束"+'</td>'+'<td>'+'<a href="Ski.html">'+"详细数据"+'</a>'+'</td></tr>';
else if(time=="02-05 19:00"&&o[i]["itemcodename"]=="短道速滑")
tr.innerHTML = '<tr><td>'+time+'</td>'+'<td>'+o[i]["itemcodename"]+'</td>'+'<td>'+title+'</td>'+'<td>'+o[i]["venuename"]+'</td>'+'<td>'+"已结束"+'</td>'+'<td>'+'<a href="Shorttrack.html">'+"详细数据"+'</a>'+'</td></tr>';
else
tr.innerHTML = '<tr><td>'+time+'</td>'+'<td>'+o[i]["itemcodename"]+'</td>'+'<td>'+title+'</td>'+'<td>'+o[i]["venuename"]+'</td>'+'<td>'+"已结束"+'</td>'+'<td>'+""+'</td></tr>';
mt.appendChild(tr);
}
}
5. 对选择项目的下拉列表框的监听
//对选择项目的下拉列表框的监听
<select name="item" onchange="itemChoose();"/>
function itemChoose()
{
//当选择项目的下拉列表框被选择时，另外两个下拉列表框恢复默认值"请选择日期"或"请选择场馆"
document.getElementsByName("site")[0].options[0].selected = true;
document.getElementsByName("date")[0].options[0].selected = true;
//设置"项目赛程"颜色加深
ib.style.backgroundColor="#20A8D2";
sb.style.backgroundColor="#A3DDF7";
db.style.backgroundColor="#A3DDF7";
//获取下拉列表框被选中的值
var sel=document.getElementsByName("item")[0];
var cur = sel.options[sel.options.selectedIndex].value;
if(cur=="高山滑雪"){
var js='对应的json数据';
output(js);//将json按照表格输出
}
else if(cur=="雪车"){..}
else if(cur=="冬季两项"){....}
.....
}
心路历程和收获
- 10：这次作业体会最大的就是css的设计，很多时候并不能很快达到我想要的效果，很多我理论上觉得应该效果是这样，但实际上是那样的情况。经过很多尝试，做出来的项目也在慢慢向原型图靠近，最后终于达到和原型图相差无几。大三上学习了JavaScript，但是那个时候只是基于课堂内容的学习，所以在这次项目开始的时候，总是在担心js能否实现我需要的功能，后面在代码的过程中，发现js比我想象的强大很多，很多功能他都能实现。在和队友的配合上也需要加强，中途也有闹过矛盾，但是闹完之后都不会惦记在心上，希望以后两方配合更好。
- KD：这次作业对CSS学习了很多，感觉自己已经是个熟练的美工人了嘿嘿。收获最大的应该是对于echarts的学习，如果没有这次作业的话我应该连这个是什么都不知道，现在已经会用了。还有就是项目在云服务器上的部署，以后如果有做项目就知道要怎么放上去怎么使用啦。结对开发觉得就是一个合作开发互相沟通交流的过程，并且两个人都一起努力就能做好项目。
评价结对队友
- 10：有时候会对队友在没有实现功能的情况下先执着于美化这个点不太满意，感觉队友对美化这个点花费的时间太多，更希望队友能够先实现功能后再去美化，会让我安心一些。比较满意的点就是和队友的分工，刚好我不太想搞得部分，队友也愿意搞（假设都不愿意的话两方可以讨论），所以在这次项目上还算比较愉快啦。
- KD：相当棒啊10老师！太猛了10老师！合作的很愉快
170
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
