Echarts的旭日图添加鼠标移入显示百分比

 在 ECharts 的旭日图（Sunburst）中显示百分比，主要涉及到对图表数据格式的处理以及配置项的调整，以确保每个部分都以其所占比例的百分比形式展示。以下是一些关键步骤和设置示例：

数据格式

确保你的数据结构中包含了每个部分的值，并且你可以计算出每个部分相对于其父级的百分比。ECharts 的旭日图数据通常是一个嵌套的结构，其中每个节点都有一个 value 属性表示其大小。

配置项调整

要在旭日图中显示百分比，你需要调整 series 配置中的 label 设置，以便在每个扇区上显示百分比。这可以通过设置 label.formatter 来实现，它允许你自定义标签的格式。

以下是一个简单的示例代码，展示了如何在旭日图中配置以显示百分比：

option = {
    series: [
        {
            type: 'sunburst',
            // ... 其他配置 ...
            data: [{ // 你的数据结构
                name: 'root',
                children: [
                    { name: 'child1', value: 10 },
                    { name: 'child2', value: 20 },
                    // 更多子节点...
                ]
            }],
            label: {
                // 自定义标签格式化函数，用于显示百分比
                formatter: function(params) {
                    // 这里假设你已经计算好了每个节点的百分比，并存储在了一个名为'percentage'的属性中
                    // 如果没有，你可能需要基于数据动态计算这个值
                    return params.data.percentage + '%';
                }
            },
            // tooltip 也可以被格式化以显示百分比
            tooltip: {
                formatter: function(params) {
                    return params.name + ': ' + params.data.percentage + '%';
                }
            },
        }
    ]
};

计算百分比

注意，在上述代码中提到的 params 属性需要你事先计算好并添加到数据中。这通常涉及到遍历数据结构，计算每个节点的值占其父节点总值的比例。