接着奏乐接着舞的博客

渐变堆叠柱状图组件摘要 该组件实现了一个可视化危险级别数据的渐变堆叠柱状图。主要功能包括：使用不同渐变色（红/橙/蓝）区分高、中、低三种危险级别；支持数据悬停显示总数及各分级数据；自动响应窗口大小变化。组件通过三个堆叠的bar系列实现数据分层展示，采用LinearGradient创建色彩渐变效果，并通过深度监听确保数据更新时图表同步刷新。开发者只需传入包含三个级别数据的warningData对象和x轴标签的warningSevenItem数组即可使用，还可自定义色彩、显示顺序和圆角样式。

在这篇文章中，我们展示了如何使用 Three.js 的为 3D 场景中的对象添加 2D 标签，并实现点击显示或隐藏详细信息的交互效果。这个功能可以应用于各种 3D 数据可视化场景中，为用户提供直观的交互体验。ps:最近的项目使用three.js的地方很多，且拓展了很多功能，我会将一个个的功能点拆分出来。因为之前查找相关博客发现很多都是整个一起的，对于只想要其中一部分而言会增加很多不必要的时间成本，所以我会将功能点拆解出来。想了解更多关于three.js的文章可以看我的three专栏。

动态渲染：根据传入的数据，组件可以自动生成节点和箭头。风险等级样式：不同的节点根据风险等级（1-3）呈现不同的视觉效果。炫酷的动画效果：节点和箭头自带动画效果，适合用于大屏可视化项目。灵活的数据传递：通过组件的props传递数据，支持动态更新。接下来，我将带你一步步实现这个组件，并展示如何在项目中使用。通过将这个流程线组件封装成一个独立的 Vue 3 组件，你可以在不同项目中轻松复用它，并根据需求动态更新显示的数据。组件不仅支持动态渲染，还具备动画效果和风险等级区分，特别适合用于大屏数据可视化展示。

在Vue 3中，Hooks函数不是Vue官方专门定义的一个API，而是社区中根据React Hooks的概念借鉴而来的一种编程模式。简单来说，Hooks函数是一种利用Vue 3的Composition API来封装和复用逻辑的方法。

以下代码可以复制粘贴，在任何浏览器均可运行。

前言前言显示当前时间对于一些后台类的项目使用比较频繁，本文将此功能封装起来以便复用。分别是当前时间和当前时间+星期，可以根据需求直接复制粘贴。另外，本文还提供了两种比较酷炫的文字展示效果，分别是文字发光和文字流光效果，以提高用户体验。我用的vue封装的，但是对于react或其他框架同样适用，只需稍作修改即可使用。1.显示实时时间无星期版。

基于vue2的炫酷进度条动画插件。

暂时就想到这些，three.js的使用不想正经写代码，他是有着固定的结构，只需修修改改即可。由于文件大小限制，仅能展示少部分特效，本文中共7中变换，如球体，立方体，管道，波浪，反重力，重力等效果。网上找到three.js源码，放到public目录下，在index.html中引入。项目需求是基于数据库分析出来的离散相关性的散点图，主要是为了追求良好的展示效果。使用了three.js编写的。至此，完成，如果需要three.js源码的可以留言邮箱。将文章末尾的实现以上功能的源码放入项目中（任意位置）

需求是将项目中的一些图标或数据以PDF的格式下载下来，并且要求样式好看，且格式按照需求调整。

以下的代码基于echarts+vue2,我使用的echarts版本是5.3，但是实测更低或更高均可使用。以下组件均已封装。

【代码】【组件封装】vue打字机效果和文字发光。

有时在开发中用过的一些比较好的功能没有及时封装，导致日后再用的时候还得再来一遍，现在是想将这些功能封装成组件，做到“”拿来即用“”，为了更好地照顾到版本兼容，我直接将资源下载到本地作为静态资源使用，这个组件基于vue2,如果你是个新手不会将之转为vue3或者react等框架，可以留言，我看到后会更新，这里默认大家具有一定经验。这个组件的好处：相比于直接使用D3或者echarts，他的优点在于有大量已经内置的功能，且可以通过修改源码方式轻松定制，而不必从0开始写。

由于在平时开发中，经常或不经常的用到一些功能或插件或函数，回头找起来还挺麻烦，我的想法是我直接将他们全部的封装成一个个的组件，做到“”拿来即用“”且该组件必须经过测试确实可用才行，于是我新创建了一个vue项目，基于"vue": "^2.6.14"，用它来测试组件是否正常，因为我vue2/3 ,react hooks 之类的都在用，这里就以vue2作为基础了，后续我的想法是多做几个版本。