Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

请问:树状图里的图形水平放置时, 如何使根节点在最右边,而子节点依次往左排? #7154

Closed
Staryixing opened this Issue Nov 30, 2017 · 2 comments

Comments

Projects
None yet
3 participants
@Staryixing
Copy link

Staryixing commented Nov 30, 2017

One-line summary [问题简述]

树状图 树状图里的图形水平放置时, 如何使根节点在最右边,而子节点依次往左排?

Version & Environment [版本及环境]

  • ECharts version [ECharts 版本]:
  • Browser version [浏览器类型和版本]:
  • OS Version [操作系统类型和版本]:

Expected behaviour [期望结果]

树状图从右往左显示

ECharts option [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: 'arrow',
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'bottom',
                        },
                        distance: 10,
                    }
                },
                lineStyle: {
                    normal:{
                        color: 'gray',
                        type: 'solid',
                        symbol: 'arrow',
                    },
                },
                data: [{
                    name: '根节点',
                    value: 6,
                    symbol: 'image://../image/biaoge.png',
                    children: [
                        {
                            name: '二节点', //由于label的formatter存在bug,所以无法通过html进行格式化,如果要换行要用\n
                            value: 4,
                            symbol: 'image://../image/shezhi.png',
                            children: [{
                                name: '三节点',
                                value: 4,
                                symbol: 'image://../image/biaoge.png',
                                children: [{
                                    name:'四节点',
                                    symbol: 'image://../image/shezhi.png',
                                    children: [
                                        {
                                            name:'五节点',
                                            value: 10,
                                            symbol: 'image://../image/biaoge.png',
                                        }
                                    ]
                                },{
                                    name:'四节点',
                                    symbol: 'image://../image/shezhi.png',
                                    value: 10,
                                    children: [
                                        {
                                            name:'五节点',
                                            value: 10,
                                            symbol: 'image://../image/biaoge.png',
                                        }
                                    ]
                                }]
                            },{
                                name: '三节点',
                                value: 6,
                                symbol: 'image://../image/biaoge.png',
                                children: [
                                    {
                                        name:'四节点',
                                        value: 5,
                                        symbol: 'image://../image/shezhi.png',
                                    }
                                ]
                            },]
                        },
                    ]
                }]
            }]
}

Other comments [其他信息]

@hbthanki

This comment has been minimized.

Copy link

hbthanki commented Dec 9, 2017

Hello, I am also searching for this facility. Found this. But when applied, it is not working.

@deqingli

This comment has been minimized.

Copy link
Member

deqingli commented Apr 8, 2018

您好,这个功能已经加上了,下个版本发布。可以将 series.orient 配置为 'RL' (意为:from right to left).

@deqingli deqingli closed this Apr 8, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.