蓝桥杯Web组备赛笔记6
目录
一、ElementUI
1、安装
2、简单使用
3、例子
4、其他内容的学习
二、echarts
1、简介
2、考点
3、安装
4、配置项：使用echarts的三步走
5、13届蓝桥真题（3）布局切换
6、数据格式处理：14届蓝桥模拟赛 1 期（8）
一、ElementUI
1、安装
（1）终端npm下载
npm i element-ui -S（2）引入式
注意：引入顺序，在html中代码执行顺序是从上到下的，ElementUI是基于vue写的，所以要先引入vue再引入ElementUI
（3）介绍：ElementUI本身就是一次对功能的封装，需要我们做的就是二次封装
2、简单使用
（1）弹窗open()方法的介绍及使用
Button
Try Element
open()方法：钩子函数，可以实现点击弹窗，回调给我们参数，例如：我们需要记录弹窗被点击的次数，这时候只需要在open()方法进行点击次数的+1
3、例子
（1）原装的单选表格
（2）二次封装
①例子一
- 要求：表格中获取数据，自定义修改样式
- 分析：运用element-ui提供的插槽，在template标签中，绑定slot-scope属性来获取值
{{ scope.row.name }}
②例子二
- 要求：改造表格前面为单选符号的样式
- 分析：添加一个封装好的单选框标签
- 注意：
要给表格绑定row-click事件，当某一行被点击时会触发该事件
单选框还提供了change事件来响应变化，且它会传入一个参数value
点击表格除单选框外的其他地方时，表格样式变，但是单选框没有跟着变，需要用到方法setCurrentRow()，该方法的作用：设置某一行的选中状态
单选框标签el-radio中间什么都不写的时候，页面会默认显示label属性的文字信息，如果想要只显示单选框，可以在标签中间写
4、其他内容的学习
（1）小编的另一篇ElementUI学习文章
ElementUI学习笔记_申小兮IU的博客-CSDN博客ElementUI简介，其安装步骤，一些布局，容器，按钮，表格，对话框的简单操作https://blog.csdn.net/qq_51478745/article/details/129662671?spm=1001.2014.3001.5502（2）官网
Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN/component/radio
二、echarts
1、简介
一个基于JavaScript的开源可视化图表库，也是一种框架，封装好的东西
2、考点
（1）配置项
（2）数据处理
3、安装
（1）终端npm下载
npm install echarts --save（2）引入式
import * as echarts from 'echarts';（3）直接从 GitHub 获取下载到本地
GitHub - apache/echarts: Apache ECharts is a powerful, interactive charting and data visualization library for browserApache ECharts is a powerful, interactive charting and data visualization library for browser - GitHub - apache/echarts: Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://github.com/apache/echarts项目的 release 页面可以找到各个版本的链接。点击下载页面下方 Assets 中的 Source code，解压后 dist 目录下的 echarts.js 即为包含完整 ECharts 功能的文件。
小伙伴们也可以直接到小编的资源下载
https://download.csdn.net/download/qq_51478745/87630802?spm=1001.2014.3001.5501
https://download.csdn.net/download/qq_51478745/87630802?spm=1001.2014.3001.5501
4、配置项：使用echarts的三步走
（1）初始化
echarts.init(dom)代码例子
Document
（2）定义配置项options
（3）配置项设置生效setOption
理解：要先初始化一个盒子，构思盒子要做成什么样的，开始做盒子
Document
5、13届蓝桥真题（3）布局切换
没有什么技巧，熟悉echarts就可以很容易看出是x轴、y轴的type值写反了
正确结果如下：
和手机相处的时光
6、数据格式处理：14届蓝桥模拟赛 1 期（8）
要求：获取下面json文件的数据，并修改成x、y轴能用的数据格式，使内容正确显示在图上
{
"code": 200,
"desc": "请求成功",
"data": {
"2月": [
30, 40, 30, 20, 10, 20, 30, 69, 86, 12, 32, 12, 23, 40, 50, 61, 39, 28,
20, 35, 20, 38, 43, 52, 30, 39, 52, 70
],
"3月": [
36, 48, 52, 30, 39, 52, 20, 18, 25, 33, 21, 36, 44, 63, 32, 89, 98, 23,
25, 36, 29, 31, 42, 23, 45, 56, 98, 83, 25, 28, 48
]
}
}分析：根据前面的认识，正确的数据格式如下，我们要做的就是如何把json取到的数据修改成下面的格式数据
// 修改后的数据
// 周数据
weekData = {
x: ['2月第1周', '2月第2周', '2月第3周', '2月第4周', '3月第1周', '3月第2周', '3月第3周', '3月第4周', '3月第5周'],
y: [180, 274, 253, 324, 277, 240, 332, 378, 101]
}
// 月数据
monthData = {
x: ['2月', '3月'],
y: [1031, 1328]
}（1）做这道题前先学习两个知识点
①for...in循环：获取的item值是对象的key
Document
②迭代器reduce：做累加
更多扩展，小伙伴们可以看小编下面这篇文章
ES6篇（上）_申小兮IU的博客-CSDN博客ES6主要内容：const的使用，let与var的区别，增强写法，解构赋值（数组解构，对象解构），深浅拷贝，高阶函数（filter、map、reduce）https://blog.csdn.net/qq_51478745/article/details/127140261③slice(begin,end)方法：返回一个新的数组对象，该数组由begin,end两个值决定，范围包括begin，不包括end（左闭右开），原数组不会改变
（2）月数据的处理
（3）周数据的处理
（4）完整解题代码
// TODO:待补充代码
let weekx = []
let weeky = []
let monthx = []
let monthy = []
axios.get('./data.json').then(res => {
// console.log(res.data.data);
for (item in res.data.data) {
// console.log(item);
monthx.push(item)
monthy.push(res.data.data[item].reduce((pre, cur) => pre + cur))
let week = 1
for (let i = 0; i < res.data.data[item].length; i += 7) {
weekx.push(`${item}第${week++}周`)
weeky.push(res.data.data[item].slice(i, i + 7).reduce((pre, cur) => pre + cur))
}
}
option.xAxis.data = weekx
option.series[0].data = weeky
myChart.setOption(option)
})
let tabs = document.getElementsByName('tabs')
for(let j=0;j