Skip to content

E
echarts

Five-菜鸟级 / echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 1
Fork 0
E
echarts

体验新版 GitCode，发现更多精彩内容 >>

提交 66119d35 编写于 作者: D deqingli
浏览文件
操作

update the remove and add node test of tree with polyline edge shape

上级 7e6ada8c
隐藏空白更改
内联 并排
Showing with 264 addition and 193 deletion
test/tree-addNode.html
浏览文件 @ 66119d35
......@@ -25,26 +25,22 @@ under the License.
<script src="lib/esl.js"></script>
<script src="lib/config.js"></script>
<script src="lib/jquery.min.js"></script>
<script src="lib/testHelper.js"></script>
<link rel="stylesheet" href="lib/reset.css" />
</head>
<body>
<style>
html, body, #main {
width: 100%;
padding: 0;
margin: 0;
height: 100%;
}
</style>
<div id="main"></div>
<div id="main0"></div>
<div id="main1"></div>
<script>
require([
'echarts'
], function (echarts) {
var chart = echarts.init(document.getElementById('main'), null, {
});
window.onresize = function () {
chart.resize();
chart0.resize();
chart1.resize();
};
var data = {
......@@ -84,76 +80,104 @@ under the License.
]
};
chart.setOption({
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
legend: {
top: '2%',
left: '3%',
orient: 'vertical',
data: [{
name: 'tree1',
icon: 'rectangle'
}],
borderColor: '#c23531'
},
series:[
{
type: 'tree',
id: '2',
name: 'tree1',
data: [data],
// Used to test when the data is null whether it is work well.
// data: [],
top: '20%',
left: '30%',
bottom: '22%',
right: '20%',
roam: true,
symbolSize: 15,
orient: 'RL',
label: {
position: 'right',
verticalAlign: 'middle',
align: 'left',
formatter: '{b}: {c}'
},
leaves: {
function getOption(edgeShape, id) {
return {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
legend: {
top: '2%',
left: '3%',
orient: 'vertical',
data: [{
name: 'tree1',
icon: 'rectangle'
}],
borderColor: '#c23531'
},
series:[
{
type: 'tree',
id: id,
name: 'tree1',
data: [data],
// Used to test when the data is null whether it is work well.
// data: [],
top: '20%',
left: '30%',
bottom: '22%',
right: '20%',
roam: true,
edgeShape: edgeShape,
symbolSize: 15,
orient: 'RL',
label: {
position: 'left',
position: 'right',
verticalAlign: 'middle',
align: 'right',
formatter: function (params) {
return params.data.name + params.dataIndex;
align: 'left',
formatter: '{b}: {c}'
},
leaves: {
label: {
position: 'left',
verticalAlign: 'middle',
align: 'right',
formatter: function (params) {
return params.data.name + params.dataIndex;
}
}
}
},
},
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750
}
]
}
}
var chart0 = testHelper.create(echarts, 'main0', {
title: [
'[edgeShape: **curve**]'
],
option: getOption('curve', '0'),
height: 500
});
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750
}
]
var chart1 = testHelper.create(echarts, 'main1', {
title: [
'[edgeShape: **polyline**]'
],
option: getOption('polyline', '1'),
height: 500
});
setTimeout(function() {
var cloneData = echarts.util.clone(data);
var appendNode = cloneData.children[1].children.splice(2, 1);
cloneData.children.push(appendNode[0]);
chart.setOption({
chart0.setOption({
series: [{
type: 'tree',
id: '0',
data: [cloneData]
}]
}, false);
chart1.setOption({
series: [{
type: 'tree',
id: '2',
id: '1',
data: [cloneData]
}]
}, false);
......
test/tree-recurrentRemoveNode.html
浏览文件 @ 66119d35
......@@ -25,26 +25,22 @@ under the License.
<script src="lib/esl.js"></script>
<script src="lib/config.js"></script>
<script src="lib/jquery.min.js"></script>
<script src="lib/testHelper.js"></script>
<link rel="stylesheet" href="lib/reset.css" />
</head>
<body>
<style>
html, body, #main {
width: 100%;
padding: 0;
margin: 0;
height: 100%;
}
</style>
<div id="main"></div>
<div id="main0"></div>
<div id="main1"></div>
<script>
require([
'echarts'
], function (echarts) {
var chart = echarts.init(document.getElementById('main'), null, {
});
window.onresize = function () {
chart.resize();
chart0.resize();
chart1.resize();
};
var data = {
......@@ -80,72 +76,100 @@ under the License.
]
};
chart.setOption({
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
legend: {
top: '2%',
left: '3%',
orient: 'vertical',
data: [{
name: 'tree1',
icon: 'rectangle'
}],
borderColor: '#c23531'
},
series:[
{
type: 'tree',
id: '2',
name: 'tree1',
data: [data],
function getOption(edgeShape, id) {
return {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
top: '20%',
left: '30%',
bottom: '22%',
right: '20%',
legend: {
top: '2%',
left: '3%',
orient: 'vertical',
data: [{
name: 'tree1',
icon: 'rectangle'
}],
borderColor: '#c23531'
},
series:[
{
type: 'tree',
id: id,
name: 'tree1',
data: [data],
top: '20%',
left: '30%',
bottom: '22%',
right: '20%',
symbolSize: 7,
orient: 'RL',
symbolSize: 7,
orient: 'RL',
label: {
position: 'right',
verticalAlign: 'middle',
align: 'left'
},
edgeShape: edgeShape,
leaves: {
label: {
position: 'left',
verticalAlign: 'middle',
align: 'right'
}
},
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750
}
]
position: 'right',
verticalAlign: 'middle',
align: 'left'
},
leaves: {
label: {
position: 'left',
verticalAlign: 'middle',
align: 'right'
}
},
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750
}
]
}
}
var chart0 = testHelper.create(echarts, 'main0', {
title: [
'[edgeShape: **curve**]'
],
option: getOption('curve', '0'),
height: 500
});
var chart1 = testHelper.create(echarts, 'main1', {
title: [
'[edgeShape: **polyline**]'
],
option: getOption('polyline', '1'),
height: 500
});
var cloneData = echarts.util.clone(data);
setInterval(function() {
cloneData.children[1].children.splice(0, 1);
chart.setOption({
chart0.setOption({
series: [{
type: 'tree',
id: '0',
data: [cloneData]
}]
}, false);
chart1.setOption({
series: [{
type: 'tree',
id: '2',
id: '1',
data: [cloneData]
}]
}, false);
}, 1000);
});
</script>
</body>
......
test/tree-removeNode.html
浏览文件 @ 66119d35
......@@ -25,26 +25,22 @@ under the License.
<script src="lib/esl.js"></script>
<script src="lib/config.js"></script>
<script src="lib/jquery.min.js"></script>
<script src="lib/testHelper.js"></script>
<link rel="stylesheet" href="lib/reset.css" />
</head>
<body>
<style>
html, body, #main {
width: 100%;
padding: 0;
margin: 0;
height: 100%;
}
</style>
<div id="main"></div>
<div id="main0"></div>
<div id="main1"></div>
<script>
require([
'echarts'
], function (echarts) {
var chart = echarts.init(document.getElementById('main'), null, {
});
window.onresize = function () {
chart.resize();
chart0.resize();
chart1.resize();
};
var data = {
......@@ -80,67 +76,94 @@ under the License.
]
};
chart.setOption({
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
legend: {
top: '2%',
left: '3%',
orient: 'vertical',
data: [{
name: 'tree1',
icon: 'rectangle'
}],
borderColor: '#c23531'
},
series:[
{
type: 'tree',
id: '2',
name: 'tree1',
data: [data],
function getOption(edgeShape, id) {
return {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
legend: {
top: '2%',
left: '3%',
orient: 'vertical',
data: [{
name: 'tree1',
icon: 'rectangle'
}],
borderColor: '#c23531'
},
top: '20%',
left: '30%',
bottom: '22%',
right: '20%',
series:[
{
type: 'tree',
id: id,
name: 'tree1',
data: [data],
symbolSize: 7,
orient: 'RL',
top: '20%',
left: '30%',
bottom: '22%',
right: '20%',
label: {
position: 'right',
verticalAlign: 'middle',
align: 'left'
},
symbolSize: 7,
orient: 'RL',
edgeShape: edgeShape,
leaves: {
label: {
position: 'left',
verticalAlign: 'middle',
align: 'right'
}
},
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750
}
]
position: 'right',
verticalAlign: 'middle',
align: 'left'
},
leaves: {
label: {
position: 'left',
verticalAlign: 'middle',
align: 'right'
}
},
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750
}
]
}
}
var chart0 = testHelper.create(echarts, 'main0', {
title: [
'[edgeShape: **curve**]'
],
option: getOption('curve', '0'),
height: 500
});
var chart1 = testHelper.create(echarts, 'main1', {
title: [
'[edgeShape: **polyline**]'
],
option: getOption('polyline', '1'),
height: 500
});
setTimeout(function() {
var cloneData = echarts.util.clone(data);
cloneData.children.splice(0, 1);
chart.setOption({
chart0.setOption({
series: [{
type: 'tree',
id: '0',
data: [cloneData]
}]
}, false);
chart1.setOption({
series: [{
type: 'tree',
id: '2',
id: '1',
data: [cloneData]
}]
}, false);
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或