VUE组件——FlameGraph火焰图

最新推荐文章于 2024-06-27 17:15:42 发布

weixin_30364147

最新推荐文章于 2024-06-27 17:15:42 发布

阅读量1k

点赞数

文章标签： javascript ui json ViewUI

原文链接：http://www.cnblogs.com/yiyitong/p/8182416.html

版权

本文介绍如何在Vue框架中实现函数调用链的火焰图，探讨SVG多组件、单组件渲染和Canvas三种实现方式，以及各自的性能和适用场景。火焰图用于展示复杂函数调用链，数据量大时，Canvas方案性能最佳但事件处理复杂。

摘要由CSDN通过智能技术生成

先贴个图

火焰图的应用场景

用于显示复杂的函数调用链，特点在于：数据量较大。

详细介绍可以参考阮大师的博客：http://www.ruanyifeng.com/blog/2017/09/flame-graph.html

本文主要在vue框架的基础上实现函数调用链火焰图，其它框架的实现方式类似，由于应用场景中的数据量较大，使用了三种方式来实现并测试该功能。

数据源格式：

函数调用链实质就是一棵树，最下层节点是根；上层节点的位置及宽度依赖于下层节点。

{
    
  id： {
    
    id: 'id_*', //使用字符串id，避免json.parse自动排序
    name: 函数名,
    percentage: 百分比,
    parentId: 父节点id,
    prevId: 兄弟节点id,
    level: 层级,
  }
}

计算方式：

根节点的宽度默认为100%宽度；

子节点宽度=调用百分比*父节点宽度；

位置信息x 从父节点的x开始，若前面有兄弟节点prev，则x = prev.x + prev.width；

位置信息y 从最底端开始，y = level * 16（每层火焰高度为15，间隔1像素）。

方法一：SVG多组件渲染方式

将一个节点作为一个组件实现

<svg width="100%" :height="height">
   <g v-show="!loading" id="graphContainer">
      <call-item v-for="item in items" :item="item" :key = "item.id" @mouseover="displayItem(item)" @mouseout="display=''" 
        :parent="items['id_' + it