前端
Amanda-mao
IT
展开
-
echarts 实现区域划分 折线图
先给出图表样式这张图看上去是个普通的折线图,但是仔细看又有一些不同,首先它是有区域划分的,不同区域,对应的线条颜色不一样,其次y轴是自定义的,还有各种标记等,总之是有很多构思在里面。echarts图例当中找了很多相似的折线图,但是都不能满足需求,于是动手自己绘制。废话不多说,直接上代码,小伙伴们可以参考下: let dom = document.getElementById("ichart"); dom.style.width = window.innerWidth / 4 + "px";原创 2020-11-26 14:21:02 · 3978 阅读 · 0 评论 -
正则表达式
元字符:^ 匹配行的开始 $ 匹配尾的结束. 任意字符(除了换行符)[ ] 字符类,匹配方括号中包含的任意字符[^] 否定字符类,匹配方括号中不包含的任意字符* 匹配前面的子表达式零次或多次+ 匹配前面的子表达式一次或多次? 匹配前面子表达式一次或零次,或指明一个非贪婪限定符{n,m} 匹配前面字符最少n次,最多m次(xyz) 按照确切顺序匹配xyz| 分支结构,匹配符号之前的字符或后面的字符。\ 转义字符,还原元字符原来的含义,允许你匹配保留字符 [ ]原创 2020-08-17 16:41:07 · 194 阅读 · 0 评论 -
小程序 计时旋转动效
wxml <view class="status-container {{charginDetail.isFull ? 'full' : 'charging'}}"> <div class="score-bg-wrap"> <view class="score-annulus" /> <view class="score-annulus" /> <view class="score-annulus.原创 2020-08-03 17:33:55 · 174 阅读 · 0 评论 -
vue项目二级域名访问出来是空白页
默认打包出来的项目运行在根目录可以正常显示,如果在二级域名下就会显示空白,是因资源引用路径及路由模式不同导致的。vue.config.js 文件中可以将publicPath这个配置加上:module.exports = { publicPath: process.env.NODE_ENV === 'release' ? './' : '/', devServer: { disableHostCheck: true }, chainWebpack: conf原创 2020-07-29 15:10:07 · 893 阅读 · 0 评论 -
prototype,__proto__,constructor这几个你知道什么意思了嘛?
首先,JavaScript中万物皆对象。然后,其中对象分为两种:普通对象和函数对象。Object ,Function 是JS自带的函数对象。普通对象和函数对象:// 普通对象的定义方法 let a = new Object(); // typeof a === object let b = {}: // typeof b === object let c = new Person(); // typeof c === object// 函数对象 let a2 =原创 2020-06-28 16:26:55 · 208 阅读 · 0 评论 -
数据可视化方案
2D:canvas, svg,Echarts,d33D:webgl,three.js, 高德地图原创 2020-06-28 16:08:02 · 793 阅读 · 0 评论 -
js中宏任务和微任务和Event-Loop
看看下面的一段代码?你觉得输出的是什么?setTimeout(_ => console.log(4))new Promise(resolve => { resolve() console.log(1)}).then(_ => { console.log(3)})console.log(2)跟你想象的一样的嘛?整个这一串代码我们所在的层级我们看做一个任务,其中我们先执行同步代码。第一行的 setTimeout 是异步代码,跳过,来到了 new Promis原创 2020-06-12 16:10:10 · 610 阅读 · 1 评论 -
uniapp开发微信小程序顶部固定,其他地方滚动
uniapp开发微信小程序实现顶部固定,其他地方滚动,也就是滚动条不出现在头部,只出现在腰部。效果图是这样的:1、页面<view class="alarm" :style="'background:'+ (showFilter ? 'rgba(0,0,0,0.45)' :'')"> <view class="default_con" :style="'height:' + (top + 100) +'px;flex: 0, 0, '+ (top + 100)+'px;'"&原创 2020-06-05 13:41:59 · 3518 阅读 · 0 评论 -
Echarts坐标轴和数据不对称,没有一一对应
echarts 中不管是折线图还是柱状图,如果x轴和数据不是自动产生的(也就是xAxis.data是和series.data都是单独生成的),那么就需要根绝x轴去匹配数据点。xAxis中data生成是这样的:["2019-06", "2019-07", "2019-08", "2019-09", "2019-10", "2019-11", "2019-12", "2020-01", "2020-02", "2020-03", "2020-04", "2020-05"]数据点是这样的:[name:原创 2020-05-28 15:16:37 · 9324 阅读 · 2 评论 -
el-transfer穿梭框 点击左边一个会选中所有
el-transfer穿梭框 点击左边一个会选中所有?key需要保持唯一。原创 2020-04-13 15:53:09 · 2281 阅读 · 1 评论 -
Echarts 双坐标轴的时候 第二个坐标轴总是出不来?
最近一直在使用echarts,整理一下出现的问题,希望可以给刚接触的人一点帮助。Echarts 双坐标轴的时候 第二个坐标轴总是出不来?试试给第一个series添加的yAxisIndex =0 ;第二个series 的yAxisIndex = 1;你会发现“哎哟,出来了”;如果还没出来,再试试给第一个yAxis添加的min max 设置两个值;你又可能会发现“哎哟,出来了”;...原创 2020-02-20 17:11:14 · 2253 阅读 · 2 评论 -
前端实现-文件批量下载
文件下载:单个文件下载window.open(url)多个文件下载多个文件下载用window.open不行,你会发现他只下载了一个,并不是所有。let triggerDelay = 100;let removeDelay = 1000;this.urlList.forEach((url, index) => { this.createIFrame(url, index *...原创 2020-01-15 21:17:29 · 2605 阅读 · 2 评论 -
el-table底部空白,el-table__body-wrapper is-scrolling-left元素高度计算错误
element-UI里面table好用,但是也有很多问题,需要根据场景具体解决。今天说的问题就是:我要显示10条数据,给的高度也够,可是只显示了6条数据,需要我滚动才能显示剩下的,这样体验很不好。原因:element-ui 里面的bug。解决办法:动态计算table的高度。.assets-table /deep/.el-table__body-wrapper { height...原创 2020-01-15 14:40:00 · 7718 阅读 · 2 评论 -
html2canvas导出图片缺失
html2canvas导出图片只能导出第一屏,被隐藏的部分不显示;出现的原因:html2canvas是按照当前元素的高度去生成图片的,如果内部的元素高度大于当前父元素的高度,那么就会出现这情况。解决方案:1、父类元素高度调成子元素高度 参考下这个链接子元素div高度不确定时父div高度如何自适应2、官方GitHub上面也有提出过这个问题,有多种解决方案,可以自行试一下。绘制可视区...原创 2020-01-09 20:00:59 · 4101 阅读 · 0 评论 -
el-menu菜单栏高度超过100%,部分菜单被隐藏
element-ui 中el-menu,很好使用,但是最近出现一种情况:当菜单栏都收缩起来的时候,height 100%是没问题的,但是当菜单栏全部打开,会出现100%不够的感觉,部分菜单被隐藏。怎么解决呢?首先 html ,body的高度都设置下100%;然后左边栏menu的高度menuCon 设置height100%不行,需要改成 calc(100% - 40px) ,其中40px是...原创 2020-01-08 16:30:30 · 6281 阅读 · 0 评论 -
小程序生命周期中的一些奇葩问题
最近在做小程序相关的开发工作,对生命周期有一点了解,但是有时候还是会收到测试给出的奇葩问题,这里发现了一个不错的贴子,希望能帮到大家。微信小程序生命周期...转载 2019-05-10 15:25:23 · 132 阅读 · 0 评论 -
js 判断昨天,前天,去年
// 判断是否是昨天 function isYesterday(time) { const today = wx.getStorageSync('today'); const todayTime = new Date(today).getTime(); // 当天凌晨的时间 const yesterdayTime = new Date(todayT...原创 2019-05-29 10:53:11 · 1224 阅读 · 1 评论 -
小程序中css实现镜像功能
// css 中定义@mixin flip-horizontal { transform: scale(-1, 1);}// 某个样式模块下引用@include flip-horizontal;希望有用,不用谢。原创 2019-06-19 17:13:44 · 857 阅读 · 1 评论 -
深拷贝和浅拷贝,按值传递,按址传递
一、深拷贝和浅拷贝js中的两种变量类型,即值类型(数值、布尔值、null、undefined)和引用类型(对象、数组、函数)。深拷贝和浅拷贝只针对引用类型。感觉上浅拷贝就是引用,深拷贝是新建。宗旨就是新生成的对象不改变源数据,不管怎样实现,都可以理解为深拷贝。深拷贝方式一:变成按值传递深拷贝方式二:创建一个新对象 遍历要拷贝的对象属性添加给新对象。二、按值传递按值传递是针对简单类型...原创 2019-07-08 16:02:27 · 705 阅读 · 0 评论 -
小程序canvas绘制自定义分享图片并分享给好友
小程序的分享有自己的机制,在页面点击右上角,或者页面中的button 采用open-type=share方式也可以触发onShareAppMessage方法。文档里面明确说明,分享的图片可以采用网络图片,那么我们自定义图片之后将其保存,得到微信的临时文件路径也是符合要求的。...原创 2019-05-20 15:26:39 · 8185 阅读 · 3 评论