自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(42)
  • 资源 (1)
  • 问答 (9)
  • 收藏
  • 关注

原创 echarts连续数据,数据量较少时柱体溢出Y轴或者canvas问题

解决柱状图柱体超出Y轴问题,溢出问题

2024-01-26 09:24:39 432

原创 使用wkhtmltopdf实现HTML转PDF

wkhtmltopdf的使用注意事项,以及控制一页不被pdf截断图片问题

2023-07-03 15:30:26 1788

原创 vite 引入问题require问题解决办法

vite 引入

2022-06-07 14:31:51 4534

原创 前端装机之vue最佳实践-v2.6(完结)附完整代码git地址

前端,前端工具类,防抖,深拷贝,filter,vue最佳实践

2022-05-30 16:38:18 303

原创 前端装机之vue最佳实践-v2.6(二)

前端,前端装机,element UI安装,axios安装使用,scss安装使用

2022-05-26 16:38:47 300

原创 前端装机之vue最佳实践-v2.6(一)

前端,前端最佳实践,最佳实践,vue,vue最佳实践,vue2最佳实践

2022-05-24 15:52:06 896

原创 前端装机之编辑器及vscode插件

前端,vscode,VScode,vscode插件,VScode插件

2022-05-19 14:50:59 445 3

原创 前端装机之git+node.js

前端,git,node,nodejs 安装步骤

2022-05-16 16:03:50 481

原创 大数据echarts折线图打标

大数据折线图人工打标,生成训练集。echarts手动打标工具。

2022-05-10 11:01:23 1510

原创 多重联级递归表单制作

一、项目背景需要一个提交表单,内容经常增减变动。于是设计一套后端提供配置, 前端自动生成的一个组件。前后端都比较方便,前端不需要频繁变动,后端也只需配置即可。联动需求:后续加上联动需求举例: xx 省 xxx市 xxx区联级数据,三个下拉,需要获取得到前一个值才能渲染后面的下拉框。二、思路初始设计一套,for循环完事了。后续需要联级,没办法只能想到递归,使用组件调用自己的方式。A组件中不断去调用A组件,将需要递归的一层传进去再次渲染三、问题遇到问题有几个1、数据绑定问

2022-04-19 17:33:41 266

原创 深圳抗疫支援火眼【前端取样】

从前端开发到前端取样,好像都差不多,其实区别可大了,哈哈哈哈。公司广招志愿者前去支援深圳0107疫情的前端取样,我没做过,没有经验,但是我有热情啊,说干就干,简单的培训后,直接上战场。下午5点半左右到场,穿上二级防护服,准备收第一批核酸样本。到现场看到茫茫的做核酸的人员,打电话给负责人,然后看到桌上有两大包核酸样本。开整!第一步,清点管数,一般一包是50管,500人份。但是有些会少几人,可能498人份,但是这些医生会记录。我们在登记本本就好了,记好数,放入装有冰袋的泡沫盒子中,保存好。具体流

2022-01-13 15:07:32 86

原创 切换组件echarts宽高不正常,100%变成100px问题

解决echarts '%'失效问题

2021-12-30 16:28:02 2073

原创 echarts生成误差棒图

