撇开列表/进度条/环形图这种比较一般的图表不看，
整个项目的主要难点就在于散点图、散点图和它之后与圆环图的交互，这也是它的主要亮点。
拿到设计图之后，首先注意到几个难点：
都是我用的比较熟的：
因为这个项目对实时性要求并不高，因此采用客户端向服务端定时请求的模式，
但是有一点就是当数据请求不来时（可能是后台服务500，或者返回空数据），这里就有三种处理方式：
可视化图表开发过程中的数据请求问题
可视化图表开发的两个重点就是数据和图表，
在开发过程中一般我都会模拟一些图表绘制的数据，并把图绘制出来，
但是接口一旦对接之后就会出现各种各样奇怪的问题。
可视化图表的数据处理真的非常重要！非常重要！非常重要！
数据处理的几个可能出现的问题如下：
图表开发的数据源
开发依赖数据进行展示的可视化项目，页面的展示依赖数据驱动。
图表的开发比较特殊，比如ECharts，在使用vite提供的开发环境下，修改代码触发的热更新无法驱动页面ECharts图表的重绘，
所以就需要每次都手动刷新页面查看修改后的效果，更致命的是，越到后期，图表的微调就有可能越复杂，这时如果图表的数据源已经使用接口数据了，就需要等待接口数据到来（数据量少还好，数据量多简直是折磨）
这个时候一般都会搭建一个临时的服务器，模拟后台接口，返回固定数据
总体来看，如果我对D3的熟悉程度允许的话，应该会选择D3。但是目前来看ECharts绘制出来的效果也还可以（就是中间有点小差错）
图表的选择
当我说图表的选择时，实际上一般需要考虑的，是这个图表要实现的交互的上限是什么。
因此首先就要先熟悉各个图表库的交互的特点，这个并不简单，但是我这里可以简化思维：
如果产品经理和设计根本没设计交互，用ECharts，因为ECharts的交互和动画效果最为主流接受
如果设计了交互，但是交互都比较保守，用ECharts，理由还是一样
如果设计的交互非常新颖，ECharts已经满足不了，用自由度最高的，D3
当然还有HighChart、AntV等等其它的选择，但有的时候真的不想考虑太多，顺手就行。
但是这次的设计有一个点，用ECharts还是没有办法实现的，就是半透明颜色之间交叠时出现的加深效果：
可以看到设计图中，颜色交叠处有种ps中正片叠底/加深图层的感觉，
但是实际的图表绘制中，颜色的交叠部分是上层的颜色覆盖下层的颜色，
ECharts实际是提供混合模式配置项的，也就是blendMode
但非常坑爹的是，blendMode只支持2个值：
并且只有在渲染器renderer为canvas类型时，blendMode才生效
因为这里我用的是svg，所以大概率是没戏了。
但是还有一种方案：
绘制两层图层，
一层用canvas绘制，用于颜色控制，
一层用svg绘制，用于交互配置，
不过太麻烦了，查看echarts-liquid库源码，github上已经很久没有更新过了，
这里的label和text的颜色有一个反相效果（svg渲染中），
实际上是两个文字叠在一起，一层作为底层，一层作为上层，上层文字被水波图形给剪掉了
但是能看到，因为clip-path指定的仅仅是对应series中的水波path，
这里也能看出canvas和svg处理图像的不同，
svg没有颜色缓冲区的概念，更强调元素之间的绑定关系
canvas会把画布上的颜色作为缓冲区进行维护，后加的颜色会在之前计算的颜色的基础上进行混合
用来处理不熟悉的svg动画也很方便
可视化大屏相对一般项目有几点需要注意的：
用rem！用rem！用rem！
rem依赖根节点的font-size进行尺寸判断，
因此仅需要在首次进入页面和之后resize时动态修改根节点的font-size进行重新计算：
//此处最大适配宽度3840，最小适配宽度1024exportfunctionresize(){returnnewPromise((resolve,reject)=>{letrootWidth=document.documentElement.clientWidth||document.body.clientWidthletrootDom=document.querySelector('html')letk=16/1920letb=16-1920*krootDom.style.fontSize=(k*rootWidth+b)+'px'})}window.addEventListener('resize',resize)我用的是Vue框架，组件的mount一定要在resize之后进行，
否则一些echarts表格开始绘制时，正确的rem大小还没有被计算出来：
resize().then(res=>{app.mount('#app')})另外，需要对网页能兼容的最大尺寸和最小尺寸进行配置：
.wrapper{background:#e9effa;width:100%;height:67.5rem;min-width:1024px;min-height:768px;max-width:3840px;max-height:1838px;display:flex;flex-direction:column;position:absolute;overflow-x:hidden;}将rem的动态范围也限制在这个范围之内，
和《CSS揭秘》这本书作者强调的一样，样式编写需要DRY（Don'tRepeatYourself）
能用动态单位（em、rem、vh、vw）就用动态单位，
灵活使用css变量、函数、响应式布局
如果你只有通过修改大量css代码才能实现页面适配，
那就要反思一下是不是你的页面实现存在问题。————《CSS揭秘》
基本思路
首先抛开花里胡哨的包装，单看它要实现什么：
也就是说一张图展示5个要素，
根据X轴、Y轴坐标进行映射，是散点图的特性，
根据水波高度判断进度，是水球图的特性，
根据工时对半径进行控制，是气泡图的特性，但是散点图也支持
三种方式
这里的思路就是把坐标系和上面的散点图从绘制层面完全分离，
不用ECharts提供的坐标系和数据的联动，
而是手动实现中间的一些联动，
也是考虑到这张图在坐标系上需要实现的联动效果不多，如果还要加上datazoom之类的坐标轴缩放、平移联动，可能会更加复杂
拿到一堆数据后，需要做如下操作：
functionconvertAxisToPixel(data){returndata.map(node=>{node.center=chart.convertToPixel({xAxisIndex:0,yAxisIndex:0},[node.taskNum,node.peopleNum])returnnode})}最终就能将水球映射到页面中了，但是这种方法也有弊病：
这里没有使用echarts自带的坐标系，手动实现坐标系的自适应，并非最初想的这么容易。
由于球体和坐标系不在一张画布上，
所以要知道球体是否出界，就必须知道画布的包围盒和坐标单位
以计算右边缘坐标为例，基本的实现思路就是：
初始化坐标轴右边缘为0
开始遍历每个点
计算点的右边缘
如果点的右边缘超过当前坐标轴右边缘
需要向坐标轴右侧添加单位（注意，在添加单位的同时，整体坐标单元也会缩小）
计算出添加的单位数量
右边缘加上添加数量，重新计算坐标单位
遍历结束，计算完毕
这个图表的设计就是个例子，这种图用于展示那些在x轴、y轴上分散比较均匀，并且彼此很难重叠的数据较好，
但是这里设计的是参与人数和任务数量，
企业的项目一般都趋于同质化，大多数项目的参与人数和任务数量都差不多，所以最终真实数据填入后，一定会映射出非常密集的效果。
但这是设计层面的问题，那么如何在知道点可能会变得很密集的情况下，
从矢量层面也好，从视觉层面也好，将图表的效果优化呢？
好在产品经理提出一张图最多只绘制20个球（后面改成了15个），有了数量控制，就能提供一种均匀模式，
之前之所以不均匀的原因就在于x轴、y轴都选用的是数据连续类型，数据是在0-max之间连贯映射的，
因此还可能出现噪点数据，破坏整个映射的效果，
均匀模式就是将x轴、y轴设置为离散类型，仅仅是按照从小到大的顺序排序，
下面是连续模式和离散模式之间的对比：
这里水球的半径需要能够反映权重的大小，
最初的做法是将最大半径和最小半径分别设置为高度的50%和10%，
将水球的权重（0-1）线性映射到这个范围之中：
letminRadius=10,maxRadius=50//node.effect为权重letradius=node.effect*(maxRadius-minRadius)+minRadius//线性映射结果结果很快发现有问题：
如果数据也是线性分布的，那效果还好，但抛去这个几乎不会出现的线性分布，其他时候效果都是很灾难的
因此也就是使用幂函数的方式进行映射处理
如何计算数据的离散程度
如何判断一组数据离散程度的高低？
这里使用的是标准差方法：
letvariance=data.reduce((a,b)=>{returna+Math.pow(b-ave,2)},0)/data.length//方差letstandard_var=Math.sqrt(variance)//标准差leteffect=standard_var/aveletSDR=effect>0.25//true表示数据相差大，false表示数据相差小console.log(`标准差：${standard_var}，标准差大于指定值：${SDR}，数据偏向：${dir}`)最终的映射效果要好一些：
如果相邻两个元素的颜色能区分开，那是最好不过的了，（本项目中，最终终于把颜色从图例的意义中分离出来，用于区分相邻2个元素的颜色了）
存在问题
这张图绘制到现在都还算比较顺利，
问题就出在这里了，因为我现在想要选中水球，但是我们此刻希望把它当做一个整体进行选中，这也是遵从散点图的symbol选中特性的一种交互，
但是水球图的弊病现在暴露出来了：它的选中机制在水波上，没有提供整体选中的配置项（WTF）
不仅如此，就连用echarts.on绑定的任何鼠标事件，竟然也只能由水波触发，那这用户肯定不能接受。
解决方法
奇怪的是，虽然我鼠标移入球体（没到水波部分）时，虽然鼠标事件没有被触发，但是鼠标的pointer样式却改变了，
因此一定是有某种判断鼠标移入的方式的，在zrender/lib/Handler.js中，找到了对鼠标pointer进行修改的代码：
于是我就想手动实现一个同样的包围盒判断，
但是这个时候，canvas绘图的弊病就出来了，就是较低的dom交互自由度，
我的所有水球都是绘制在一张canvas上的，这就意味着我需要获取到每个形状的元信息，经过非常复杂的判断才能知道我鼠标点击的是什么！
还好EChats还提供了svg绘制的选项，用svg实现dom交互就简单多了：
echarts.init(chartDom,'',{renderer:'svg'})我是可以获取到自己点击的元素了，但是怎么知道点击的是哪一个水球呢？
打开chrome控制台查看dom树，能发现echarts使用svg绘制多个series的一个规律：
它会把所有series绘制在一个svg内部的一个g中，并且按照z顺序进行从上到下的绘制，
也就是说，如果它绘制一个水球需要16个标签，总绘制20个水球图，那么g中就会有16*20=320个标签
事实上，这里绘制标签的数量不一定是16，期间可能有涉及到富文本的标签（多个text标签），为实现阴影效果的标签，等等，
但重点是绘制每个水球的标签数量都是固定的，且顺序不变，这就好像WebGL绘图中常用的ArrayBuffer一样，用索引进行区分。
所以这里只需要根据绘制每个水球的标签数n，和鼠标移入标签在父元素g中的顺序，就能获知点击的是第一个水球：
所以应该把这两个元素的鼠标事件禁掉（pointer-events:none），好在这两个效果都是用g标签实现的，和其它元素很好区分：
//对svg事件进行处理波浪和阴影不可点击functionsvgEventHandle(svg){constallG=svg.querySelector('g').querySelectorAll('g')allG.forEach(g=>g.style.pointerEvents='none')}最后还有一个问题，echarts使用path绘制圆球，但是path最终的dom监听区域是一个方形，将这个圆球包围住，
所以需要根据path的包围盒手动判断鼠标是否移入的是包围盒内的圆球区域，仅有移入圆球区域时才判断当前水球被选中：
liquid+pie
乍一看这个图，似乎很像旭日图，因为中心球四周的弧度辐射出去的半径长短不一，
但是旭日的半径延长出去是有层级关系的意义的，这里则不是，
因此这里采用的是弧度饼图的方式，
即有几个圆弧，就要在option.series中塞入几个元素，
然后计算出每个圆弧的初始角度和结束角度。
这里还有一个需要注意的是每一段圆环的渐变色，
ECharts是提供渐变色的，在线性渐变中，设置渐变色的2端只能通过指定绘制元素上的一条方向向量的方式进行绘制
就算是这里用的饼图也是一样，设置radial渐变也是以每个弧段以自己的中心做radial渐变
所以这里每个弧段渐变色的方向向量都需要手动计算：
所以这里的label字体大小也需要动态计算
点击水球后，水球从图上位置浮现出一个一模一样的替身，然后迁移到画布[30%,50%]的位置。
如何实现这个效果？
实际上就是计算被点击点和目标点位之间的dx、dy，然后对辐射图的画布进行平移。
使用gsap进行csstransform插值，
包围盒参与计算的注意事项
这里计算实际的偏移量，使用到了包围盒，即被点击球体的包围盒。
目标点位是[30%,50%]，它的px坐标也比较好计算：
//获取画布饼图展示的中心点[30%,50%]functiongetCanvasPieCenter(){consttarget=document.getElementById(props.domId)constboundBox=target.getBoundingClientRect()constgrid=props.gridletcanvasWidth=boundBox.width-grid.left-grid.right//画布宽度letcanvasHeight=boundBox.height-grid.top-grid.bottom//画布高度canvasSize=[canvasWidth,canvasHeight]lethalfWidth=canvasWidth*0.3,halfHeight=canvasHeight*0.5//一半的宽高center[0]=halfWidth+boundBox.left+grid.leftcenter[1]=halfHeight+boundBox.top+grid.top+window.scrollY}这里得出的是目标点相对整个page（包括所有可滚动区域）的坐标，
但是包围盒是相对view视口的，所以在页面有滚动时，一定要将scrollTop的值考虑在内，下面是包围盒中心点以及偏移距离的计算：
之所以选择它，也是考虑到它提供的下面几个功能：
vis-timeline不像echarts，它是基于dom的，所以css配置项全都丢给用户自己通过className进行配置，
这一点让vis-timeline的样式自由度变得非常高，
vis-timeline本身应该是支持用html定制其中的内容的，
但是无奈这一点是我开发一半之后才在文档的犄角旮旯里找到的（vis-timeline的文档精简到一页就没了）
所以我使用的方法就是简单粗暴的dom操作。
这要从vis-timeline的一个钩子函数说起——onInitialDrawComplete
找到对应的dom，然后手动给里面加东西，
vis-timeline此时的作用就像是提供一个模具，至于里面是什么，我自己添加。
letoptions={onInitialDrawComplete:()=>{//绘制结束的回调setProgressStyle()//自定义进度图样式setHeadStyle()//自定义表头样式addEvent()//添加事件loading.value=false},//...}timeline=newvis.Timeline(targetDom,itemData,groupData,options)懒加载带的问题vis-timeline中，视口范围内的概念非常重要，
同时视口范围还规定了需要处理的数据有哪些。
也就是懒加载，能够减少渲染时需要处理的数据数量。
但是这也是比较坑爹的，这就说明一旦我规范了视口的大小，在图表实例化结束后，只有视口内的dom会被渲染出来，
那么我就必须要在鼠标拖动或缩放到其它范围时，对dom进行重新填充操作，
也就是配合vis-timeline的懒加载进行dom操作（噩梦）。
但是这里水平和垂直的懒加载策略也不同：
针对这两点，采取如下策略：
尽管最终实现了产品想要的效果，但是从代码层面上的可复用性不高
功能描述：列表栏无限滚动，鼠标移入后停止滚动，鼠标移出继续滚动
实现方式：
鼠标控制动画看似没有什么问题，但是这里问题就来了：
当用户鼠标移入滚动dom时，dom的scrollTop被改动了，
此时鼠标移出，tween如果接着之前的位置向下滚动，肯定是不行的
必须得接着用户滚动到的位置继续滚动
所以在动画暂停滚轮自定义滚动之后，需要重新创建一个tween，
它的目标值不变，依旧是容器的scrollHeight-scrollTop，
然后再这个半截动画结束之后，将容器scrollTop置顶，重新发起循环的完整滚动动画：
这里的效果都是用css的filter实现的，
父容器的contract和子容器的blur结合，能实现液体融合的效果，非常有趣，
另外，用毛玻璃对彩色背景进行遮罩也能实现比较高级的效果。
上面记录了很多问题的解决方案，但大体看来，
（写水球散点图的代码比echarts-liquid这个库的代码还要多，还不如研究研究echarts的custom类）
最重要的还是把svg、canvas、dom、数学这些基础知识平时夯基础。