ECharts（百度开发的一款开源的数据可视化库）的旭日图是一种很酷炫的可视化图表，主要用于展示层次结构数据。以下是一个简单的旭日图的示例代码，你可以根据你的数据和需求进行相应的修改：
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ECharts 旭日图示例</title>
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
</head>

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="sunburstChart" style="width: 800px; height: 600px;"></div>

    <script type="text/javascript">
        // 初始化 ECharts 实例
        var myChart = echarts.init(document.getElementById('sunburstChart'));

        // 指定图表的配置项和数据
        var option = {
            series: {
                type: 'sunburst',
                data: [{
                    name: 'Grandparent',
                    children: [{
                        name: 'Parent 1',
                        value: 5,
                        children: [{
                            name: 'Child 1',
                            value: 2
                        }, {
                            name: 'Child 2',
                            value: 3
                        }]
                    }, {
                        name: 'Parent 2',
                        value: 8,
                        children: [{
                            name: 'Child 3',
                            value: 4
                        }, {
                            name: 'Child 4',
                            value: 4
                        }]
                    }]
                }],
                radius: [0, '90%'],
                label: {
                    rotate: 'radial'
                }
            }
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>

上述代码创建了一个简单的旭日图，其中包含祖父节点、两个父节点和各自的子节点。你可以根据自己的数据结构修改 data 部分，以适应你的需求。在实际使用中，你需要将 ECharts 的库文件引入到你的项目中，可以通过下载文件或使用 CDN 进行引入。


转载请注明出处：http://www.pingtaimeng.com/article/detail/13210/ECharts