网站建设开发费怎么做账,沧州南皮手机网站建设,云南建网科技有限公司,嵌入式软件开发工作内容目录
一、ElementUI
1、安装
2、简单使用
3、例子
4、其他内容的学习
二、echarts
1、简介
2、考点
3、安装
4、配置项#xff1a;使用echarts的三步走
5、13届蓝桥真题#xff08;3#xff09;布局切换
6、数据格式处理#xff1a;14届蓝桥模拟赛 1 期#x…目录
一、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引入式
!-- 引入样式 --
link relstylesheet hrefhttps://unpkg.com/element-ui/lib/theme-chalk/index.css
!-- 引入组件库 --
script srchttps://unpkg.com/element-ui/lib/index.js/script
注意引入顺序在html中代码执行顺序是从上到下的ElementUI是基于vue写的所以要先引入vue再引入ElementUI
3介绍ElementUI本身就是一次对功能的封装需要我们做的就是二次封装 2、简单使用
1弹窗open()方法的介绍及使用
!DOCTYPE html
html
headmeta charsetUTF-8!-- import CSS --link relstylesheet hrefhttps://unpkg.com/element-ui/lib/theme-chalk/index.css
/head
bodydiv idappel-button clickvisible trueButton/el-buttonel-dialog :visible.syncvisible titleHello world openopen()pTry Element/p/el-dialog/div
/body!-- import Vue before Element --script srchttps://unpkg.com/vue2/dist/vue.js/script!-- import JavaScript --script srchttps://unpkg.com/element-ui/lib/index.js/scriptscriptnew Vue({el: #app,data: function() {return { visible: false }},methods:{open(){console.log(是谁在点我);}}})/script
/html open()方法钩子函数可以实现点击弹窗回调给我们参数例如我们需要记录弹窗被点击的次数这时候只需要在open()方法进行点击次数的1 3、例子
1原装的单选表格
templatediv classhomeel-tablerefsingleTable:datatableDatahighlight-current-rowcurrent-changehandleCurrentChangestylewidth: 100%el-table-columntypeindexwidth50/el-table-columnel-table-columnpropertydatelabel日期width120/el-table-columnel-table-columnpropertynamelabel姓名width120/el-table-columnel-table-columnpropertyaddresslabel地址/el-table-column/el-table/div
/templatescript
// is an alias to /srcexport default {name: HomeView,data(){return{tableData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄}, {date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1517 弄}, {date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1519 弄}, {date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1516 弄}],currentRow: null}},components: {},methods:{handleCurrentChange(val) {this.currentRow val;}}
}
/script2二次封装
①例子一
要求表格中获取数据自定义修改样式分析运用element-ui提供的插槽在template标签中绑定slot-scope属性来获取值
el-table-column label列名 width200 template slot-scopescope!-- scope.row捕捉每一行的内容 --span stylecolor: red;{{ scope.row.name }}/span/template
/el-table-column ②例子二
要求改造表格前面为单选符号的样式分析添加一个封装好的单选框标签注意要给表格绑定row-click事件当某一行被点击时会触发该事件 单选框还提供了change事件来响应变化且它会传入一个参数value 点击表格除单选框外的其他地方时表格样式变但是单选框没有跟着变需要用到方法setCurrentRow()该方法的作用设置某一行的选中状态 单选框标签el-radio中间什么都不写的时候页面会默认显示label属性的文字信息如果想要只显示单选框可以在标签中间写nbsp;
templatediv classhomeel-tablerefsingleTable:datatableDatahighlight-current-rowcurrent-changehandleCurrentChangestylewidth: 100%row-clicksetCurrentel-table-column label单选 width50template slot-scopescope!-- :label动态绑定label属性scope.$index获取识别当前下标 --el-radiov-modelradio:labelscope.$indexchangesetCurrent(scope.row)nbsp;/el-radio/template/el-table-columnel-table-column typeindex width50 /el-table-columnel-table-column propertydate label日期 width120/el-table-columnel-table-column propertyname label姓名 width120/el-table-columnel-table-column propertyaddress label地址 /el-table-column/el-table/div
/templatescript
// is an alias to /srcexport default {name: HomeView,data() {return {radio: 0,tableData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄,},{date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1517 弄,},{date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1519 弄,},{date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 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;},},
};
/script4、其他内容的学习
1小编的另一篇ElementUI学习文章
ElementUI学习笔记_申小兮IU的博客-CSDN博客ElementUI简介其安装步骤一些布局容器按钮表格对话框的简单操作https://blog.csdn.net/qq_51478745/article/details/129662671?spm1001.2014.3001.55022官网
Element - The worlds 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 browserhttps://github.com/apache/echarts项目的 release 页面可以找到各个版本的链接。点击下载页面下方 Assets 中的 Source code解压后 dist 目录下的 echarts.js 即为包含完整 ECharts 功能的文件。
小伙伴们也可以直接到小编的资源下载
https://download.csdn.net/download/qq_51478745/87630802?spm1001.2014.3001.5501https://download.csdn.net/download/qq_51478745/87630802?spm1001.2014.3001.5501 4、配置项使用echarts的三步走
1初始化
echarts.init(dom) 代码例子
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src../../echarts.min.js/scriptstyle#demo{width: 300px;height: 300px;}/style
/head
bodydiv iddemo/divscript// 初始化const demo echarts.init(document.getElementById(demo))/script
/body
/html 2定义配置项options
3配置项设置生效setOption
理解要先初始化一个盒子构思盒子要做成什么样的开始做盒子
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src../../echarts.min.js/scriptstyle#demo {width: 600px;height: 400px;}/style
/headbodydiv iddemo/divscript// 初始化const demo echarts.init(document.getElementById(demo))// 配置项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}]};// 设置demo.setOption(option)/script
/body/html 5、13届蓝桥真题3布局切换
没有什么技巧熟悉echarts就可以很容易看出是x轴、y轴的type值写反了
正确结果如下
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /script src./js/echarts.js/scripttitle和手机相处的时光/title/headstyle* {margin: 0;padding: 0;}#main {margin: 20px;background-color: white;}/stylebodydiv idmain stylewidth: 1000px; height: 600px/div/bodyscriptvar chartDom document.getElementById(main);var myChart echarts.init(chartDom);/*TODOECharts 的配置中存在错误请改正*/var option {title: {text: 一周的手机使用时长,},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
/html6、数据格式处理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
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyscriptconst 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循环对象且获取的值是对象的keyfor(item in data){console.log(item);console.log(data[item]);}/script
/body/html
②迭代器reduce做累加
script[1,2,3].reduce(function(pre,cur){return precur},0)// reduce()会循环数组[1,2,3]// 0是初始值不写默认也是0// 第一次循环pre 0 ; cur 1 ; return 0 1 1// 第二次循环pre 1 ; cur 2 ; return 1 2 3// 第三次循环pre 3 ; cur 3 ; return 3 3 6
/script 更多扩展小伙伴们可以看小编下面这篇文章
ES6篇上_申小兮IU的博客-CSDN博客ES6主要内容const的使用let与var的区别增强写法解构赋值数组解构对象解构深浅拷贝高阶函数filter、map、reducehttps://blog.csdn.net/qq_51478745/article/details/127140261③slice(begin,end)方法返回一个新的数组对象该数组由begin,end两个值决定范围包括begin不包括end左闭右开原数组不会改变
scriptconst arr [a,b,c,d,e,f,g,h,i]for(let i 0;iarr.length;i2){console.log(arr.slice(i,i2));}//第一次循环arr.slice(0,2)获取到arr下标为0和1的值//第二次循环arr.slice(2,4)获取到arr下标为2和3的值// 以此类推
/script 2月数据的处理
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]}// 每周的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周数据的处理
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]}// 每周的const weekData {x:[],y:[]}// 每月的const monthData {x:[],y:[]}// for...in循环对象且获取的值是对象的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; idata[item].length; i 7){weekData.x.push(${item}第${week}周)// 截取到每一周的数据然后再累加weekData.y.push(data[item].slice(i,i7).reduce((pre,cur) pre cur))}}console.log(monthData);console.log(weekData);
/script
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 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 j0;jtabs.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)}}}}
