ECharts 旭日图 (Sunburst Chart)

旭日图（Sunburst Chart） 是一种展示层级结构的图表，常用于呈现具有嵌套关系的数据，形象地表示数据的层级、大小及比例。它以圆形的形式展示，每个环形代表一层数据，环形的大小表示数据的比例，中心的环表示最上层，外圈表示子层。

1. 旭日图的基本结构

  • 中心圆：表示最顶层的数据。
  • 环形区域：每一层的数据以环形展开，外层环代表子层级。
  • 每个扇形区域：代表数据中的一个节点，区域的大小与数据的比例成正比。
  • 颜色：可用于区分不同类别的数据。

2. 旭日图基本示例

2.1 示例：展示简单的旭日图

var option = {
    series: {
        type: 'sunburst',  // 图表类型
        data: [
            {
                name: '根节点',
                children: [
                    {
                        name: '子节点 1',
                        value: 10,
                        children: [
                            { name: '孙子节点 1', value: 4 },
                            { name: '孙子节点 2', value: 6 }
                        ]
                    },
                    {
                        name: '子节点 2',
                        value: 15,
                        children: [
                            { name: '孙子节点 3', value: 10 },
                            { name: '孙子节点 4', value: 5 }
                        ]
                    }
                ]
            }
        ],
        radius: [0, '90%'],  // 内外半径比例
        label: { 
            rotate: 'radial'  // 标签旋转方式
        },
        itemStyle: {
            borderWidth: 2,
            borderColor: '#fff'  // 扇形之间的边框颜色
        }
    }
};

📌 关键点

  • type: 'sunburst'：指定图表类型为旭日图。
  • radius: [0, '90%']：设置内外半径，控制层级的大小。
  • label.rotate: 'radial'：标签旋转为径向，便于展示层级信息。

2.2 示例：带有颜色的旭日图

var option = {
    series: {
        type: 'sunburst',
        data: [
            {
                name: 'A',
                children: [
                    {
                        name: 'B',
                        value: 10,
                        children: [
                            { name: 'C', value: 4 },
                            { name: 'D', value: 6 }
                        ]
                    },
                    {
                        name: 'E',
                        value: 15,
                        children: [
                            { name: 'F', value: 10 },
                            { name: 'G', value: 5 }
                        ]
                    }
                ]
            }
        ],
        radius: [0, '80%'],  // 半径
        itemStyle: {
            borderWidth: 1,
            borderColor: '#fff',
            color: function (params) {
                var colorList = ['#ff7f50', '#87cefa', '#da70d6', '#32cd32'];
                return colorList[params.dataIndex % colorList.length];  // 动态设置颜色
            }
        },
        label: {
            rotate: 'radial',
            fontSize: 14,
            color: '#fff'  // 标签文字颜色
        }
    }
};

📌 关键点

  • color：通过函数为每个节点设置不同的颜色。
  • label.fontSize：控制标签字体大小。
  • radius: [0, '80%']：控制内外半径，使图形紧凑。

2.3 示例：带有渐变色的旭日图

var option = {
    series: {
        type: 'sunburst',
        data: [
            {
                name: '根节点',
                children: [
                    {
                        name: '子节点 1',
                        value: 10,
                        children: [
                            { name: '孙子节点 1', value: 4 },
                            { name: '孙子节点 2', value: 6 }
                        ]
                    },
                    {
                        name: '子节点 2',
                        value: 15,
                        children: [
                            { name: '孙子节点 3', value: 10 },
                            { name: '孙子节点 4', value: 5 }
                        ]
                    }
                ]
            }
        ],
        radius: [0, '80%'],
        itemStyle: {
            borderWidth: 1,
            borderColor: '#fff',
            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [  // 渐变色
                { offset: 0, color: '#ff7f50' },
                { offset: 1, color: '#32cd32' }
            ])
        },
        label: {
            rotate: 'radial',
            fontSize: 14
        }
    }
};

📌 关键点

  • echarts.graphic.LinearGradient：用于生成线性渐变色。
  • itemStyle.color：设置节点的渐变色，产生平滑的色彩过渡效果。

3. 旭日图配置项

3.1 series 配置

  • type: 'sunburst'：指定图表类型为旭日图。
  • radius：设置图表的半径范围。内半径为 0，外半径为 '90%'。
  • label：设置节点标签的相关属性。
    • rotate：设置标签的旋转方式，如 radial 或 tangential。
    • fontSize：设置标签字体大小。
  • itemStyle：设置节点的样式，包括 颜色、边框 等。

3.2 data 配置

  • name：每个节点的名称。
  • value：每个节点的值，决定节点的大小。
  • children：子节点，支持递归结构，形成树形层级结构。

3.3 tooltip 配置

可以自定义 提示框（tooltip） 显示的内容，便于查看每个节点的详细信息。

tooltip: {
    trigger: 'item',
    formatter: function (params) {
        return `${params.name}<br/>${params.value}`;
    }
}

4. 交互操作

ECharts 的旭日图也支持交互操作：

  • 点击事件：可以通过 click 事件来响应用户的点击操作，获取选中节点的信息。
chart.on('click', function (params) {
    console.log('点击了节点：', params.name, '值为：', params.value);
});
  • 鼠标悬停：通过鼠标悬停显示详细的提示信息。

5. 总结

旭日图是展示层级数据的非常有效方式，具有以下优点：

  • 层次分明：清晰地显示数据层级结构。
  • 直观易懂：通过环形展示，易于理解每个层级及其比例。
  • 互动性强：可以响应用户的点击和悬停操作，提供详细信息。

🚀 如果你有具体的层级数据或想要在项目中使用旭日图，可以根据需要调整配置！