echarts火焰图

### 使用ECharts创建火焰图

#### 创建基础环境
为了使用 ECharts 绘制火焰图，首先需要引入 ECharts 库。如果仅有一个页面使用 ECharts，则推荐在该页面的钩子函数中动态加载此库，并在 `onload` 事件中初始化 ECharts 实例[^1]。

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', (event) => {
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        
        // 配置项和数据将在下方定义
        var option;

        // ... 下方继续配置option...
        
        myChart.setOption(option);
    });
</script>

#### 定义火焰图的数据结构
对于火焰图而言，其核心在于构建合适的数据层次结构。每一层代表调用链中的不同部分；每一片段表示具体的函数或过程及其占用的时间比例。

var data = [
    {
        name: 'root',
        children: [
            {name: "functionA", value: 30},
            {
                name: "functionB",
                children: [
                    {name: "subFunctionB1", value: 20},
                    {name: "subFunctionB2", value: 8}
                ]
            },
            {name: "functionC", value: 15}
        ]
    }
];

#### 设置图表选项并渲染图形
接下来设置 ECharts 的配置参数来指定要绘制的是火焰图，并传入之前准备好的数据源：

option = {
    series: [{
        type: 'sunburst', // 类型设为太阳爆发图即可以实现类似火焰图的效果
        data: data,
        radius: [0, '95%'],
        label: {
            rotate: 'radial'
        }
    }]
};
myChart.setOption(option);

需要注意的是，在最新的大版本 Apache ECharts 5 中已经针对视觉设计进行了多项改进，使得创建像火焰图这样复杂而美观的可视化变得更加容易[^2]。不过上述例子采用的是较为通用的方式展示了一个简化版的“伪”火焰图（实际应选用专门用于性能分析场景下的真实火焰图组件），具体到生产环境中可能还需要根据官方文档进一步调整以满足特定需求。