feat:火焰图加detail 详情

src/views/latency/components/FlameGraph.vue

@@ -37,6 +37,9 @@ export default {
                 const end = api.coord([api.value(2), level]);
                 const height = ((api.size && api.size([0, 1])) || [0, 20])[1];
                 const width = end[0] - start[0];
+                const ProcessName = '进程名称'
+                const CollectionEquipment = '采集设备'
+                const CollectionName = `  ${api.value(6) == 'syscall' ? ProcessName+':'+api.value(5)|| '':(api.value(6) == 'network'?CollectionEquipment+':'+api.value(5)|| '' : '')}`
                 return {
                     type: 'rect',
                     transition: ['shape'],
@@ -60,7 +63,7 @@ export default {
                     },
                     textContent: {
                         style: {
-                            text: `${api.value(3)}`,
+                            text: `${api.value(3)}  耗时:${api.value(2)}ms${CollectionName}`,
                             fontFamily: 'Verdana',
                             fill: '#000',
                             width: width - 4,
@@ -112,11 +115,16 @@ export default {
                         },
                         tooltip: {
                             formatter: (params) => {
-                                const samples = (params.value[2] - params.value[1]).toFixed(2);
-                                return `${params.marker} ${params.value[3]
-                                    }: (${this.$echarts5.format.addCommas(
-                                        samples
-                                    )} samples, ${+params.value[4].toFixed(2)}%)`;
+                                const samples = params.value[2] - params.value[1];
+                                let res  = `${params.marker} ${
+                                    params.value[3]
+                                    }: ${this.$echarts5.format.addCommas(
+                                    samples
+                                    )}<br/>${params.marker} 比例：${+params.value[4].toFixed(2)}%<br/>`
+                                for (const key in params.data.detail) {
+                                    res+=`${params.marker} ${key}: ${params.data.detail[key] || '--'}<br/>`
+                                }
+                                return res;
                             }
                         },
                         title: [
@@ -148,6 +156,7 @@ export default {
                         series: [
                             {
                                 type: 'custom',
+                                // name: ['apm', 'syscall', 'network'],
                                 renderItem,
                                 encode: {
                                     x: [0, 1, 2],
@@ -155,7 +164,12 @@ export default {
                                 },
                                 data: this.recursionJson(chartResdata)
                             }
-                        ]
+                        ],
+                        // this.formatCategoryData(chartResdata)
+                        // legend: {
+                        //     show:true,
+                        //     data: ['apm', 'syscall', 'network']
+                        // }
                     };
                     this.chart.setOption(option);
                     this.chart.on('click', (params) => {
@@ -202,6 +216,9 @@ export default {
             const rootVal = filteredJson.duration;
             const recur = (item, start = 0, level = 0) => {
                 if(item){
+                    const ProcessName = '进程名称'
+                    const CollectionEquipment = '采集设备'
+                    const collectionName = `${item.span_category == 'syscall' ? item.detail[ProcessName]|| '': (item.span_category == 'network'?item.detail[CollectionEquipment] || '' : '')}`
                     const temp = {
                         name: item.id,
                         value: [
@@ -209,8 +226,11 @@ export default {
                             start,
                             start + item.duration,
                             item.span_name,
-                            (item.duration / rootVal) * 100
+                            (item.duration / rootVal) * 100,
+                            collectionName,
+                            item.span_category
                         ],
+                        detail:item.detail,
                         itemStyle: {
                             color: ColorTypes[item.span_category]
                         }
@@ -229,6 +249,23 @@ export default {
             recur(filteredJson);
             return data;
         },
+        formatCategoryData(jsonObj, id) {
+            const data = [];
+            const filteredJson = this.filterJson(structuredClone(jsonObj), id);
+            const recur = (item) => {
+                if(item){
+                    data.push(item.span_category);
+                }
+                if(item) {
+                    for (const child of item.children || []) {
+                        recur(child);
+                    }
+                }
+                
+            };
+            recur(filteredJson);
+            return [...new Set(data)];
+        },
         heightOfJson(json) {
             const recur = (item, level = 0) => {
                 if ((item && item.children || []).length === 0) {