数据可视化
CSS3动画
形变
- transform：
<transform-function>：用于对元素进行变换的属性，可以应用于 2D 和 3D 变换。可以平移、旋转、缩放和倾斜。 - transform-origin：
x y? z?，用于定义一个元素进行变换时的原点。只能在配合transform属性使用时生效。 - transform-style：
flat | preserve-3d，指定子元素如何在 3D 空间中呈现。主要与transform属性配合使用。 - backface-visibility：
visible | hidden，指定某个元素当背面朝向观察者时是否可见。常与transform属性结合使用。 - perspective：
d：通过定义观察者与Z=0平面之间的距离，在 3D 空间中设置一个元素的透视效果。设置在父元素上。
动画
- animation：
name duration timing-function? delay? iteration-count? direction? fill-mode? play-state?，创建动画效果的属性。通过定义多个关键帧（keyframes）来控制元素在一定时间内的状态变化。可以指定动画的持续时间、延迟、播放次数、播放速度等。 - @keyframes animation-name：
{from, to} | {0%, ..., 100%}，定义动画的关键帧（从一个状态到另一个状态的过渡）的规则。通过from和to或者百分比值来定义。
Canvas
canvas
- <canvas>：
with height，被用来通过 JS（Canvas API 或 WebGL API）绘制图形及图形动画的元素。 - el.getContext()：
(contextType, contextAttributes?)，返回canvas的上下文，如果上下文没有定义则返回null - el.toDataURL()：
(type?, quality?)，将 Canvas 转换为 Base64 编码的图像。
设置
- ctx.fillStyle：
color| gradient | pattern，默认：#000，设置或获取 Canvas 填充颜色或样式 - ctx.strokeStyle：
color| gradient | pattern，默认：#000，描边颜色 - ctx.globalAlpha：
number，默认：1.0，0~1的数值，值越小透明度越高，设置或获取 Canvas 的全局透明度。 - ctx.createLinearGradient()：
(x0, y0, x1, y1)，创建一个沿着参数坐标指定的线的线性渐变。 - ctx.createRadialGradient()：
(x0, y0, r0, x1, y1, r1)，创建一个沿着参数坐标指定的线的放射性渐变。 - gradient.addColorStop()：
(offset, color)，用于在渐变中设置颜色停靠点。gradient是通过上述2个方法创建出来的CanvasGradient对象。 - ctx.createPattern()：
(image, repetition)，用于创建一个图案。 - ctx.lineWidth：
number，默认：1，设置线条宽度。不带px单位 - ctx.lineCap：
butt | round | square，默认：butt，用于设置路径的端点样式。 - ctx.lineJoin：
round | bevel | miter，默认：bevel，控制路径连接处的形状。
路径
- ctx.beginPath()：
()，开始一条新的路径的方法。每次调用beginPath()都会清除当前路径，使接下来的绘图操作不会连接到先前的路径上。 - ctx.closePath()：
()，用于关闭当前路径的方法。将路径的最后一部分连接回到起始点，形成一个闭合的路径。 - ctx.stroke()：
()，通过线条来绘制图形轮廓/描边（针对当前路径）。 - ctx.fill()：
()，通过填充路径的内容区域生成实心的图形（针对当前路径）。 - ctx.moveTo()：
(x, y)，将当前路径的起始点移动到指定的起始点坐标点。 - ctx.lineTo()：
(x, y)，通过连接当前路径的末端点和指定的(x, y)坐标来绘制一条直线。 - ctx.rect()：
(x, y, width, height)，创建一个矩形路径。 - ctx.arc()：
(x, y, radius, startAngle, endAngle, anticlockwise?)，绘制一段圆弧或圆的方法。0表示3点钟方向。 - ctx.ellipsis()：
(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise?)，添加一个椭圆路径。 - ctx.bezierCurveTo()：
(cp1x, cp1y, cp2x, cp2y, x, y)，添加一个 3 次贝赛尔曲线路径。起始点是当前路径的最后一个点，绘制贝赛尔曲线前，可以通过调用moveTo()进行修改。
绘制矩形
- ctx.fillRect()：
(x, y, width, height)，绘制填充矩形。 - ctx.strokeRect()：
(x, y, width, height)，绘制一个描边矩形。 - ctx.clearRect()：
(x, y, width, height)， 清除指定矩形区域，让清除部分完全透明。
绘制文本
- ctx.font：
font-style? font-variant? font-weight? font-size line-height? font-family，默认：10px sans-serif，设置文本的字体样式。 - ctx.textAlign：
start | end | left | right | center，默认：start，文本对齐选项。 - ctx.textBaseline：
top | hanging | middle | alphabetic | ideographic | bottom，默认：alphabetic，基线对齐选项。 - ctx.fillText()：
(text, x, y, maxWidth?)，绘制填充文本。 - ctx.strokeText()：
(text, x, y, maxWidth?)，绘制描边文本。
绘制图片
- ctx.drawImage()：
(image, x, y)，版本 1： 绘制图像到画布（不缩放、不裁剪） - ctx.drawImage()：
(image, x, y, width, height)，版本 2： 绘制图像并缩放。 - ctx.drawImage()：
(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)，版本 3： 从图像中裁剪出指定的区域，并将其绘制到画布。
形变
- 保存和恢复绘画状态
- ctx.save()：
()，将当前的绘图状态保存到状态栈中。 - ctx.restore()：
()，从状态栈中恢复canvas的当前绘画状态。 - ctx.translate()：
(x, y)，平移整个画布上的所有内容。 - ctx.rotate()：
(angle)，用于旋转绘图上下文的坐标系。所有后续绘制的内容都将基于旋转后的坐标系进行。 - ctx.scale()：
(x, y)，用于缩放绘图上下文的整个坐标系。用来增减图形在canvas中的像素数目。会影响到所有后续绘制的图形。
动画
- setInterval()：
(callback, interval?, arg1?, arg2?, ...)，按照指定的时间间隔重复执行一个函数，直到被清除或页面关闭。 - setTimeout()：
(callback, delay, arg1, arg2, ...)，在指定的延迟时间后执行一个函数，只执行一次。 - requestAnimationFrame()：
(callback)，一种浏览器提供的机制，用于在浏览器的下一次重绘之前执行一个函数，它被广泛应用于动画的实现。
SVG
基本元素
- <svg>：
width? height? xmlns? viewBox? preserveAspectRatio?，用于定义SVG的 HTML 元素。允许你在网页中嵌入和显示矢量图形内容，支持各种形状、路径、文字和渐变等图形元素。可以随浏览器的大小而缩放。 - <?xml ?>：
version encoding? standalone?，XML声明。
DOM2
- createElementNS()：
(ns，elname)，在指定命名空间下创建 HTML 或 SVG 元素的方法。常用于创建 SVG、MathML 或其他 XML 形式的元素。 - setAttributeNS()：
(ns，attrname，value)，给 SVG 元素添加属性。 - getAttributeNS()：
(ns，attrname)，获取 SVG 元素上的属性。 - hasAttributeNS()：
(ns, attrname)，判断 SVG 元素上是否存在某个属性。 - removeAttributeNS()：
(ns，attrname)，删除 SVG 元素上的某个属性。
属性
- fill?：
Color，设置对象填充颜色。支持颜色名、十六进制、rgb、 rgba、currentColor(继承自身或父亲字体color) - fill-opacity?：
number，用来控制填充色的不透明，值为0~1。 - stroke?：
Color，指定元素边框填充颜色。 - stroke-opacity?：
number，控制元素边框填充颜色的透明度。 - stroke-width?：
number，指定边框的宽度。注意： 边框是以路径为中心线绘制的。 - stroke-linecap?：
butt | square | round，默认：butt，控制边框端点的样式。 - stroke-linejoin?：
miter | round | bevel，默认：miter，控制两条线段连接处样式。 - stroke-dasharray?：
number [,number, ...]，将虚线类型应用在边框上。值必须是用逗号分割的数字组成的数列，空格会被忽略。如3, 5，第一个表示填色区域长度为 3，第二个表示非填色区域长度为 5。 - stroke-dashoffset?：
number，指定在 dasharray 模式下路径的偏移量。值可以是正值或负值。正值向左移动，负值向右移动。 - transform：
translate() rotate() scale()，用于对元素进行变换的属性。可以平移、旋转、缩放。- translate()：
(x,y?)：在二维平面上平移元素。平移后会改变坐标系统。 - rotate()：
(angle, cx?, cy?)：在二维平面上旋转元素。旋转后会改变坐标系统。 - scale()：
(x,y?)：在二维平面上缩放元素。缩放后会改变坐标系统。
- translate()：
绘制图形
- <rect>：
x? y? width height rx? ry? fill? stroke?，绘制矩形。 - <circle>：
cx cy r fill? stroke?，绘制圆形。 - <ellipse>：
cx cy rx ry fill? stroke?，绘制椭圆。 - <line>：
x1 y1 x2 y2 stroke stroke-width?，绘制直线。 - <polyline>：
points，绘制折线。 - <polygon>：
points，绘制多边形。 - <path>：
d，绘制路径。 - <image>：
href x? y? width? height?，绘制图片。 - <text>：
x y dx? dy? text-anchor? dominant-baseline?，绘制文本。 - <tspan>：
x y dx? dy? text-anchor? alignment-baseline?，必须是<text>或<tspan>的子元素，用于对文本进行分段处理。
组合
- <g>：
transform? fill? stroke? stroke-width? opacity? visibility? style?，用于将多个 SVG 元素组合在一起，作为一个单一的组进行处理。以便在同一位置进行变换（如平移、旋转、缩放）或者应用相同的样式或属性。
复用元素
- <defs>：
，用于定义图形对象的可重用模板，它本身不会直接渲染任何内容，而是作为一种容器。其他元素可以通过use、fill、stroke等属性引用这些定义。 - <use>：
href x? y? width? height?，用于在 SVG 中引用和复用已定义的图形、路径、渐变、符号等元素。 - <symbol>：
id viewBox? x? y? width? height?，用于定义可复用元素，和<defs>类似。可以通过<use>元素引用显示。 - <linearGradient>：
id x1? y1? x2? y2? gradientUnits? gradientTransform?，用于在指定的方向上创建一个线性渐变。 - <radialGradient>：
id cx? cy? r? fx? fy? gradientUnits? gradientTransform?，创建由中心向外辐射的径向渐变。 - <stop>：
offset stop-color stop-opacity，用于定义渐变的具体停顿点，多个<stop>元素共同定义了一个渐变的颜色过渡。 - <filter>：
id x? y? width? height?，用于应用图像滤镜效果的容器。如模糊、阴影、色彩调整等。 - <feGaussianBlur>：
in? stdDeviation result? edgeMode?，应用高斯模糊的滤镜元素。 - <feOffset>：
in? dx dy result，用于对图形的像素进行平移，常与其他滤镜元素(<feGaussianBlur>、<feComposite>等)配合使用，生成阴影或其他图形效果。
动画
- 描边动画
- el.getTotalLength()：
()，计算路径元素总长度（以用户单位为单位）的浮点数。 - SMIL动画
- <set>：
attributeName to begin? dur? attributeType?，用于在给定的时间内动态地更改元素的属性值。是最简单的SVG动画元素。 - <animate>：
attributeName from? to? values? begin? dur? fill? repeatCount?，用于对一个或多个 SVG 图形元素的属性值进行动画过渡。 - <animateTransform>：
attributeName from? to values? begin? dur fill? repeatCount?，指定目标元素的形变。 - <animateMotion>：
path rotate，定义一个元素沿指定的路径进行运动。
ECharts
echarts
- echarts.init()：
(dom,theme,opt)，创建echarts实例。 - echarts.registerMap()：
(mapName, opt)，注册可用的地图，只在 geo 组件或者 map 图表类型中使用。 - echarts.getMap()：
(mapName)，获取已注册地图。
echartsInstance
- echartsInstance.setOption()：
(option)，设置图表实例的配置项以及数据，万能接口。 - echartsInstance.getWidth()：
()，获取 ECharts 实例容器的宽度。 - echartsInstance.getHeight()：
()，获取 ECharts 实例容器的高度。 - echartsInstance.resize()：
({width?,height?,silent?,animation?})，改变图表尺寸，在容器大小发生改变时需要手动调用。 - echartsInstance.showLoading()：
(type?,opt?)，显示加载动画效果。 - echartsInstance.hideLoading()：
()，隐藏加载动画效果。 - echartsInstance.dispatchAction()：
(payload)，触发图表行为，如图例开关、显示提示框等。 - echartsInstance.dispose()：
()，销毁实例，销毁后实例无法再被使用。 - echartsInstance.on()：
(eventName,query?,handler,context?)，添加事件处理函数。
option
- backgroundColor：
Color，设置直角坐标系内绘图区。 - grid?：
{show?,left?,containLabel?,backgroundColor?,...}，直角坐标系内绘图区域。 - xAxis：
{show?,name?,type?,data,axisLine?,axisTick?,axisLabel?,splitLine?,...}，直角坐标系grid中的x轴。 - yAxis：
{show?,name?,type?,data,axisLine?,axisTick?,axisLabel?,splitLine?,...}，直角坐标系grid中的y轴。 - title?：
{text,show?,top?,left?,...}，图表的标题。 - legend?：
{show?,itemWidth?,icon?,formatter?,textStyle?,itemGap?,...}，图例，展现了不同系列的标记、颜色。图例文字来自于data.name - tooltip?：
{show?,trigger?,axisPointer?,formatter?,,...}，提示框。 - toolbox?：
{}，工具栏，提供操作图表的工具。 - visualMap?：
{type?,left?,,seriesIndex,inRange,...}，视觉映射，可以将数据值映射到图形的形状、大小、颜色等。 - geo?：
{map,roam?,label?,aspectScale?,itemStyle?,emphasis?,...}，地理坐标系组件，用于地图的绘制，支持在地理坐标系上绘制散点图、线集。 - series：
[{type,data,name?,label?,itemStyle?,emphasis?,coordinateSystem?,...}]，系列，配置系列图表的类型和图形信息数据。
color
- color：
{type,x,y,x2,y2,colorStops}，线性渐变。 - color：
{type,x,y,r,colorStops}，径向渐变。 - color：
{image,repeat}，纹理填充。
大屏适配
countup
- new CountUp：
(target, endVal, options?)，用于创建平滑数字计数动画的实例。 - countUpInstance.start()：
()，用于启动计数动画，让数字从起始值平滑地增长到目标值。 - countUpInstance.pauseResume()：
()，用于控制计数动画暂停和恢复的方法。 - countUpInstance.reset()：
()，用于重置计数器到初始值，并停止当前的计数动画。 - countUpInstance.update()：
(newValue)，用于更新已经启动的计数器的目标值并重新开始动画。