juliotang的博客

之前做了一个h5项目，核心功能是上传图片，进行裁剪后与其他页面部分合成到一个图片作为海报进行保存。实际做出来的功能如下所示，这里我是用pc浏览器的移动端页面模拟进行录制的，实际上在手机上的效果会更好一点：这个需求的要点主要在以下几点：图片上传后的裁剪，这个需要找到合适的第三方工具，并且支持移动端裁剪完的图片，会作为页面一个img标签进行显示，但还要与其他部分合成为新的图片，这个要借助第三方合成工具图片支持添加文字描述，合成到最后的海报中，同时合成包含若干个区域，需要合理的进行布局以裁剪到正确的部

前段时间实现了个h5移动端项目，需求中需要启动后自动播放音乐，并且多个页面中都有切换播放/停止的功能，功能界面大概如下图：采用的是vue，框架方面比较简单明了，播放的mp3资源直接在App.vue中引用，isPlayMusic属性记录好传递给每一个子组件页面，同时向子组件暴露播放方法playMusic和暂停方法pauseMusic即可。<div id="app"> <audio class="myaudio" src="./static/music.mp3" loop="loop

echart是流行的可视化工具，应用echart可以画出很多想象不到的炫目canvas效果。笔者作为前端工程师长期从事大数据可视化项目，对echart也有深度应用。再此前文章中也多次讨论过echart的各种应用场景，本文将针对echart当中的tooltip文字做全面的表述。echart中的tooltip是在canvas上的悬停效果的设置，位置在option下的一个属性：let option = {... tooltip: { ... }...}其中的基本样式和字体、背景等可以参考官网

最近接到一个需求，要做一个数据面板，展示可视化数据，具体的布局大概是如下这样的面板有8个模块，展示不同的可视化内容，布局横向平分，纵向，1、2、5、6高度为1x，3、4、7、8为2x，同时，这8个模块带有权限控制，用户会给分配1-8数量不等的权限。与需求方交流后大概了解到需求方的意图，同时给了以下几种可能出现的布局，以此类推。可以看出，并不是一个非常常规的按序布局，大概含义是如果后面有可以插空到前面的，需要进行插空布局。首先拿到需求，我们先看一下主要要处理的东西，我们能拿到的直观的是用户有权限的模

echart可视化的功能封装前面部分论述了可视化初始化与刷新，主要关注的是父组件如何与子组件通信确定可视化时机。本节描述子组件中具体可视化的步骤：1. 接父组件条件进行基础可视化option设置2. 请求后端数据封装可视化数据对象3. 根据局部条件将数据对象绑定到option4. 实际画图这里的option指的是echart里面的js对象，用过的都很熟悉了。下面将根据我们上一节所说的那个可视化例子来详述我们如何体现出这四步到方法级别，并且如何根据实际场景灵活运用的。以下是上节中的可视化案例：

echart可视化时机前面部分论述了可视化的组件细化，既然我们已经将它细化了，那么接下来讨论父组件将何时触发echart子组件的初始化和刷新。通过生命周期进行可视化更新？显而易见的一种方式是通过mounted()，created()等组件生命周期的方式。这种方式当然对于特别简单的场景是可以的，但是在实际可视化项目中，通常我们需要根据不同的请求条件直接对可视化进行刷新，比切换了日期条件、查看不同数据指标等，每次都销毁和重建组件是不实际的通过props变化进行可视化更新？vue组件通信的重要手段之一是

echart在前端数据可视化中有丰富的使用方式，但是其也有一般通用的实践方式。经过多个项目，现将个人echart使用的经验总结如下：尽量将每一个echart可视化单独拆分为一个组件从代码习惯上来说，将不同的echart可视化拆分为组件是一个良好习惯。下面是一个例子，我们有频道偏好和内容产地偏好两个页面模块，其中频道偏好中有一个可视化区域，内容产地偏好有电视剧、电影、少儿、综艺四个区域在代码层面，通过下面组件结构实现频道偏好一个组件，内容产地偏好有1个父组件和4个子组件，父组件代码如下：将组

之前项目中运用echart热力图，在这里记录一下。项目中如何实践echartechart应用到项目起来很简单，大概分为以下几步：vue项目中下载echart：npm install echarts --save在组件中导入：import echarts from ‘echarts’给定一个有宽高的容器作为echart的画布如：<div class="echart-map">...

按照需求当拖拽一个标签至当前仅有一个标签的逻辑块时，需要出现’交集/并集’的选择框，如下所示：首先从前端页面角度来说，弹出层要能在适时进行弹出，定位准确，在鼠标拖拽的位置；等待点击’交集’或者’并集’按钮，当点击弹出层内部时，弹出层不消失，而当单机弹出层以外部分时，弹出层能够消失。从数据逻辑的角度来说，正常的拖拽是到终点位置附近弹起鼠标即完成数据更新，对于需要弹出逻辑条件的时候，则要阻断数据...

上文描述了拖拽标签的场景，本文详述标签移动过程中的定位，以及拖拽前后落位区域的情况。在鼠标点击->拖动->抬起的过程中，在不同时机均调用了isLocatedToWhere方法，该方法会返回目前被拖拽标签的位置。其基本原理是通过fallInDiv方法由外向内查找各个div容器，判断当前被移动元素的坐标中心点是否落入当前容器内。isLocatedToWhere最终返回一个代表位置的结构如...

在https://blog.csdn.net/juliotang/article/details/89386319一文中已描述，任何拖拽控件的行为都是mousedown->mousemove->mouseup的结合，在这个过程中，实际上是将对应元素设置为绝对定位在屏幕相应位置上移动，释放后，将元素归位。这个过程只是实现页面拖拽效果，而实际完成拖拽行为，将元素从一个位置移动到另一个位置...