开源教程在线编辑器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 实例</title>
    
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        option = {
            silent: true,
            series: {
                radius: ['15%', '95%'],
                center: ['50%', '60%'],
                type: 'sunburst',
                sort: null,
                highlightPolicy: 'ancestor',
                data: [{
                    value: 10,
                    children: [{
                        value: 4,
                        children: [{
                            value: 2,
                            children: [{
                                name: 'target',
                                value: 1
                            }]
                        }, {
                            value: 1
                        }, {
                            value: 0.5
                        }]
                    }, {
                        value: 2
                    }]
                }, {
                    value: 4,
                    children: [{
                        children: [{
                            value: 2
                        }]
                    }]
                }],
                label: {
                    normal: {
                        rotate: 'none',
                        color: '#fff'
                    }
                },
                levels: [],
                itemStyle: {
                    color: 'yellow',
                    borderWidth: 2
                },
                emphasis: {
                    itemStyle: {
                        color: 'red'
                    }
                },
                highlight: {
                    itemStyle: {
                        color: 'orange'
                    }
                },
                downplay: {
                    itemStyle: {
                        color: '#ccc'
                    }
                }
            }
        };

setTimeout(function () {
            myChart.dispatchAction({
                type: 'sunburstHighlight',
                targetNodeId: 'target'
            });
        });
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>