写Vue有很长一段时间了，除了常规的业务开发之外，也应该思考和反思一下封装组件的正确方式。以弹窗组件为例，一种实现是在需要模板中引入需要弹窗展示的组件，然后通过一个flag变量来控制弹窗的组件，在业务代码里面会充斥着冗余的弹窗组件逻辑，十分不优雅。 本文整理了开发Vue组件的一…

源代码 需要效果如下(无防抖版效果) 思路 1、把这三个图表抽离出一个公共组件 2、在组件内进行监听窗口 window.addEventListener('resize', fn) 3、最后组件直接响

//echarts自适应，多个echarts图下window.onresize，只有一个图表自适应生效，给每个事件监听方法加个定时器。 const self = this； setTimeout(()

在PC端开发含图表展示的页面时，需要考虑用户调整浏览器窗口大小后图表能够根据窗口大小自适应变化。 然而上述代码却存在内存泄漏的风险：组件被注销时，缩放函数是匿名函数，且仍然在事件监听列表中，因此匿名函数和匿名函数中用到的外部变量在组件注销后均不会被清理。改进方案如下： 上述代码…

echarts根据窗口分辨率的变化自适应伸展压缩，可是适应不同分辨率，适合栅格化系统，灵活多变，适配性好。

ECharts 兼容性好，基于HTML5，有着良好的动画渲染效果。 ECharts 支持常规的鼠标事件类型，包括 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout' 事件。

需求：当鼠标移上线图时，饼图的数据是鼠标移上线图的当前显示数据。 数据拿到了，该去用这些数据了，注意: 注释部分是解决formatter函数调用多次的问题。 做一个500毫秒的时间差来解决多次触发初始化饼图动作。

Echarts 图标样式个性化设置，如饼图空白间距，图例自定义，图例显示百分比，提示框自定义，百分比和标签同时存在等等，解决折磨人的细节样式问题。

那前端数据可视化又是什么呢？前端数据可视化其实就是利用前端表现层的手段，以前端手段展示、处理和分析数据。前端因为H5的到来，使前端有了质的飞跃，也使前端数据可视化的飞速发展得到了契机。H5提供的canvas就是这一契机。它是前端利用JS制作在做前端数据可视化的利器，几乎全部前端…