首先声明,这个图是从这个哥们这里弄来的。自己再加以修改的。以更加贴合我自己的代码需求echarts 自定义误差图_贵林之恋的博客-CSDN博客_echarts 误差棒<script>$(function() {// 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var categoryData = []; //X轴数据...

2021-12-29 16:49:04 1275 2

原创 Canvas和SVG性能对比

在dom元素不多的情况下建议使用SVG

2021-12-29 16:40:01 4051 9

原创 纯前端Echart+HTML静态网页下载,无网运行

下载包含Echart的静态HTML代码,在无网环境下使用

2021-09-13 15:15:48 1710 1

原创 vue-echarts踩坑记录20210913

项目使用vue-echarts插件用于可视化,这个插件相比于原生的echarts好处就在于能自使用,写起来比较方便引入后可直接使用标签,详情去看git说明。于是项目上踩坑了。场景:一个页面上多个图表,准确来说是多个直方图。当我给一个直方图设置柱体颜色和图例的时候,这一个直方图开始影响他之前的一个直方图。怎么弄都不好使。我于是改用了原生的echart。问题解决。问题所在:事后,我重新找原因的时候,发现是v-if和v-show导致的问题,我把页面置为v-show没有出现影响,v-if的时候就会

2021-09-13 10:49:54 288

原创 关于...扩展运算符的深拷贝

深拷贝,把对象地址指向独立出来,重新分配内存地址。平时开发中也经常用到。先讨论下扩展运算符,这个东西最开始我不知道在哪里听说他是浅拷贝,一直没去验证,就记在心里。后面别一个学习伙伴推翻,说扩展运算符是深拷贝。后面一试,发现还真是,又觉得是深拷贝。今天开发正好遇到这个问题了。研究了一下,得出结论:扩展运算符既不是深拷贝,也不是浅拷贝。一半一半,他只能深拷贝第一层。第二层的拷贝还是浅拷贝他只能拷贝第一层。所以,还是老实用递归写深拷贝把。JSON的深拷贝就不说了,不好用哈,局限性太大了。附上.

2021-08-24 17:18:40 3364 4

原创 前端大数据+echart 基础解决方案

一、大数据处理递归函数分多次获取数据,并且必须保证接口同步调用。const getStep = 50000;async recursionGET(start:number,end:number){ let readStart = start let readEnd = end if(readStart + this.getStep < readEnd){ await this.getSignals(readStart,r

2021-08-19 17:01:58 483

原创 echart+大数据处理一些设置(持续更新)

第一次接触大数据,用的echart。之前的echart都是画简单的饼图,数据量没那么大。这次的把大数据处理的一些办法,设置写一下。第一个接触的是折线图,先上一个配置<v-chart ref="detailChart" :option="detail" :manual-update="true" :autoresize="true" class="echarts-mini"

2021-08-10 16:46:54 1357

原创 纯css变换图片颜色png

众所周知,只有svg格式图片能改变颜色,png是不能改变的。最近也遇到这种问题了。开始解决办法就是找设计师要么再切一张图要么就搞个SVG给我。但是这都是求人搞,有没有办法自己就把换肤搞定。这个时候就用到了一个css3的一个新属性filter:drop-shadow具体怎么使用不说了,直接上代码看效果.icon-box{ width: 16px; height: 18px; overflow: hidden; z-index: 1;}.red-img{ d

2021-03-09 16:32:48 221

原创 对象数组根据对象的某个值进行去重操作,求和相同对象的个数

需求不同时间断产生的数据不同,个数也不相同,我们需要统计一个时间段的个体,并统计这些个体出现的次数。数据如下:let data=[{name:"cxy",total:2,time:"2021-02-01"},{name:"cxy",total:3,time:"2021-02-02"},{name:"pp",total:2,time:"2021-02-01"},{name:"lhx",total:2,time:"2021-02-01"},{name:"lhx",total:2,time:"2021-0

2021-02-14 17:13:56 519

原创 Echart饼图添加轮播效果

Echart饼图轮播效果关键代码如下,传入饼图数据的长度,以及饼图echart对象即可完成饼图的轮播,代码如下:/** * * @param pieDataLength 饼图数据长度 * @param ec 饼图echart对象 * @param time 轮播时间 */export function pipeAnimation(pieDataLength: number, ec: any,time:number) { let timer = null; if (pieDat

2021-01-26 11:01:09 856

原创 HTML文件、图片、pdf上传预览

一、选择文件上传上传文件的关键在input标签,以及获取文件并发送<!--ng版本--><input hidden type="file" multiple="multiple" (change)="fileChange($event)" ><!--原生版本 用js监听change事件就好了--><input hidden type="file" multiple="multiple">使用hidden属性将input标签隐藏,这样便于我们

2020-07-08 14:57:52 1595

原创 跑马灯组件---基于angular6+

跑马灯,非常常用的功能,用于消息通知之类的。百度一搜都是使用<marquee>来完成。结果发现W3C上根本没有这个标签。原来是这个标签即将被删除。在前端不断革新的今天,怎么能用将废弃的标签呢。指不定哪天就没了,程序出了莫名的bug都不知道。所以我决定自己写一个跑马灯。单独的css3动画完全可以实现一个跑马灯效果,但是,css写死了,那怎么组件化,让人人都可以用呢。所以想到使用js控制。第一个想到的就是定时器。通过定时器+transform:translateX()去减少px的值。只需要将定时

2020-06-22 14:30:00 1174 2

原创 一个简单的带复选框的树形图

<body> <ul> <li class="li" > <label><input type="checkbox" checked="true" class="check-father" /><span id=""> adadadadsa </span></label> <ul class="child"> <li> .

2020-06-15 15:16:14 608

原创 最近工作的一点收获

一、解决ng切换路由不刷新页面问题。遇到这个问题,第一想到的就是vue的keep-alive,说实话还是vue香。ng默认都会缓存路由,这就导致路由切换不刷新。带来的问题就是,比如我看了第一篇文字,往下滚动了,返回主页面,再进入这篇文章结果还在滚动位置,数据也不会刷新。这明显有问题的。需求是需要刷新这个组件。解决办法:只需要每次进入的路由不一致就可以使得组件刷新。最简单的方法就是在路由后面加上newDate(),你永远无法踏入同一条河流。这样路由永远都不会相同。www.baidu.com?ref='

2020-05-28 16:10:33 138

原创 echart渐变折线图

效果图,以及代码。关键点在于渐变,后面代码中有注释说明。上下左右四个渐变方向,加上渐变的色彩偏移,既可以完成带渐变的折线图。需要与后端对接,只要改变X轴Y轴的数据,还有一些小的细节就可以了。比较简单实用。let option={ color:'#38d7b7', tooltip: { trigger: 'axis', ax...

2020-05-06 11:34:13 1229

原创 ng 集成 ngx-echarts

这个其实网上有很多教程,但是我还是看那些教程看了很久都没有看明白。ngx-echarts确实很好用哈。想复用一个div来渲染不同的数据。<div echarts class="echartsBox" [options]="chartOption1"></div>开始呢就这样绑定一个对象就搞定了,至于对象里面有什么,随便复制一个echart-demo就可以看到效...

2020-04-27 16:47:15 1073

原创 带进度条的Tree

问题来由工作上业务有个需求,树状图展示数据。这个好办,很多组件,插件都有数状图。比如Ant组件。但是想在tree的文字后面再做扩展却是很难。可以说基本办不到。类似于这种树状图。ant基本已经写死了。那么办法只能自己整了。自己手写的效果:上代码这个就不多说了,用li画就可以了,由于我这里规定好了只有三级目录,所以直接写死了。如果不确定有几级的话再想其他办法,用递归也可以的。<u...

2020-04-26 14:26:14 352

原创 自创提升流程开发效率小工具,只针对当前工作业务有效(2019-12-17)

最近在做一个流程项目,就比如企业里面一个人要申请个VPN啥的。流程不难,但是费力!最开始是这样的这个样子呢,看起来还挺顺眼的,有内味了。有多少新增多少。然后一键生成,多舒服啊。可是有一次我开发一个流程。他喵的这个流程字段主表加子表一共有上百个字段,我的妈呀,我要点一百多次的新增。不仅如此,还要复制200多遍。这样下来还不如自己复制得了。懒则生变。为了让他更智能。 ...

2019-12-17 18:29:38 270

原创 js继承方式照个网上例子加自我总结

话不多说,直接上代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script> //父类 function ...

2019-12-17 17:56:11 152

原创 VUE学习(二)

1.轮播图https://github.com/surmon-china/vue-awesome-swiper使用swiper的轮播图插件,非常好用。swiperOption:{pagination:'.swiper-pagination', //下面的点点点loop:true, //循环...

2019-11-01 10:34:20 79

原创 VUE学习(一)

一、初始化项目及准备工作1.新建一个git项目,自己做的好玩也要git管理,顺便熟悉使用git指令。git clone xxxx git add . git status git commit -m "xxxx" git push git merge index-ajax(切换分支)这几个指令就足够用了。具体的还要好好学学。在码云上新建了一个自己的项目。2....

2019-10-30 16:37:34 77

原创 webpack踩坑记(一)

1.npm install --save-dev webpack webpack-cli 下载webpack以及webpack的脚手架2.新建项目文件夹,进入文件夹然后 npm init -y 这个指令可以直接初始化一个叫package.json的文件{ "name": "webpack-demo", "version": "1.0.0", "descriptio...

2019-08-14 20:08:18 255

原创 JavaScript语言精粹学习(一)

1.对js的注释建议使用 // 注释,不要使用/* */注释,后者在和正则表达式放一起的时候可能会出现语法错误2.undefined、NaN、Infinity 并不是JavaScript的保留字,应该被保留但是并没有被保留3.数字 JavaScript统一为64位浮点数 1e2=1*4.字符串是16位的字符集,创建即不可变5.JavaScript的所有假值:false、null、...

2019-08-12 21:04:12 88

原创 原型链学习

https://www.jianshu.com/p/dee9f8b14771

2019-08-12 11:12:10 73

原创 js动态添加对象使用.和[ ]的区别

js动态添加对象使用.和[ ]的区别obj.name 那么name必须为字符串,不能为数字或者其他类型的obj['name'] name可以是任意字符,包括字符,数字,甚至是函数对象等等...

2019-08-12 10:28:14 179

原创 前端学习日记19-7-24

今天在csdn上解决问题时候,看到两个自己也不懂的问题。1.localStorage、sessionStorage、Cookie的区别及用法。主要是localStorage,感觉很好用。还有个小例子,比如给新用户一个好看的弹框,或者只给第一次进入网页的用户一个小广告,嘿嘿~之后的在进入该网页又没有广告。可以使用localStorage存储数据,然后之后再验证是否是第一次进入。非常好用,以后一定...

2019-07-24 16:55:14 2971

原创 原生js document.getElementById(“id“)获取对象与jQuery $(“#id“)获取对象区别

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> #li1{ background-color: red; width: 300px; } #li2{ b...

2019-07-12 18:13:20 2309

原创 点击div即可切换单选框

今天再CSDN问答上看到个问题,点击li同时改变单选框的checked状态。最开始思路使用jQuery的attr()和removeAttr()两个方法实现。后来发现问题,removeAttr()去掉checked属性,但是单选框的选中点依旧没有去掉。但是dom结构中已经没有了checked属性,给人一种网页没有重绘的感觉。于是在网上找了下答案,自己再改了一些。感觉这个问题以后也有可能遇到,所以...

2019-07-10 17:56:40 1123 1

echart.string.ts

echarts的字符串

2021-12-24

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除