feat:火焰图去掉$http 形式调取接口

src/views/latency/components/FlameGraph.vue

@@ -4,7 +4,7 @@
 
 <script>
 import resize from '@/components/Charts/mixins/resize'
-// import { getFlameData } from '@/api/trace'
+import { getFlameData } from '@/api/trace'
 export default {
     mixins: [resize],
     data() {
@@ -37,86 +37,77 @@ export default {
             let para = {
                 'trace_id': this.tractID
             }
-            // const res = await getFlameData(para)
-            this.$http({
-                url: 'http://app.cestong.com.cn/v1/stats/querier/trace/complation',
-                method: 'post',
-                data: para
-            }).then(res => {
-                // if (res) {
-                    this.chart.hideLoading();
-                    const chartResdata = res.data.OPT_STATUS // OPT_STATUS这个对象就是根节点
-                    const levelOfOriginalJson = this.heightOfJson(chartResdata);
-                    let seriesData = this.setSeries(this.recursionJson(chartResdata))
-                    option = {
-                        backgroundColor: {
-                            type: 'linear',
-                            x: 0,
-                            y: 0,
-                            x2: 0,
-                            y2: 1,
-                            colorStops: [
-                                {
-                                    offset: 0.05,
-                                    color: '#eee'
-                                },
-                                {
-                                    offset: 0.95,
-                                    color: '#eeeeb0'
-                                }
-                            ]
-                        },
-                        tooltip: {
-                            className: 'custom-tooltip-box',
-                            formatter: (params) => {
-                                let res = `${params.marker} ${params.value[3]
-                                    }<br/>${params.marker} 耗时: ${params.value[7]}<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/>`
-                                }
-                                res += `<div style='position:absolute;bottom:10px;right:10px;width:80px;height:80px;z-index: -1;backdrop-filter: blur(10px);background-image:url("${params.value[6] == 'apm' ? this.apm : this.apis}");background-size:cover;background-repeat:no-repeat;background-position: center;'></div>`
-                                return res;
-                            }
-                        },
-                        toolbox: {
-                            feature: {
-                                restore: {}
+            const res = await getFlameData(para)
+            if (res) {
+                this.chart.hideLoading();
+                const chartResdata = res.OPT_STATUS // OPT_STATUS这个对象就是根节点
+                const levelOfOriginalJson = this.heightOfJson(chartResdata);
+                let seriesData = this.setSeries(this.recursionJson(chartResdata))
+                option = {
+                    backgroundColor: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [
+                            {
+                                offset: 0.05,
+                                color: '#eee'
                             },
-                            right: 20,
-                            top: 10
-                        },
-                        xAxis: {
-                            show: false
-                        },
-                        yAxis: {
-                            show: false,
-                            max: levelOfOriginalJson
-                        },
-                        series: [
-                            ...seriesData
-                        ],
-                        color: ['#f2d643', '#eb8146', '#ffb248', '#d95850'], // 图例的颜色
-                        legend: {
-                            show: true,
-                            // data: this.formatCategoryData(chartResdata),
-                            data: ['apm', 'syscall', 'network', 'unknown']
+                            {
+                                offset: 0.95,
+                                color: '#eeeeb0'
+                            }
+                        ]
+                    },
+                    tooltip: {
+                        className: 'custom-tooltip-box',
+                        formatter: (params) => {
+                            let res = `${params.marker} ${params.value[3]
+                                }<br/>${params.marker} 耗时: ${params.value[7]}<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/>`
+                            }
+                            res += `<div style='position:absolute;bottom:10px;right:10px;width:80px;height:80px;z-index: -1;backdrop-filter: blur(10px);background-image:url("${params.value[6] == 'apm' ? this.apm : this.apis}");background-size:cover;background-repeat:no-repeat;background-position: center;'></div>`
+                            return res;
                         }
+                    },
+                    toolbox: {
+                        feature: {
+                            restore: {}
+                        },
+                        right: 20,
+                        top: 10
+                    },
+                    xAxis: {
+                        show: false
+                    },
+                    yAxis: {
+                        show: false,
+                        max: levelOfOriginalJson
+                    },
+                    series: [
+                        ...seriesData
+                    ],
+                    color: ['#f2d643', '#eb8146', '#ffb248', '#d95850'], // 图例的颜色
+                    legend: {
+                        show: true,
+                        // data: this.formatCategoryData(chartResdata),
+                        data: ['apm', 'syscall', 'network', 'unknown']
+                    }
 
-                    };
-                    this.chart.setOption(option);
-                    this.chart.on('click', (params) => {
-                        const data = this.recursionJson(chartResdata, params.data.span_name);
-                        const rootValue = data[0].value[2];
-                        this.chart.setOption({
-                            xAxis: { max: rootValue },
-                            series: [{ data }]
-                        });
+                };
+                this.chart.setOption(option);
+                this.chart.on('click', (params) => {
+                    const data = this.recursionJson(chartResdata, params.data.span_name);
+                    const rootValue = data[0].value[2];
+                    this.chart.setOption({
+                        xAxis: { max: rootValue },
+                        series: [{ data }]
                     });
-                // }
-            })
-
-
-
+                });
+            }
         },
         setSeries(chartResdata) {
             const renderItem = (params, api) => {