- 博客(57)
- 收藏
- 关注
RSS订阅原创 echarts的dispatchAction
触发图表行为，通过dispatchAction触发。例如图例开关, 数据区域缩放dataZoom，显示提示框showTip等等。(在 ECharts 中主要通过方法添加事件处理函数。ECharts 中的事件分为两种，一种是鼠标事件，在鼠标点击某个图形上会触发，还有一种是调用后触发的事件。ECharts 中支持的图表行为，通过触发。
2024-01-10 14:31:11
2654
原创 echarts -- 柱状图之柱状条如何显示白色侧阴影且鼠标移入时高亮
对于上图的需求，我们可以在series里设置两组数据，也就是一系列里有两个柱状图，缩小其距离使其重合从而显示 为主柱状条的侧阴影。主要是设置副柱状条的宽度为1，主副柱状图直接的barGap为0就可以。有个图表是要求柱状条的右下侧显示一个白色的侧阴影，一直没找到合适的方法， 加border或者shadowColor都达不到需求的效果。因为柱状图 中series里可以包含多组数据，有几组就代表一个系列中有几个数据。seriesName就是series属性里对应的两组数据的name。
2024-01-10 14:28:43
1079
原创 echarts使用之柱状图
series属性是一个对象，可以用来定义一个数据集的特征、样式和其他信息。通过series属性的设置，可以让echarts可视化出你想要的样子。series属性可以用在折线图、柱状图、散点图、区域图、饼图等多种可视化图表中。可以设置在系列中，即 series.tooltip;可以设置在系列的每个数据项中，即 series.data.tooltip。可以设置在坐标系中，grid.tooltip、polar.tooltip、single.tooltip;可以设置在全局，即 tooltip;
2024-01-10 09:08:29
892
原创 CSS中的object-fit和background-size
图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。在这种情况下，图像的大小将被调整以适应其容器的长宽比。如果图像的长宽比与容器的长宽比不一致，它就会被“黑边化”。这里，图像也将被调整大小以适应其容器的长宽比，如果图像的长宽比与容器的长宽比不一致，那么它将被剪切以适应。使用这个，图像将被调整大小以适应其容器的长宽比，如果图像的长宽比与容器的长宽比不一致，它将被挤压或拉伸。在这种情况下，图像根本不会被调整大小，既不会被拉伸也不会被挤压。
2024-01-03 15:35:12
726
原创 CSS中的img和background-image
如果图片很多，这里又出现一个新的问题，不同的浏览器支持的并发加载数量是不一样的，（最新测试）IE是10个，FF是10个，图片多，就会出现严重的延迟或者404，因为图片加载慢会影响到页面主要数据呈现，那么让用户看到的都是空白，你好意思让他继续等下去吗！第二，如果图片显示区域空间大小是预留的，那么图片必须和预留的空间一致，否则图片要么被拉伸要么被压缩，都不是等比例操作。刚才说了，Img标签是自闭和的，不能添加文本内容，但是，Img有一个alt属性，而且这个属性在w3c标准中，要求必须有，这样做的。
2024-01-03 09:38:51
1006
原创 countUp插件用法-数字跳动特效
很多大屏、官网或者展示类页面会用到数字跳动更新效果的需求，可以试试countUp插件。我这里没有放动图，具体实现效果可以搜搜，主要写一下基本用法。countup.js是一个无依赖性、轻量级的javascript类，可用于快速创建动画，以更有趣的方式显示数字/数据。如果script写在body最底下，那么window.onload就也不需要了。进行安装依赖在页面中引入。
2023-11-17 15:05:08
1030
原创 No matching version found for zr-map-ol@1.1.19.
如果上面这种方式安装之后npm i还是报错，试试下面这种方式(我没有试下面的方式 上面的已经解决掉了)
2023-11-16 13:23:35
166
原创 el-cascader 子级为空时不显示问题/只展示到相应层级
这个和上面的区别就是，不管三级之后有没有数据，children是否为空，都给删除掉了。但是二级没有子级的时候还是会展示三级的暂无数据空白项。使用element-ui的el-cascader级联组件时，当子级为空时，会展示暂无数据的的空白页，要求是无数据的不展示。还有一个需求是，只展示到三级，三级之后的子级不再展示。
2023-06-08 15:23:48
3406
1
原创 JavaScript中通过DES实现加密
前后端使用HTTP协议进行交互的时候，由于HTTP报文为明文，所以通常情况下对于比较敏感的信息可以通过对称加密在前端加密，然后在后端解密实现"混淆"的效果，避免在传输过程中敏感信息的泄露（如，密码，证件信息等）。原链接：https://www.jianshu.com/p/24691c8d722c。不同的项目可能引入的包不一样，接下来的加密方法和上面就一样了。使用DES算法，工作方式为。2. js页面实现DES加密。引入cryto-js包。
2022-11-08 11:53:39
4263
1
原创 RxJS - interval、take制作倒计时效果
获取验证码按钮功能：pipe方法用于链接可观察的运算符，而subscribe方法用于激活可观察的并监听发射的值。subscribe完整的函数如下：下面包含三个函数的对象被称为observer（观察者），表示的是对序列结果的处理方式。通过Observeable的subscribe函数，观察者订阅被观察者的消息。① next 表示数据正常流动，没有出现异常；② error 表示流中出错，可能是运行出错，http报错等；③ complete 表示流结束，不再发射新的数据。
2022-10-14 14:04:30
573
原创 Vue实例 和 Vue实例周期生命函数
当Vue实例销毁时，已绑定的方法也不会跟着销毁，因为一些方法时放在堆中的，实例中只是保存了它的引用，你实例销毁了，只是引用的那个纽带销毁了，但是堆的内容还在那里啊。所以需要自己手动销毁存储在堆中的内容。
2022-10-14 14:03:44
748
原创 JavaScript - reduce（）方法
reduce()函数接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。reduce()函数可以作为一个高阶函数用于函数的compose。传入初始值initailValue的话，total一开始值为1；若initailValue不传，total的值为15.5。initialValue: 可选。传递给函数的初始值。注意：reduce（）对于空数组不会执行回调函数。currentIndex：可选。初始值，或计算后的返回值。currentValue：必需。当前元素所属的数组对象。
2022-09-23 15:02:28
232
原创 初识RxJS
Reactive Extensions for JavaScript 的缩写，起源于Reactive Extensions (他的目标是对异步的集合进行操作，也就是说，集合中的元素是异步填充的，比如说从Web或者云端获取数据然后对集合进行填充 )，是一个。流（售房部/rxjs的Observable）是被观察的，当某个函数订阅流的某个事件（推送房价），该函数是观察者（购房者/rxjs的Observer）。（2）每个stream有多个方法，调用时会基于原来的流返回一个新的流，原来的流不做修改，饱正不可变性。
2022-09-21 17:13:11
497
原创 table box-sizing属性
如果设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度会被增加到最后绘制出来的元素宽度中。也就是说width和height只包含宽度和高度，不包括border、padding和margin。想要设置的边框和内边距的值是包含在width内的。如果将一个元素的width设置为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width-border-padding的值。
2022-09-20 10:52:00
374
原创 sessionStorage & localStorage、session & cookie
因为http协议是一种无状态协议，每一次http请求都是独自的，不受它之前和之后请求的影响。比如登录信息，这次请求带着登录信息，下次请求不知道有没有登录，无法追踪上次的请求，所以没有别的办法每次只能传很多参数。cookie和session，可以与服务器交互通信。
2022-09-16 18:02:13
718
原创 JS - iterator（迭代器）
这样就有了四种数据集合，用户还可以组合使用它们，定义自己的数据结构，比如数组的成员是Map，Map的成员是对象。这个对象有 value 和 done 两个属性，value属性返回当前位置的成员，done属性是一个布尔值，表示遍历是否结束，即是否有必要再调用一次next ()。其次，Set结构遍历时，返回的是一个值。而Map结构遍历时，返回的是一个数组，该数组的两个成员分别是当前Map成员的键名和键值。实际上，这提供了一种简便机制，可以将任何部署了 Iterator 接口的数据结构，转为数组。
2022-09-08 10:34:48
6389
原创 JS之（...）三个点的用法 - 扩展运算符&剩余运算符(rest)
扩展运算符（spread）用三个点号表示，功能是把数组或类数组对象展开成一系列用逗号隔开的值。剩余运算符（rest）也是三个点号，不过其功能与扩展运算符恰好相反，把逗号隔开的值序列组合成一个数组。当三个点(…)在等号左边，或者放在形参上，为 rest 运算符。当三个在等号右边，或者放在实参上，是 spread运算符。或者说：放在被赋值一方是rest 运算符。放在赋值一方式 spread运算符。
2022-09-06 19:42:10
1137
原创 Angular & Vue & React 前端框架对比
一个是UI库（React），另一个是成熟的前端框架（Angular）,最年轻的（Vue）则可以称之为渐进式框架。这几个框架都是基于组件的框架，都有快速创建UI的功能。大部分时间它们可以相互替代来构建前端应用。...
2022-08-29 10:33:27
2299
原创 作用域、块级作用域
全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定义的时候就已经确定了，而不是在函数调用的时候；执行上下文环境是动态的，调用函数时创建，函数调用结束时就会自动被释放；全局执行上下文环境是在全局作用域确定之后，js代码马上执行之前创建；作用域是静态的，只要函数定义好就一直存在，且不会再变化；函数执行上下文是在调用函数时，函数体代码执行之前创建；全局上下文环境==>全局作用域；块作用域（ES6才有）......
2022-07-19 15:03:04
401
1
原创 JS执行上下文和执行上下文栈
创建作用域链在执行上下文创建阶段，在变量对象之后创建，作用域链本身包含变量对象。（3）eval函数执行上下文运行在eval函数中的代码也获得了自己的执行上下文。（2）在全局执行上下文（window）确定后，将其添加到栈中（入栈/压栈）；（2）函数执行上下文每次函数调用的时候，就会创建一个新的执行上下文。每一个函数执行上下文被创建，它都会按照特定的顺序执行一系列的步骤。（3）在函数执行上下文创建后，将其添加到栈中（入栈/压栈）；（1）全局执行上下文这是默认的，最基础的执行上下文。......
2022-07-18 11:56:23
244
原创 变量提升和函数提升
1. 变量声明提升· 通过var定义的变量，在定义语句之前就可以访问到；变量的声明会提升到函数的顶部，变量的赋值并不会· 值：undefined2. 函数声明提升· 通过function声明的函数，在之前就可以调用；函数表达式不会进行变量提升，只有函数声明形式才可以· 值：函数定义(对象)3. 先看一下作用域的一些东西：4. 变量提升和函数提升同时存在5. 变量提升和函数提升的优先级............
2022-07-14 15:19:53
2862
原创 this指向问题
this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向是调用它的对象。 首先了解下this的几种情况： (1) 作为函数被调用时，分为两种情况· 在非严格模式下，this指向window· 在严格模式下，this指向undefined（2）如果一个标准函数，也就是非箭头函数，是作为某个对象的属性时，我们更习惯称呼这个函数为方法，当通过方法被调用时，this指向这个方法的拥有者。...
2022-07-13 15:45:56
138
转载 Uncaught SyntaxError: Unexpected identifier 和 Uncaught SyntaxError: Invalid or unexpected token
Uncaught SyntaxError: Unexpected identifier 和 Uncaught SyntaxError: Invalid or unexpected token
2022-07-12 09:40:09
3244
原创 原型链--属性问题
1. 读取对象属性时：会自动到原型链中查找；2. 设置对象的属性值时，不会不会查找原型链，如果当前对象中没有此属性，直接添加属性并设置其值；3. 方法一般定义在原型中，属性一般通过构造函数定义在对象本身上；...
2022-07-06 11:12:43
189
原创 flex布局
1.4 弹性容器(1). justify-content 调整内容：控制一行里的弹性元素在主轴上如何分布；应用于弹性容器上，不能用到单个弹性元素上，定义如何把弹性容器的空间分配到弹性元素之间。取值：flex-start（默认值，弹性元素靠株洲起边） / flex-end / center / space-between / space-around / space-evenly align-content：定义各弹性元素在弹性容器的垂轴上如何分布；align-items：定义各...
2022-05-06 11:32:21
189
原创 函数的prototype属性、显示原型和隐式原型属性
1. 函数的prototype属性： （1） 每个函数都有一个prototype属性，它默认指向一个Object空对象（即称为：原型对象）** fu'n （2）原型对象中有一个constructor，他指向函数对象 * 检查方法： console.log(Date.prototype.constructor) === Date） // true console.log(Fun.prototype.constructor) === Fun）// true2. 给原型对象添加属性.......
2022-04-29 08:39:57
1218
原创 Angular - 组件投影
投影 在某些情况下，需要动态改变组件模板的内容，而这些内容没有复杂的业务逻辑，也不需要重用，只是一小部分 HTML 片段，这个时候可以使用 Angular 提供的一个特性，叫做投影。在 Angular 里面可以使用 ng-content 指令将父组件模板中的任意片段投影到它的子组件上。ng-cntent西荡岛屿 需要注意的是，自定义的组件的标签内部是不可以嵌套其他标签的，它不像一般的 HTML 标签可以嵌套，但可以使用投影实现嵌套。app.compontent.html:c...
2022-04-25 14:47:08
1448
原创 Angular - 生命周期(待扩充)
当 Angular 实例化组件类并渲染组件视图及其子视图时，组件实例的生命周期就开始了。生命周期一直伴随着变更检测，Angular 会检查数据绑定属性何时发生变化，并按需更新视图和组件实例。当 Angular 销毁组件实例并从 DOM 中移除它渲染的模板时，生命周期就结束了。当 Angular 在执行过程中创建、更新和销毁实例时，指令就有了类似的生命周期。Angular 会按以下顺序执行钩子方法：钩子方法 用途 时机 ngOnChanges() 当 Angular 设置或重新设置
2022-04-24 20:15:00
1586
原创 JS- 函数、回调函数、函数this指向
一. 函数1. 什么是函数？ 实现特定功能的n条语句的封装体 只有函数是可以执行的，其他类型的数据不能执行2. 为什么要用函数？ 提高代码复用 便于阅读交流3. 如何定义函数？function fn1() {... } // 函数声明var fn2 = function() { ... } // 函数表达式4. 如何让调用函数？test()：直接调用；obj.test(): 通过对象调用；new test(): 通过new调用；test.call/ap...
2022-04-20 19:00:00
259
原创 JS - 对象
一. 对象1. 什么是对象？多个数据的封装体、用来存储多个数据的容器、一个对象代表现实中的一个事物。2. 为什么使用对象？ 便于统一管理多个数据。3. 对象的组成：属性：属性名(字符串)和属性值(任意)方法：一种特别的属性(属性名是函数)4. 对象的调用.属性名：编码简单，有时不能用[ ' 属性名 ' ] ：通用var persion = { name: 'Tom', age: 12, setName: function(name) { this.name = ...
2022-04-15 20:30:00
34
原创 JS - 数据类型 以及 数据、变量和内存、值传递
1.分类(1).基本（值）类型 ① String ② Number ③ boolean ④ undefined ⑤ null(2). 对象 (引用) 类型 ① Object：任意对象 ② Function：一种特别的对象（可以执行） ③ Array：一种特别的对象（数值下标，内部数据有序）2. 判断 ① typeof：返回的是数据类型的字符串表达，可以判断 undefined/ 数值/字符串/布尔值② instanceof：判断对象的类型（具体类型） ...
2022-04-13 14:41:54
145
原创 JS中的两个感叹号是什么意思
!! 其实就是两次取 ‘ 非’ 的运算。先看一下其他变量类型和Boolean类型的相互转化：0，-0，null，" "，false，undefined和NaN转化为false，其他为true；var myBoolean=new Boolean();var myBoolean=new Boolean(0);var myBoolean=new Boolean(null);var myBoolean=new Boolean("");var myBoolean=new Boolean(false).
2022-04-01 11:00:11
445
原创 Angular - 路由
1. spa(single page application)概念: 单页面应用，锚点值切换，一个路由对应一个页面。一个单页应用使主页面只加载一次不再刷新，只改变页面上部分内容的应用。2. 路由相关对象名称 简介 Routes 路由配置，保存着哪个URL、对应展示哪个组件，以及在哪个RouterOutlet中展示哪个组件。 RouterOutlet 在Html中标记路由内容呈现位置的占位符指令。(插座) Router 负责在运行时执行路由的对象，可以通过调用其...
2022-03-28 09:00:00
695
原创 JS - 构造函数
1. 定义在 JavaScript 中，用 new 关键字来调用的函数，称为构造函数。构造函数首字母一般大写。2.为什么使用构造函数
2022-03-27 15:17:02
130
原创 Angular- 响应式表单和模板驱动表单
1. 响应式表单 使用'@angular/forms'库中的FormGroup, FormControl，FormArray,FormBuilder 等类构建出的数据对象就是响应式的表单,在响应式的表单中，我们会在数据源里面进行各种操作，像添加校验等，在html文件中使用 formGroup,formGroupName,formControlName等将数据和视图进行绑定(需要引入ReactiveFormsModule)。 响应式表单的校验逻辑还可以以返回一个Valid...
2022-03-27 14:33:43
2054
原创 angular常现问题合集：‘XXX‘ is not a known element...
下面的问题都是写代码的时候经常出现的问题，虽然都是小问题，但是有时候出现还是不能一下就找到错误点，记录一下，错的多了大概就会记住了 :）。1. Can't bind to 'formGroup' since it isn't a known property of 'form'.2.nz-select' is not a known element: 1. If 'nz-select' is an Angular component, then verify that it is pa...
2022-03-08 11:52:59
6104
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人