ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

2022-08-04入职笔记

2022-08-04 18:33:17  阅读:119  来源: 互联网

标签:入职 定时器 函数 04 08 item 数组 data echarts


获取当前时间毫秒数:console.log(new Date().getTime());
时间格式化:document.write(`${Y}-${M}-${D} ${h}:${M}:${s}`);模板字符串方式书写
document.write(Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s);字符串拼接方式书写
echarts图表:引入方式1、下载echarts.js。2、引入BootCDN的script标签。3、通过npm安装npm install echarts --save
---------------
将请求回来的数组(里面是一个个对象)中的每一项的第一个属性放在一个新的数组
requestArr.forEach(elment=>{
receiveArr.push(elment.a)
})
//先创建一个用来接收数据的空数组,然后对请求回来的数组requestArr进行遍历,把它的a属性全部放入receive空数组里面。
map方法,arr.map(item => item.a属性)把a属性全放入arr数组中
----------------
视频来源B站 https://www.bilibili.com/video/BV1uF411T7bz?spm_id_from=333.337.search-card.all.click&vd_source=a217c8b62558542f1b8e2a0308308f6a
echarts按需引入的话,注册组件可以写在created生命周期中,初始化的时候因为需要获取真实的dom元素,所以需要在mounted生命周期中进行初始化。
声明的option中tooltip是工具提示,xAxis是x轴,yAxis是y轴。
修改样式的话,需要先创建一个颜色数组,也可以利用随机生成颜色函数,let colors = [ '#字符串' ]。
在series中有一个itemstyle对象,然后颜色color:params =>colors[ params.dataIndex ] || ''
如果数据实时更新的话,在vue中我们需要利用watch来监听它,把myChart当做变量定义成null,然后let myChart = echarts.init(document.getElementById('容器的id'));
watch: {
data: {
handler(){
this.myChart.setOption(option){
xAxis: {
data: this.data.map(item=>item.x)
},
series:[
{
data:this.data.map(item=>item.y)
}
]
}
}
}
}其他的属性放在原处不动。
---------------
在工业大数据项目中添加自动轮播:
在methods中创建一个函数,函数里面写一个定时器函数,需要注意的是定时器函数中this的指向问题,所以在创建函数后定时器函数还未创建时把用任意一个变量(例如)that来代替this,let that = this;然后在定时器函数中就可以使用data中的变量。每隔几秒轮播就设置几千毫秒,如果有4个选项就设置一个数字自增,然后对4取余,取余的结果分别对应4个不同的选项,接下来在条件渲染中调用一开始写好的点击事件,还可以在该数字自增的时候大于4的倍数时让它重新等于0。最后再mounted生命周期中this.函数名,调用一下该函数。最后再beforeDestroy生命周期中clearInterval清除所有定时器。

标签:入职,定时器,函数,04,08,item,数组,data,echarts
来源: https://www.cnblogs.com/kaoo-kiee/p/16551567.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有