2020年09月_beichen3997

原创关于echarts如何在折现图上展示异常点位

echarts展示异常点位主要用到的markPoint // 为了重复绘图添加定位点位 let markPointData=[] if(model.data[0].errorCount&&model.data[0].errorCount.length){ let data=model.data[0].errorCount||[] data.forEach((item,index)=>{ if...

2020-09-27 16:48:06 1174

原创关于antv-f2如何使用在折线图上显示默认

1.在图标渲染完成后，我们需要展示一些默认数据，此时请看代码2.在图表上进行快速滑动的时候，上图中的红框中的竖线就会不展示，此时就会使用chart.tooltip中的onHide方法来进行当前滑动位置默认展示 getDafault(chart,data){ let tooltip= {showTitle: false,custom: true, showCrosshairs: true, def_item: data}..

2020-09-27 16:40:24 1952

原创关于antv-f2如何使用在折线图上再次打点

上代码 if(this.canvasProps.showFalse){ // 是否展示异常 chart.point() .position(colorList[1].name) .size('abnormalBatteryCount', function(val) { // console.log(val,'val1') return val ..

2020-09-27 16:32:31 802

原创关于antv-f2如何使用双坐标

上代码source:{ totalNetIncome: { // tickInterval: 50, alias: '总收益', tickCount: 5, formatter: (v) => { return '￥'+v }, },..

2020-09-27 16:29:48 814

原创关于antv-f2如何修改纵坐标轴数值的添加单位

上代码在需要展示的字段使用formatter方法进行数据的再次转换 let source={ totalNetIncome: { // tickInterval: 50, alias: '总收益', tickCount: 5, formatter: (v) => { return '￥'+v ...

2020-09-27 16:23:59 3570

原创关于antv-f2如何修改纵坐标轴数值的颜色

上代码使用chart.axios来进行canvas绘画，stroke进行颜色赋值 chart.axis('totalBattery',{ label: (text, index, total) => { const cfg = { // flll: 'red', ..

2020-09-27 16:19:17 3132

原创不定宽溢出文本适配滚动

上代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .wrap { position: relative; width: 10vw; height: 100vh; background: #ddd; overflow: hidden; ..

2020-09-28 10:24:06 264

原创基准测试js

console.time('Timer1');var items = [];for(var i = 0; i < 100000; i++){ items.push({index: i});}console.timeEnd('Timer1');结果Timer1: 13.076904296875ms

2020-09-24 17:05:11 173

原创为什么vue采用异步渲染

前言：因为不采用异步更新，在每次更新数据都会对当前组件进行重新渲染。所以为了性能考虑，vue 会在本轮数据更新后，再去异步更新视图。 vue是组件级更新，当前组件里的数据变了，它就会去更新这个组件。当数据更改一次组件就要重新渲染一次，性能不高，为了防止数据一更新就更新组件，所以做了个异步更新渲染。（核心的方法就是nextTick）原理：当数据变化后会调用notify方法，将watcher遍历，调用update方法通知watcher进行更新，这时候watcher并不会...

2020-09-09 14:39:45 1091

原创数组变化检测vue

vue有时候在改变了数组的值的时候，视图并不会更新，这时候就需要调用vue变化数组的方法来实现一、变化数组方法push()pop()shift()unshift()splice()sort()reverse()二、替换一个数组filter()concat()slice()为什么vue数组改变了，视图不变？Tips由于 JavaScript 的限制，Vue 无法检测到以下数组变动1、当你使用索引直接设置一项时，例如 vm.items[indexOfItem] ...

2020-09-09 14:32:13 194

原创 vue中父组件能监听到子组件的生命周期

父组件能够监听到子组件的生命周期，通过@hook:进行监听代码如下：// 这里是父组件<template> <child @hook:mounted="getChildMounted" /></template><script>method: { getChildMounted () { // 这里可以获取到子组件mounted的信息 }}</script>...

2020-09-09 14:14:28 419

原创 vue父组件和子组件生命周期的顺序

1.渲染过程顺序：父组件beforeCreate() -> 父组件created() -> 父组件beforeMount() -> 子组件beforeCreate() ->子组件created() -> 子组件beforeMount() -> 子组件mounted() -> 父组件mounted()2.更新过程顺序：父组件更新过程：父组件beforeUpdate() -> 父组件updated()子组件更新过程：父组件beforeUpdate()

2020-09-09 14:11:16 353

原创 v-if和v-for一起使用的弊端以及解决办法

由于v-for的优先级比v-if高，所以导致每循环一次就会去v-if一次，而v-if是通过创建和销毁dom元素来控制元素的显示与隐藏，所以就会不停的去创建和销毁元素，造成页面卡顿，性能下降。解决办法：在v-for的外层或内层包裹一个元素来使用v-if...

2020-09-09 14:05:41 1639

原创 CSS3中各个浏览器内核兼容的设置

1.-moz-：代表FireFox浏览器私有属性2.-ms-：代表IE浏览器私有属性3.-webkit-：代表safari、chrome浏览器私有属性4.-o-：代表opera浏览器私有属性IE9以下的浏览器不支持HTML5标签，所以需要导入一个html5.js补丁，原理是通过JS来生成HTML5新标签对象。因为本着移动优先的原则，现在写CSS都会用media query（响应式设计），IE8以下的浏览器不支持media query，这会导致@media 声明的C...

2020-09-09 13:46:38 412

原创 Vue的双向数据绑定原理是什么

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。具体步骤：第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter//在此我向大家推荐一个前端全栈开发交流圈：619586920 突破技术瓶颈，提升思维能力这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步：

2020-09-09 11:23:37 1685

原创 vue生命周期的理解

总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。创建前/后：在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。更新前/后：

2020-09-09 10:35:16 165

beichen3997的博客