
前端
Qice
努力中...
展开
-
npm ERR! command git ls-remote ssh://git@github.com/hyj1991/v8-profiler-next.git
npm 安装 v8-profiler-next时报错报错内容:npm ERR! code 128npm ERR! command failednpm ERR! command git ls-remote ssh://git@github.com/hyj1991/v8-profiler-next.git解决方案我使用的是https协议从github下载安装的库,并没有配置ssh相应的key,而在gitlab-ci中使用了ssh协议去下载,那么应该将ssh协议改为https协议:可以在执行原创 2021-10-14 21:30:09 · 11347 阅读 · 1 评论 -
js实现sleep
js本质上是单线程执行,所以不可能像其他语言,比如C++,C#一样,直接将线程停止几秒钟的,那样会将进程卡死,所以这里的sleep其实是让上下两行语句的执行间隔达到一定时间async function sleep(time) { if(isNaN(time)) { return; } return new Promise((resolve)=>{ setTimeout(()=>{ resolve(time); }, tim原创 2021-05-09 09:43:47 · 766 阅读 · 0 评论 -
使用echarts绘制火焰图
介绍火焰图常用于性能分析中,显示某个函数堆栈的耗时情况,一般火焰图区块越大,表示耗时越高,越有可能是性能热点,如何读懂火焰图?绘制原理echarts官方是没有火焰图类型的图表的,但是可以通过 echarts的custom类型来绘制火焰图;火焰图本质上就是一些长方体区块的堆叠,因此我们只需要计算好每个方块的左下角坐标,以及每个方块的宽高,就可以把火焰图绘制出来主要用到了 custom系列的renderItem函数,用于自定义图形绘制,对series中的每一个数据项都会应用一次api.valu原创 2020-07-08 21:14:17 · 3523 阅读 · 5 评论 -
JS自动复制字符串到剪贴板
原理自动复制到剪贴板可以分两步走:自动选中,复制到剪贴板<input>标签可以自动选中文本框内的文本,然后通过document.execCommand('copy')实现自动复制,或者,直接使用Navigator.clipboard操作剪贴板,可以写入和读取任意数据document.execCommand是一个同步命令,在w3c中记为将要废弃的接口Navigator.clipboard 使用Promise,是一个在草案阶段的剪贴板相关的接口实现任意文本自动复制-使用Input标签原创 2020-06-18 21:49:24 · 3482 阅读 · 1 评论 -
js获取字符串像素宽度
前端为了坐字符串显示的适配,经常需要判断某个格子能显示多少个字符,下面给出我的解决方案;思路js本身是不提供这种接口的,但是可以知道,行内标签如span的宽度在不设置边距等参数的情况下,标签对应元素的宽度就是内容的宽度,因此,可以使用span标签来获取字符串对应的宽度示例代码 getTextWidth(str,fontSize) { let result = 10; l...原创 2020-03-26 23:41:46 · 5798 阅读 · 0 评论 -
Vue+echart实现在tooltip中点击
在使用echart时,有时会需要在tooltip中实现点击特定数据来进行某些操作,但echart的tooltip中添加点击时只能用<button onclick="xxx"></button>的方式实现,这样的话,点击事件的回调函数就没法访问vue组件的数据了,这就很不方便,下面就说明下我是怎么解决这个问题的主要是依靠函数闭包实现完整代码:<template&...原创 2019-12-12 21:52:16 · 5981 阅读 · 8 评论 -
echart之 ----通过点击事件进行标线
主题:使用echarts绘制图表并,点击曲线上的点时跳转到指定链接,点击绘图区域空白处时,绘制标线本文中使用的是按需加载的方式引入 echart,若需要使用标线功能,请至少require(“echarts/lib/component/markLine”);点击事件echarts中,有两种方式可以捕捉点击事件,用于捕捉曲线的点击事件:chartInstance.on(‘click’,f...原创 2019-09-27 21:15:23 · 7261 阅读 · 12 评论 -
echart图表缩放功能以及缩放事件处理
缩放功能const defaultOption= { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type...原创 2019-08-24 10:41:38 · 18080 阅读 · 0 评论 -
使用vue-cli搭建多页应用
使用vue-cli 3.9搭建多页应用在vue-cli 3.0之后,官方已经支持通过简单的配置来创建多页应用了,单默认创建的应用还是单页应用,接下来就介绍下我创建多页应用的流程;第一步,创建项目官方vue-cli创建项目的教程选择一个合适的目录,打开命令行窗口,运行 vue ui这里假设你已经安装了 node.js以及vue-cli环境了,若没有安装的话可以先百度一下弹出网页...原创 2019-07-31 20:24:37 · 689 阅读 · 0 评论 -
<a>标签打开新的窗口
我们使用<a>标签进行页面跳转时,默认是在当前页面打开链接文档的,但有时候我们想在新的窗口打开链接文档,可以使用<a>标签的 target属性<a href=“url” target="_blank">如<a href="http://www.baidu.com">百度默认</a>会在当前窗口打开百度默认<a href="...原创 2019-07-26 20:31:19 · 880 阅读 · 0 评论 -
链接分享的简单思考
链接分享可以说是一个非常常用的功能了,本次网页链接分享做一些简单的探索;基本链接分享最基本的链接分享功能很简单,场景:用户通过发送链接给其他人分享当前页面解决方案:这种分享不涉及任何逻辑,直接复制浏览器地址栏中的链接即可;带跳转功能的链接场景:有一个页面很长,用户滚轮滚了半天到了一个页面的中部,希望将当前的页面以及当前页面的位置分享给其他人;分析在页面中添加适当的锚点, 也就...原创 2019-07-24 21:00:45 · 1175 阅读 · 0 评论 -
webdeploy环境搭建
一. 服务器配置为了使用web deploy进行发布,你首先要安装web deploy工具, 可以从WebPlatform Installer中选择最新的版本进行安装,需要注意的是,安装web deploy时最好全部安装,不然会出现一些奇奇怪怪的问题 如果你还没有webPlatform Installer,你可以去MSDNhttps://www.microsoft.com/web/...原创 2019-07-23 23:42:10 · 5866 阅读 · 0 评论 -
IIS 返回405报错解决过程
今天由于使用中的一台windows服务器硬盘损坏,导致系统需要重装,而这台服务器上原先部署着一个运行正常的网站,在这次同事装完IIS环境后启动网站时发现,能访问上面的文件,但是无法通过POST操作向网站上传递数据,花了一些时间才解决问题,以下是解决过程:按照以前发生过类似的问题的解决方案,先怀疑的是网站权限问题,是不是EveryOne和 IUSE 对网站对应的物理路径都没有写入权限,...原创 2019-07-04 20:29:57 · 6641 阅读 · 4 评论 -
Echart堆叠图--stack
Echart使用时间轴,并且设置stack后,图表显示异常的问题参考github的issue具体原因:当echart使用时间轴时,不同曲线无法在同一个细分粒度上对齐,因此无法产生类目轴的堆叠效果若需要在时间轴上使用堆叠效果,可以考虑将时间作为一个类目,将时间轴修改为类目轴;例如:...原创 2019-07-04 20:17:37 · 3535 阅读 · 0 评论 -
echart获取鼠标所在位置的x值以及y值
在echart图表中,经常需要获取当前鼠标所在点的值,一般情况下都会通过let chartInstance = echart.init(dom);chartInstance.off('showTip');//这里是为了防止多次注册事件chartInstance.on('showTip',function(param){ let nowDataIndex = param.dataInd...原创 2019-07-04 20:14:23 · 10387 阅读 · 2 评论