SZ 博客

忠于理想 忠于技术

0%

发表于 更新于 分类于 ， ， 阅读次数：

版本：V5.0.2

背景

使用ECharts的lazyUpdate模式多次执行setOption,仅对最终的option渲染一次。ECharts是和React一致自己单独实现了一套任务管理机制，还是基于setTimeout或Promise做的异步渲染？我们尝试从ECharts的源码中来一探究竟。

结论

代码挺好跟，但涉及到Even loop深入理解起来会相对困难。简单说明就是采用lazyUpdate更新图表的话，图表会在下一个 animation frame 中更新而在下一个animation frame之前执行的setOption会根据notMerge参数来判断是合并option还是采用最后一次option直接渲染。

阅读全文 »

发表于 更新于 分类于 ， ， 阅读次数：

ECharts版本：V5.0.2 ZRender版本 V5.1.1

背景

Canvas作为一个单独的DOM元素，内部是用一维数组来存储的像素数据，也就意味着无法和HTML一样直接对其内部的元素做事件绑定。如何去做Canvas内部的事件响应以及，一旦Canvas中的元素多起来如何去做性能优化。我们尝试从ECharts的源码中来一探究竟。

这里放了一个具有一千个元素(扇形)的饼图，我们通过该示例来跟踪源码探究ECharts是如何实现的。

image-20210723103705642

结论

总体来说ZRender对于Canvas内部的事件判断的方式为单独构建了一套事件系统。对于每一个图形，ZRende会检测一个事件的位置坐标(x, y)是否在图形的包络盒中，对于Path类的图形ZRende会在命中包围盒后多做两次判断是否命中多边形的边框或内部区域。ZRende对于巨量元素的事件判断在性能上的优化方式为构建外围包围盒，在命中包围盒后再判断坐标是否再图形内部减少了大量计算。

阅读全文 »

发表于 分类于 ， 阅读次数：

Type-Challenges

这里记录一些基于type-challenges的一些挑战题目来学习的typescript type笔记

背景

1
2
3
4
5
6
7
8
9
10
11
12
13
// 以下这三个类型均来源于 '@type-challenges/utils' 这些类型将会在接下来用于判断挑战的结果。这里简单介绍以下这三个类型 
import { Equal, Expect, NotAny } from '@type-challenges/utils'
// Expect 是一个泛型 接受一个参数 类型T 类型T要继承自true即类型T要为true否则会报错 如此就实现了判断类型是不是true的方法。
type Expect<T extends true> = T
// 这个可化繁一下
// export type Equals<X, Y> =
//    (<T>() => T extends X ? 1 : 2) extends
//    (<T>() => T extends Y ? 1 : 2) ? true : false;
// 这里做了个延迟判断
// 简单来说就是 Ts本身在给定X，Y之前无法确定T类型就延迟判断， 给定X，Y了之后(<T>() => T extends X ? 1 : 2) extends (<T>() => T extends Y ? 1 : 2)整理要为true即T同时具有X和Y的属性，如果T不同时具有X和Y的属性即整体为false。这样就是延迟判断。
type Equal<X, Y> = <T>() => T extends X ? 1 : 2 extends <T>() => T extends Y ? 1 : 2 ? true : false
// 做了一个简单的判断 T 为any类型的话会报错
type NotAny<T> = true extends IsAny<T> ? false : true
阅读全文 »

发表于 更新于 分类于 ， ， 阅读次数：

版本：V5.0.2

背景

ECharts基于笛卡尔坐标系的折线图，柱状图。默认自适应的Y轴普遍都很整齐美观(间隔，最大值是默认是整数且通常为10的倍数，对人类友好)。这是如何实现的呢？我们尝试从ECharts的源码中来一探究竟。
niceExtent-1

结论

总体来说要实现友好的间隔(niceTicks )和范围(niceExtent)，首先要根据原始的值的范围和分段数量来获取每个分段的大小，在对这个数字进行美化，具体美化规则见上文代码，大体思路为判断数字的首位距离1,2,3,5,10谁更近就将其作为数字的首位并抹去其余位的数字。获得美化后的分段大小后再根据分段的大小和原始范围来确定分段的个数。这部分的理论依据见Nice numbers for graph labels - heckbert 1990.pdf · Yuque。

阅读全文 »

发表于 分类于 阅读次数：

公交车概率论问题

怕不是上了个假大学系列第一篇。

问题

公交车站有两趟公交车、A五分钟一趟、B十分钟一趟。问在该公交车站一分钟内等到车的概率。

答案

0.28

阅读全文 »

发表于 分类于 ， 阅读次数：

SCRIPT5018: 错误的数量词

正则问题

问题：IE 11 不支持(?<= ) (?<! ) 正则

解决方案： 1. 检索此类正则并手动修复

资料：

https://docs.microsoft.com/zh-cn/scripting/javascript/misc/unexpected-quantifier-javascript?f1url=%3FappId%3DDev12IDEF1%26l%3DZH-CN%26k%3Dk(VS.WebClient.Help.SCRIPT5018)

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp

解决方案： 2. 如果是子依赖项报错可在外层项目再走一遍webpack来纠正。

资料：

如果是基于vue-cli的项目在vue.config.js中构建配置如下：

1
2
3
module.exports = {
  transpileDependencies:['your lib name']
}

原理为：将以上node_modules内的包再走一次webpack编译，如果项目本身webpack配置是支持IE11的这些包也将会支持IE11。

非基于vue-cli的项目请根据原理酌情修改webpack配置。

阅读全文 »

发表于 分类于 ， ， 阅读次数：

版本：V4.6.0

API介绍

[focusNodeAdjacency](https://echarts.apache.org/zh/option.html# series-graph.focusNodeAdjacency)：主要在关系图及桑基图中应用，表示是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。具体操作为修改其余节点的透明度。

背景

设计师认为突出节点时其余点透明度过低，使用该API发现无法修改被忽略节点及连线的透明度。

阅读全文 »