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.

Sign up for GitHub

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

tree反转 #1732

Merged
merged 3 commits into from
Jun 29, 2015
Merged

tree反转 #1732

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
07ebb29
树的反转
loutongbing Jun 29, 2015
8403ef6
radar例子回滚
loutongbing Jun 29, 2015
c32dfa8
再优化一下逻辑
loutongbing Jun 29, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions doc/doc-en.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3928,6 +3928,11 @@ <h5>series（tree）<a name="SeriesTree"> </a></h5>
<td> 'vertical'</td>
<td> direction of the tree, 'vertical' | 'horizontal' | 'radial'</td>
</tr>
<tr>
<td> <b>{string}</b> direction </td>
<td> ''</td>
<td> to inverse the direction of the tree, can be: 'inverse'</td>
</tr>
<tr>
<td> <b>{boolean | string}</b> roam </td>
<td> false </td>
Expand Down
7 changes: 6 additions & 1 deletion doc/doc.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3938,7 +3938,12 @@ <h5>series（树图）<a name="SeriesTree"> </a></h5>
<td> <b>{string}</b> orient </td>
<td> 'vertical'</td>
<td> 树的方向可选：'vertical' | 'horizontal' | 'radial'</td>
</tr>
</tr>
<tr>
<td> <b>{string}</b> direction </td>
<td> ''</td>
<td> 方向反转，可选：'inverse'</td>
</tr>
<tr>
<td> <b>{boolean | string}</b> roam </td>
<td> false </td>
Expand Down
189 changes: 189 additions & 0 deletions doc/example/tree5.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,189 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ECharts">
<meta name="author" content="[email protected]">
<title>ECharts · Example</title>

<link rel="shortcut icon" href="../asset/ico/favicon.png">

<link href="../asset/css/font-awesome.min.css" rel="stylesheet">
<link href="../asset/css/bootstrap.css" rel="stylesheet">
<link href="../asset/css/carousel.css" rel="stylesheet">
<link href="../asset/css/echartsHome.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

<script src="./www/js/echarts.js"></script>
<script src="../asset/js/codemirror.js"></script>
<script src="../asset/js/javascript.js"></script>

<link href="../asset/css/codemirror.css" rel="stylesheet">
<link href="../asset/css/monokai.css" rel="stylesheet">
</head>

<body>
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="head"></div>

<div class="container-fluid">
<div class="row-fluid example">
<div id="sidebar-code" class="col-md-4">
<div class="well sidebar-nav">
<div class="nav-header"><a href="#" onclick="autoResize()" class="glyphicon glyphicon-resize-full" id ="icon-resize" ></a>option</div>
<textarea id="code" name="code">
option = {
title : {
text: '树图',
subtext: '反转'
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : false,

series : [
{
name:'树图',
type:'tree',
orient: 'horizontal', // vertical horizontal
direction: 'inverse',
rootLocation: {x: 'center',y: 250}, // 根节点位置 {x: 100, y: 'center'}
nodePadding: 1,
itemStyle: {
normal: {
label: {
show: false,
formatter: "{b}"
},
lineStyle: {
color: '#48b',
shadowColor: '#000',
shadowBlur: 3,
shadowOffsetX: 3,
shadowOffsetY: 5,
type: 'curve' // 'curve'|'broken'|'solid'|'dotted'|'dashed'

}
},
emphasis: {
label: {
show: true
}
}
},

data: [
{
name: '根节点',
value: 6,
children: [
{
name: '节点1',
value: 4,
children: [
{
name: '叶子节点1',
value: 4
},
{
name: '叶子节点2',
value: 4
},
{
name: '叶子节点3',
value: 2
},
{
name: '叶子节点4',
value: 2
},
{
name: '叶子节点5',
value: 2
},
{
name: '叶子节点6',
value: 4
}
]
},
{
name: '节点2',
value: 4,
children: [{
name: '叶子节点7',
value: 4
},
{
name: '叶子节点8',
value: 4
}]
},
{
name: '节点3',
value: 1,
children: [
{
name: '叶子节点9',
value: 4
},
{
name: '叶子节点10',
value: 4
},
{
name: '叶子节点11',
value: 2
},
{
name: '叶子节点12',
value: 2
}
]
}
]
}
]
}
]
};
</textarea>
</div><!--/.well -->
</div><!--/span-->
<div id="graphic" class="col-md-8">
<div id="main" class="main"></div>
<div>
<button type="button" class="btn btn-sm btn-success" onclick="refresh(true)">刷 新</button>
<span class="text-primary">切换主题</span>
<select id="theme-select"></select>

<span id='wrong-message' style="color:red"></span>
</div>
</div><!--/span-->
</div><!--/row-->

</div><!--/.fluid-container-->

<footer id="footer"></footer>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../asset/js/jquery.min.js"></script>
<script type="text/javascript" src="../asset/js/echartsHome.js"></script>
<script src="../asset/js/bootstrap.min.js"></script>
<script src="../asset/js/echartsExample.js"></script>
</body>
</html>
22 changes: 17 additions & 5 deletions src/chart/tree.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -534,14 +534,26 @@ define(function (require) {
}
this.tree.traverse(
function (treeNode) {

var x = treeNode.layout.position[0] - originRootX + rootX;
var y = treeNode.layout.position[1] + rootY;
if (orient === 'horizontal') {
var x;
var y;
if (orient === 'vertical' && serie.direction === 'inverse') {
x = treeNode.layout.position[0] - originRootX + rootX;
y = rootY - treeNode.layout.position[1];
}
else if (orient === 'vertical') {
x = treeNode.layout.position[0] - originRootX + rootX;
y = treeNode.layout.position[1] + rootY;
}
else if (orient === 'horizontal' && serie.direction === 'inverse') {
y = treeNode.layout.position[0] - originRootX + rootY;
x = rootX - treeNode.layout.position[1];
}
else if (orient === 'horizontal') {
y = treeNode.layout.position[0] - originRootX + rootY;
x = treeNode.layout.position[1] + rootX;
}
if (orient === 'radial') {
// 极坐标
else {
x = treeNode.layout.position[0];
y = treeNode.layout.position[1];
// 记录原始坐标，以后计算贝塞尔曲线的控制点
Expand Down