查詢建設(shè)銀行卡卡號(hào)網(wǎng)站西安百度網(wǎng)站快速排名
目錄
一、ElementUI
1、安裝
2、簡(jiǎn)單使用
3、例子
4、其他內(nèi)容的學(xué)習(xí)
二、echarts
1、簡(jiǎn)介
2、考點(diǎn)
3、安裝
4、配置項(xiàng)：使用echarts的三步走
5、13屆藍(lán)橋真題（3）布局切換
6、數(shù)據(jù)格式處理：14屆藍(lán)橋模擬賽 1 期（8）
一、ElementUI
1、安裝
（1）終端npm下載
npm i element-ui -S（2）引入式
<!-- 引入樣式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入組件庫(kù) -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>注意：引入順序，在html中代碼執(zhí)行順序是從上到下的，ElementUI是基于vue寫的，所以要先引入vue再引入ElementUI
（3）介紹：ElementUI本身就是一次對(duì)功能的封裝，需要我們做的就是二次封裝
2、簡(jiǎn)單使用
（1）彈窗open()方法的介紹及使用
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><!-- import CSS --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body><div id="app"><el-button @click="visible = true">Button</el-button><el-dialog :visible.sync="visible" title="Hello world" @open="open()"><p>Try Element</p></el-dialog></div>
</body><!-- import Vue before Element --><script src="https://unpkg.com/vue@2/dist/vue.js"></script><!-- import JavaScript --><script src="https://unpkg.com/element-ui/lib/index.js"></script><script>new Vue({el: '#app',data: function() {return { visible: false }},methods:{open(){console.log('是誰(shuí)在點(diǎn)我！！！');}}})</script>
</html>
?open()方法：鉤子函數(shù)，可以實(shí)現(xiàn)點(diǎn)擊彈窗，回調(diào)給我們參數(shù)，例如：我們需要記錄彈窗被點(diǎn)擊的次數(shù)，這時(shí)候只需要在open()方法進(jìn)行點(diǎn)擊次數(shù)的+1
3、例子
（1）原裝的單選表格
<template><div class="home"><el-tableref="singleTable":data="tableData"highlight-current-row@current-change="handleCurrentChange"style="width: 100%"><el-table-columntype="index"width="50"></el-table-column><el-table-columnproperty="date"label="日期"width="120"></el-table-column><el-table-columnproperty="name"label="姓名"width="120"></el-table-column><el-table-columnproperty="address"label="地址"></el-table-column></el-table></div>
</template><script>
// @ is an alias to /srcexport default {name: 'HomeView',data(){return{tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀區(qū)金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀區(qū)金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀區(qū)金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀區(qū)金沙江路 1516 弄'}],currentRow: null}},components: {},methods:{handleCurrentChange(val) {this.currentRow = val;}}
}
</script>
?（2）二次封裝
①例子一
- 要求：表格中獲取數(shù)據(jù)，自定義修改樣式
- 分析：運(yùn)用element-ui提供的插槽，在template標(biāo)簽中，綁定slot-scope屬性來(lái)獲取值
<el-table-column label="列名" width="200"> <template slot-scope="scope"><!-- scope.row捕捉每一行的內(nèi)容 --><span style="color: red;">{{ scope.row.name }}</span></template>
</el-table-column>
?②例子二
- 要求：改造表格前面為單選符號(hào)的樣式
- 分析：添加一個(gè)封裝好的單選框標(biāo)簽
- 注意：
? ? ? ? 要給表格綁定row-click事件，當(dāng)某一行被點(diǎn)擊時(shí)會(huì)觸發(fā)該事件
? ? ? ? 單選框還提供了change事件來(lái)響應(yīng)變化，且它會(huì)傳入一個(gè)參數(shù)value
????????點(diǎn)擊表格除單選框外的其他地方時(shí)，表格樣式變，但是單選框沒(méi)有跟著變，需要用到方法setCurrentRow()，該方法的作用：設(shè)置某一行的選中狀態(tài)
????????單選框標(biāo)簽el-radio中間什么都不寫的時(shí)候，頁(yè)面會(huì)默認(rèn)顯示label屬性的文字信息，如果想要只顯示單選框，可以在標(biāo)簽中間寫
<template><div class="home"><el-tableref="singleTable":data="tableData"highlight-current-row@current-change="handleCurrentChange"style="width: 100%"@row-click="setCurrent"><el-table-column label="單選" width="50"><template slot-scope="scope"><!-- :label動(dòng)態(tài)綁定label屬性，scope.$index獲取識(shí)別當(dāng)前下標(biāo) --><el-radiov-model="radio":label="scope.$index"@change="setCurrent(scope.row)"> </el-radio></template></el-table-column><el-table-column type="index" width="50"> </el-table-column><el-table-column property="date" label="日期" width="120"></el-table-column><el-table-column property="name" label="姓名" width="120"></el-table-column><el-table-column property="address" label="地址"> </el-table-column></el-table></div>
</template><script>
// @ is an alias to /srcexport default {name: "HomeView",data() {return {radio: 0,tableData: [{date: "2016-05-02",name: "王小虎",address: "上海市普陀區(qū)金沙江路 1518 弄",},{date: "2016-05-04",name: "王小虎",address: "上海市普陀區(qū)金沙江路 1517 弄",},{date: "2016-05-01",name: "王小虎",address: "上海市普陀區(qū)金沙江路 1519 弄",},{date: "2016-05-03",name: "王小虎",address: "上海市普陀區(qū)金沙江路 1516 弄",},],currentRow: null,};},components: {},methods: {setCurrent(row) {console.log(row);this.radio = this.tableData.indexOf(row)this.$refs.singleTable.setCurrentRow(row);},handleCurrentChange(val) {this.currentRow = val;},},
};
</script>
4、其他內(nèi)容的學(xué)習(xí)
（1）小編的另一篇ElementUI學(xué)習(xí)文章
ElementUI學(xué)習(xí)筆記_申小兮IU的博客-CSDN博客ElementUI簡(jiǎn)介，其安裝步驟，一些布局，容器，按鈕，表格，對(duì)話框的簡(jiǎn)單操作https://blog.csdn.net/qq_51478745/article/details/129662671?spm=1001.2014.3001.5502（2）官網(wǎng)
Element - The world's most popular Vue UI frameworkElement，一套為開(kāi)發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0 的桌面端組件庫(kù)
https://element.eleme.cn/#/zh-CN/component/radio
二、echarts
1、簡(jiǎn)介
一個(gè)基于JavaScript的開(kāi)源可視化圖表庫(kù)，也是一種框架，封裝好的東西
2、考點(diǎn)
（1）配置項(xiàng)
（2）數(shù)據(jù)處理
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項(xiàng)目的?release?頁(yè)面可以找到各個(gè)版本的鏈接。點(diǎn)擊下載頁(yè)面下方 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、配置項(xiàng)：使用echarts的三步走
（1）初始化
echarts.init(dom)?代碼例子
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../../echarts.min.js"></script><style>#demo{width: 300px;height: 300px;}</style>
</head>
<body><div id="demo"></div><script>// 初始化const demo = echarts.init(document.getElementById('demo'))</script>
</body>
</html>
（2）定義配置項(xiàng)options
（3）配置項(xiàng)設(shè)置生效setOption
理解：要先初始化一個(gè)盒子，構(gòu)思盒子要做成什么樣的，開(kāi)始做盒子
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../../echarts.min.js"></script><style>#demo {width: 600px;height: 400px;}</style>
</head><body><div id="demo"></div><script>// 初始化const demo = echarts.init(document.getElementById('demo'))// 配置項(xiàng)const option = {xAxis: {// category類別type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line'}]};// 設(shè)置demo.setOption(option)</script>
</body></html>5、13屆藍(lán)橋真題（3）布局切換
沒(méi)有什么技巧，熟悉echarts就可以很容易看出是x軸、y軸的type值寫反了
正確結(jié)果如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><script src="./js/echarts.js"></script><title>和手機(jī)相處的時(shí)光</title></head><style>* {margin: 0;padding: 0;}#main {margin: 20px;background-color: white;}</style><body><div id="main" style="width: 1000px; height: 600px"></div></body><script>var chartDom = document.getElementById("main");var myChart = echarts.init(chartDom);/*TODO：ECharts 的配置中存在錯(cuò)誤，請(qǐng)改正*/var option = {title: {text: "一周的手機(jī)使用時(shí)長(zhǎng)",},xAxis: {type: "category",data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],},yAxis: {type: "value",},series: [{data: [2.5, 2, 2.6, 3.2, 4, 6, 5],type: "line",},],};myChart.setOption(option);</script>
</html>
6、數(shù)據(jù)格式處理：14屆藍(lán)橋模擬賽 1 期（8）
要求：獲取下面json文件的數(shù)據(jù)，并修改成x、y軸能用的數(shù)據(jù)格式，使內(nèi)容正確顯示在圖上
{"code": 200,"desc": "請(qǐng)求成功","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]}
}分析：根據(jù)前面的認(rèn)識(shí)，正確的數(shù)據(jù)格式如下，我們要做的就是如何把json取到的數(shù)據(jù)修改成下面的格式數(shù)據(jù)
// 修改后的數(shù)據(jù)
// 周數(shù)據(jù)
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]
}
// 月數(shù)據(jù)
monthData = {x: ['2月', '3月'],y: [1031, 1328]
}（1）做這道題前先學(xué)習(xí)兩個(gè)知識(shí)點(diǎn)
①for...in循環(huán)：獲取的item值是對(duì)象的key
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>const 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]}// for...in：循環(huán)對(duì)象，且獲取的值是對(duì)象的keyfor(item in data){console.log(item);console.log(data[item]);}</script>
</body></html>②迭代器reduce：做累加
<script>[1,2,3].reduce(function(pre,cur){return pre+cur},0)// reduce()會(huì)循環(huán)數(shù)組[1,2,3]// 0是初始值，不寫默認(rèn)也是0// 第一次循環(huán)：pre = 0 ; cur = 1 ; return = 0 + 1 = 1// 第二次循環(huán)：pre = 1 ; cur = 2 ; return = 1 + 2 = 3// 第三次循環(huán)：pre = 3 ; cur = 3 ; return = 3 + 3 = 6
</script>?更多擴(kuò)展，小伙伴們可以看小編下面這篇文章🧐
ES6篇（上）_申小兮IU的博客-CSDN博客ES6主要內(nèi)容：const的使用，let與var的區(qū)別，增強(qiáng)寫法，解構(gòu)賦值（數(shù)組解構(gòu)，對(duì)象解構(gòu)），深淺拷貝，高階函數(shù)（filter、map、reduce）https://blog.csdn.net/qq_51478745/article/details/127140261③slice(begin,end)方法：返回一個(gè)新的數(shù)組對(duì)象，該數(shù)組由begin,end兩個(gè)值決定，范圍包括begin，不包括end（左閉右開(kāi)），原數(shù)組不會(huì)改變
<script>const arr = ['a','b','c','d','e','f','g','h','i']for(let i = 0;i<arr.length;i+=2){console.log(arr.slice(i,i+2));}//第一次循環(huán)：arr.slice(0,2)獲取到arr下標(biāo)為0和1的值//第二次循環(huán)：arr.slice(2,4)獲取到arr下標(biāo)為2和3的值// 以此類推
</script>
?（2）月數(shù)據(jù)的處理
<script>// 原數(shù)據(jù)const 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]}// 每周的const weekData = {x:[],y:[]}// 每月的const monthData = {x:[],y:[]}for(item in data){//console.log(item);//console.log(data[item]);//每月的x軸monthData.x.push(item)// 每月的y軸值，用迭代器累加monthData.y.push(data[item].reduce((pre,cur)=> pre + cur))}console.log(monthData);
</script>（3）周數(shù)據(jù)的處理
<script>// 原數(shù)據(jù)const 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]}// 每周的const weekData = {x:[],y:[]}// 每月的const monthData = {x:[],y:[]}// for...in：循環(huán)對(duì)象，且獲取的值是對(duì)象的keyfor(item in data){// console.log(item);// console.log(data[item]);//每月的x軸monthData.x.push(item)// 每月的y軸值，用迭代器累加monthData.y.push(data[item].reduce((pre,cur)=> pre + cur))let week = 1for(let i = 0; i<data[item].length; i += 7){weekData.x.push(`${item}第${week++}周`)// 截取到每一周的數(shù)據(jù)，然后再累加weekData.y.push(data[item].slice(i,i+7).reduce((pre,cur)=> pre + cur))}}console.log(monthData);console.log(weekData);
</script>（4）完整解題代碼
// TODO:待補(bǔ)充代碼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 = 1for (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 = weekxoption.series[0].data = weekymyChart.setOption(option)})let tabs = document.getElementsByName('tabs')for(let j=0;j<tabs.length;j++){tabs[j].onclick = function(){if(tabs[j].checked){if(tabs[j].id == 'week'){option.xAxis.data = weekxoption.series[0].data = weekymyChart.setOption(option)}else{option.xAxis.data = monthxoption.series[0].data = monthymyChart.setOption(option)}}}}