Echarts在线免费图表

 
            option = {
    tooltip: {
                trigger: 'item',
                formatter: '{b}:{c}',
                hideDelay: 0,
                animationDurationUpdate: 1500,
                animationEasingUpdate: 'quinticInOut',
                geo: {
                    roam: true,
                    show: true
                }
            },
            series: [{
                name: '树图',
                type: 'tree',
                orient: 'horizontal', 
                initialTreeDepth: -1,
                rootLocation: { x: 'right', y: '10%' }, // 根节点位置  {x: ‘center‘,y: 10}
                nodePadding: 10,  //智能定义全局最小节点间距，不能定义层级节点间距。
                symbolSize: [30,30],
                symbol: 'circle',
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'bottom',
                        },
                        distance: 10,
                    }
                },
                lineStyle: {
                    normal:{
                        color: 'gray',
                        type: 'solid',
                        symbol: 'arrow',
                    },
                },
                data: [{
                    name: '根节点',
                    value: 6,
                    symbol: 'circle',
                    children: [
                        {
                            name: '二节点', //由于label的formatter存在bug，所以无法通过html进行格式化，如果要换行要用\n
                            value: 4,
                            children: [{
                                name: '三节点',
                                value: 4,
                                children: [{
                                    name:'四节点',
                                    children: [
                                        {
                                            name:'五节点',
                                            value: 10,
                                        }
                                    ]
                                },{
                                    name:'四节点',
                                    
                                    value: 10,
                                    children: [
                                        {
                                            name:'五节点',
                                            value: 10,
                                           
                                        }
                                    ]
                                }]
                            },{
                                name: '三节点',
                                value: 6,
                               
                                children: [
                                    {
                                        name:'四节点',
                                        value: 5,
                                        
                                    }
                                ]
                            },]
                        },
                    ]
                }]
            }]
};