1341 lines
38 KiB
JavaScript
1341 lines
38 KiB
JavaScript
describe('legend', function() {
|
|
|
|
var uiHelper = window.uiHelper;
|
|
|
|
var suites = [{
|
|
name: 'show',
|
|
cases: [{
|
|
name: 'should display legend as default',
|
|
option: {
|
|
series: [{
|
|
name: 'a',
|
|
type: 'line',
|
|
data: [1, 2, 4]
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['x','y','z']
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['a']
|
|
}
|
|
}
|
|
}, {
|
|
name: 'should hide legend when show set to be false',
|
|
option: {
|
|
series: [{
|
|
name: 'a',
|
|
type: 'line',
|
|
data: [1, 2, 4]
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['x','y','z']
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['a'],
|
|
show: false
|
|
}
|
|
}
|
|
}]
|
|
}, {
|
|
name: 'left',
|
|
cases: [{
|
|
name: 'should display left position',
|
|
option: {
|
|
series: [{
|
|
name: 'a',
|
|
type: 'line',
|
|
data: [1, 2, 4]
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['x','y','z']
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['a'],
|
|
left: 'left'
|
|
}
|
|
}
|
|
}, {
|
|
name: 'should display at 20%',
|
|
option: {
|
|
series: [{
|
|
name: 'a',
|
|
type: 'line',
|
|
data: [1, 2, 4]
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['x','y','z']
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['a'],
|
|
left: '20%'
|
|
}
|
|
}
|
|
}, {
|
|
name: 'should display at center',
|
|
option: {
|
|
series: [{
|
|
name: 'a',
|
|
type: 'line',
|
|
data: [1, 2, 4]
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['x','y','z']
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['a'],
|
|
left: 'center'
|
|
}
|
|
}
|
|
}, {
|
|
name: 'should display at right',
|
|
option: {
|
|
series: [{
|
|
name: 'a',
|
|
type: 'line',
|
|
data: [1, 2, 4]
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['x','y','z']
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['a'],
|
|
left: 'right'
|
|
}
|
|
}
|
|
}]
|
|
}, {
|
|
name: 'top',
|
|
cases: [{
|
|
name: 'should display top position',
|
|
option: {
|
|
series: [{
|
|
name: 'a',
|
|
type: 'line',
|
|
data: [1, 2, 4]
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['x','y','z']
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['a'],
|
|
top: 50
|
|
}
|
|
}
|
|
}, {
|
|
name: 'should display at 20%',
|
|
option: {
|
|
series: [{
|
|
name: 'a',
|
|
type: 'line',
|
|
data: [1, 2, 4]
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['x','y','z']
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['a'],
|
|
top: '20%'
|
|
}
|
|
}
|
|
}, {
|
|
name: 'should display at middle',
|
|
option: {
|
|
series: [{
|
|
name: 'a',
|
|
type: 'line',
|
|
data: [1, 2, 4]
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['x','y','z']
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['a'],
|
|
top: 'middle'
|
|
}
|
|
}
|
|
}, {
|
|
name: 'should display at bottom',
|
|
option: {
|
|
series: [{
|
|
name: 'a',
|
|
type: 'line',
|
|
data: [1, 2, 4]
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['x','y','z']
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['a'],
|
|
top: 'bottom'
|
|
}
|
|
}
|
|
}]
|
|
}, {
|
|
name: 'right',
|
|
cases: [{
|
|
name: 'should display right position',
|
|
option: {
|
|
series: [{
|
|
name: 'a',
|
|
type: 'line',
|
|
data: [1, 2, 4]
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['x','y','z']
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['a'],
|
|
right: 50
|
|
}
|
|
}
|
|
}]
|
|
}, {
|
|
name: 'left and right',
|
|
cases: [{
|
|
name: 'are both set',
|
|
test: 'equalOption',
|
|
option1: {
|
|
series: [{
|
|
name: 'a',
|
|
type: 'line',
|
|
data: [1, 2, 4]
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['x','y','z']
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['a'],
|
|
left: 50,
|
|
right: 50
|
|
}
|
|
},
|
|
option2: {
|
|
series: [{
|
|
name: 'a',
|
|
type: 'line',
|
|
data: [1, 2, 4]
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['x','y','z']
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['a'],
|
|
left: 50
|
|
}
|
|
}
|
|
}]
|
|
}, {
|
|
name: 'top and bottom',
|
|
cases: [{
|
|
name: 'are both set',
|
|
test: 'equalOption',
|
|
option1: {
|
|
series: [{
|
|
name: 'a',
|
|
type: 'line',
|
|
data: [1, 2, 4]
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['x','y','z']
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['a'],
|
|
top: 50,
|
|
bottom: 50
|
|
}
|
|
},
|
|
option2: {
|
|
series: [{
|
|
name: 'a',
|
|
type: 'line',
|
|
data: [1, 2, 4]
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['x','y','z']
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['a'],
|
|
top: 50
|
|
}
|
|
}
|
|
}]
|
|
}, {
|
|
name: 'width',
|
|
cases: [{
|
|
name: 'should display in seperate lines',
|
|
test: 'notEqualOption',
|
|
option1: {
|
|
series: [{
|
|
name: 'this is a',
|
|
type: 'line',
|
|
data: []
|
|
}, {
|
|
name: 'this is b ...',
|
|
type: 'line',
|
|
data: []
|
|
}, {
|
|
name: 'this is c ... ...',
|
|
type: 'line',
|
|
data: []
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['x','y','z']
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['this is a', 'this is b ...',
|
|
'this is c ... ...'],
|
|
width: 200
|
|
}
|
|
},
|
|
option2: {
|
|
series: [{
|
|
name: 'this is a',
|
|
type: 'line',
|
|
data: []
|
|
}, {
|
|
name: 'this is b ...',
|
|
type: 'line',
|
|
data: []
|
|
}, {
|
|
name: 'this is c ... ...',
|
|
type: 'line',
|
|
data: []
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['x','y','z']
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['this is a', 'this is b ...',
|
|
'this is c ... ...']
|
|
}
|
|
}
|
|
}]
|
|
}, {
|
|
name: 'hight',
|
|
cases: [{
|
|
name: 'should display in seperate lines',
|
|
test: 'notEqualOption',
|
|
option1: {
|
|
series: [{
|
|
name: 'this is a',
|
|
type: 'line',
|
|
data: []
|
|
}, {
|
|
name: 'this is b ...',
|
|
type: 'line',
|
|
data: []
|
|
}, {
|
|
name: 'this is c ... ...',
|
|
type: 'line',
|
|
data: []
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['x','y','z']
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['this is a', 'this is b ...',
|
|
'this is c ... ...'],
|
|
height: 50,
|
|
orient: 'vertical'
|
|
}
|
|
},
|
|
option2: {
|
|
series: [{
|
|
name: 'this is a',
|
|
type: 'line',
|
|
data: []
|
|
}, {
|
|
name: 'this is b ...',
|
|
type: 'line',
|
|
data: []
|
|
}, {
|
|
name: 'this is c ... ...',
|
|
type: 'line',
|
|
data: []
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['x','y','z']
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['this is a', 'this is b ...',
|
|
'this is c ... ...'],
|
|
orient: 'vertical'
|
|
}
|
|
}
|
|
}]
|
|
}, {
|
|
name: 'orient',
|
|
cases: [{
|
|
name: 'should display horizontally',
|
|
option: {
|
|
series: [{
|
|
name: 'this is a',
|
|
type: 'line',
|
|
data: []
|
|
}, {
|
|
name: 'this is b ...',
|
|
type: 'line',
|
|
data: []
|
|
}, {
|
|
name: 'this is c ... ...',
|
|
type: 'line',
|
|
data: []
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['x','y','z']
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['this is a', 'this is b ...',
|
|
'this is c ... ...'],
|
|
orient: 'horizontal'
|
|
}
|
|
}
|
|
}, {
|
|
name: 'should display vertically',
|
|
option: {
|
|
series: [{
|
|
name: 'this is a',
|
|
type: 'line',
|
|
data: []
|
|
}, {
|
|
name: 'this is b ...',
|
|
type: 'line',
|
|
data: []
|
|
}, {
|
|
name: 'this is c ... ...',
|
|
type: 'line',
|
|
data: []
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['x','y','z']
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['this is a', 'this is b ...',
|
|
'this is c ... ...'],
|
|
orient: 'vertical'
|
|
}
|
|
}
|
|
}, {
|
|
name: 'should display different with horizontal and vertical',
|
|
test: 'notEqualOption',
|
|
option1: {
|
|
series: [{
|
|
name: 'this is a',
|
|
type: 'line',
|
|
data: []
|
|
}, {
|
|
name: 'this is b ...',
|
|
type: 'line',
|
|
data: []
|
|
}, {
|
|
name: 'this is c ... ...',
|
|
type: 'line',
|
|
data: []
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['x','y','z']
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['this is a', 'this is b ...',
|
|
'this is c ... ...'],
|
|
orient: 'vertical'
|
|
}
|
|
},
|
|
option2: {
|
|
series: [{
|
|
name: 'this is a',
|
|
type: 'line',
|
|
data: []
|
|
}, {
|
|
name: 'this is b ...',
|
|
type: 'line',
|
|
data: []
|
|
}, {
|
|
name: 'this is c ...',
|
|
type: 'line',
|
|
data: []
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['x','y','z']
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['this is a', 'this is b ...',
|
|
'this is c ... ...']
|
|
}
|
|
}
|
|
}]
|
|
}, {
|
|
name: 'align',
|
|
cases: [{
|
|
name: 'should render correctly with align right',
|
|
option: {
|
|
series: [{
|
|
name: 'this is a',
|
|
type: 'line',
|
|
data: []
|
|
}, {
|
|
name: 'this is b bbb',
|
|
type: 'line',
|
|
data: []
|
|
}, {
|
|
name: 'this is c ccc ccc',
|
|
type: 'line',
|
|
data: []
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['x','y','z']
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['this is a', 'this is b bbb',
|
|
'this is c ccc ccc'],
|
|
left: 'right',
|
|
height: 50,
|
|
orient: 'vertical'
|
|
}
|
|
}
|
|
}, {
|
|
name: 'should align to right when left is right and orient is vertical',
|
|
test: 'equalOption',
|
|
option1: {
|
|
series: [{
|
|
name: 'this is a',
|
|
type: 'line',
|
|
data: []
|
|
}, {
|
|
name: 'this is b ...',
|
|
type: 'line',
|
|
data: []
|
|
}, {
|
|
name: 'this is c ... ...',
|
|
type: 'line',
|
|
data: []
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['x','y','z']
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['this is a', 'this is b ...',
|
|
'this is c ... ...'],
|
|
left: 'right',
|
|
orient: 'vertical'
|
|
}
|
|
},
|
|
option2: {
|
|
series: [{
|
|
name: 'this is a',
|
|
type: 'line',
|
|
data: []
|
|
}, {
|
|
name: 'this is b ...',
|
|
type: 'line',
|
|
data: []
|
|
}, {
|
|
name: 'this is c ... ...',
|
|
type: 'line',
|
|
data: []
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['x','y','z']
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['this is a', 'this is b ...',
|
|
'this is c ... ...'],
|
|
left: 'right',
|
|
orient: 'vertical',
|
|
align: 'right'
|
|
}
|
|
}
|
|
}, {
|
|
name: 'should align to right when left is right and orient is vertical with height',
|
|
test: 'equalOption',
|
|
option1: {
|
|
series: [{
|
|
name: 'a',
|
|
type: 'line',
|
|
data: []
|
|
}, {
|
|
name: 'b',
|
|
type: 'line',
|
|
data: []
|
|
}, {
|
|
name: 'c',
|
|
type: 'line',
|
|
data: []
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['x','y','z']
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['a', 'b', 'c'],
|
|
left: 'right',
|
|
height: 50,
|
|
orient: 'vertical'
|
|
}
|
|
},
|
|
option2: {
|
|
series: [{
|
|
name: 'a',
|
|
type: 'line',
|
|
data: []
|
|
}, {
|
|
name: 'b',
|
|
type: 'line',
|
|
data: []
|
|
}, {
|
|
name: 'c',
|
|
type: 'line',
|
|
data: []
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['x','y','z']
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['a', 'b', 'c'],
|
|
left: 'right',
|
|
orient: 'vertical',
|
|
height: 50,
|
|
align: 'right'
|
|
}
|
|
}
|
|
}]
|
|
}, {
|
|
name: 'padding',
|
|
cases: [{
|
|
name: 'should display padding at 5px by default',
|
|
test: 'equalOption',
|
|
option1: {
|
|
series: [{
|
|
name: 'a',
|
|
type: 'bar',
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['x','y','z']
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['a'],
|
|
backgroundColor: 'yellow'
|
|
}
|
|
},
|
|
option2: {
|
|
series: [{
|
|
name: 'a',
|
|
type: 'bar',
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['x','y','z']
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['a'],
|
|
padding: 5,
|
|
backgroundColor: 'yellow'
|
|
}
|
|
}
|
|
}, {
|
|
name: 'should display padding with two values',
|
|
test: 'equalOption',
|
|
option1: {
|
|
series: [{
|
|
name: 'a',
|
|
type: 'bar',
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['x','y','z']
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['a'],
|
|
padding: [5, 10],
|
|
backgroundColor: 'yellow'
|
|
}
|
|
},
|
|
option2: {
|
|
series: [{
|
|
name: 'a',
|
|
type: 'bar',
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['x','y','z']
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['a'],
|
|
padding: [5, 10, 5, 10],
|
|
backgroundColor: 'yellow'
|
|
}
|
|
}
|
|
}]
|
|
}, {
|
|
name: 'itemGap',
|
|
cases: [{
|
|
name: 'should display itemGap at 10 by default',
|
|
test: 'equalOption',
|
|
option1: {
|
|
series: [{
|
|
name: 'a',
|
|
type: 'bar',
|
|
}, {
|
|
name: 'b',
|
|
type: 'bar',
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['x','y','z']
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['a', 'b'],
|
|
backgroundColor: 'yellow'
|
|
}
|
|
},
|
|
option2: {
|
|
series: [{
|
|
name: 'a',
|
|
type: 'bar',
|
|
}, {
|
|
name: 'b',
|
|
type: 'bar',
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['x','y','z']
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['a', 'b'],
|
|
itemGap: 10,
|
|
backgroundColor: 'yellow'
|
|
}
|
|
}
|
|
}]
|
|
}, {
|
|
name: 'itemGap',
|
|
cases: [{
|
|
name: 'should display larger itemGap',
|
|
test: 'notEqualOption',
|
|
option1: {
|
|
series: [{
|
|
name: 'a',
|
|
type: 'bar',
|
|
}, {
|
|
name: 'b',
|
|
type: 'bar',
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['x','y','z']
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['a', 'b'],
|
|
backgroundColor: 'yellow'
|
|
}
|
|
},
|
|
option2: {
|
|
series: [{
|
|
name: 'a',
|
|
type: 'bar',
|
|
}, {
|
|
name: 'b',
|
|
type: 'bar',
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['x','y','z']
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['a', 'b'],
|
|
itemGap: 100,
|
|
backgroundColor: 'yellow'
|
|
}
|
|
}
|
|
}]
|
|
}, {
|
|
name: 'itemGap',
|
|
cases: [{
|
|
name: 'should display larger itemGap into another line',
|
|
test: 'notEqualOption',
|
|
option1: {
|
|
series: [{
|
|
name: 'a',
|
|
type: 'bar',
|
|
}, {
|
|
name: 'b',
|
|
type: 'bar',
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['x','y','z']
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['a', 'b'],
|
|
itemGap: 350,
|
|
backgroundColor: 'yellow'
|
|
}
|
|
},
|
|
option2: {
|
|
series: [{
|
|
name: 'a',
|
|
type: 'bar',
|
|
}, {
|
|
name: 'b',
|
|
type: 'bar',
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['x','y','z']
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['a', 'b'],
|
|
backgroundColor: 'yellow'
|
|
}
|
|
}
|
|
}]
|
|
}, {
|
|
name: 'itemWidth',
|
|
cases: [{
|
|
name: 'should have default value of 25',
|
|
test: 'equalOption',
|
|
option1: {
|
|
series: [{
|
|
name: 'a',
|
|
type: 'bar',
|
|
}, {
|
|
name: 'b',
|
|
type: 'bar',
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: []
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['a', 'b'],
|
|
backgroundColor: 'yellow'
|
|
}
|
|
},
|
|
option2: {
|
|
series: [{
|
|
name: 'a',
|
|
type: 'bar',
|
|
}, {
|
|
name: 'b',
|
|
type: 'bar',
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: []
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['a', 'b'],
|
|
backgroundColor: 'yellow',
|
|
itemWidth: 25
|
|
}
|
|
}
|
|
}, {
|
|
name: 'should have larger itemWidth',
|
|
cases: (function() {
|
|
var types = ['bar', 'line', 'scatter', 'effectScatter',
|
|
'radar'];
|
|
var res = [];
|
|
for (var i = 0; i < types.length; ++i) {
|
|
res.push({
|
|
name: types[i],
|
|
option: {
|
|
series: [{
|
|
name: 'a',
|
|
type: types[i],
|
|
}, {
|
|
name: 'b',
|
|
type: types[i],
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: []
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['a', 'b'],
|
|
backgroundColor: 'yellow',
|
|
itemWidth: 50
|
|
}
|
|
}
|
|
});
|
|
}
|
|
res.push({
|
|
name: 'pie',
|
|
option: {
|
|
series: [{
|
|
type: 'pie',
|
|
data: [{
|
|
name: 'a'
|
|
}, {
|
|
name: 'b'
|
|
}, {
|
|
name: 'c'
|
|
}]
|
|
}],
|
|
legend: {
|
|
data: ['a', 'b', 'c'],
|
|
backgroundColor: 'yellow',
|
|
itemWidth: 50
|
|
}
|
|
}
|
|
})
|
|
return res;
|
|
})()
|
|
}]
|
|
}, {
|
|
name: 'itemHeight',
|
|
cases: [{
|
|
name: 'should have default value of 14',
|
|
test: 'equalOption',
|
|
option1: {
|
|
series: [{
|
|
name: 'a',
|
|
type: 'bar',
|
|
}, {
|
|
name: 'b',
|
|
type: 'bar',
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: []
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['a', 'b'],
|
|
backgroundColor: 'yellow'
|
|
}
|
|
},
|
|
option2: {
|
|
series: [{
|
|
name: 'a',
|
|
type: 'bar',
|
|
}, {
|
|
name: 'b',
|
|
type: 'bar',
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: []
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['a', 'b'],
|
|
backgroundColor: 'yellow',
|
|
itemHeight: 14
|
|
}
|
|
}
|
|
}, {
|
|
name: 'should have larger itemHeight',
|
|
cases: (function() {
|
|
var types = ['bar', 'line', 'scatter', 'effectScatter',
|
|
'radar'];
|
|
var res = [];
|
|
for (var i = 0; i < types.length; ++i) {
|
|
res.push({
|
|
name: types[i],
|
|
option: {
|
|
series: [{
|
|
name: 'a',
|
|
type: types[i],
|
|
}, {
|
|
name: 'b',
|
|
type: types[i],
|
|
}],
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: []
|
|
}],
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
legend: {
|
|
data: ['a', 'b'],
|
|
backgroundColor: 'yellow',
|
|
itemHeight: 30
|
|
}
|
|
}
|
|
});
|
|
}
|
|
res.push({
|
|
name: 'pie',
|
|
option: {
|
|
series: [{
|
|
type: 'pie',
|
|
data: [{
|
|
name: 'a'
|
|
}, {
|
|
name: 'b'
|
|
}, {
|
|
name: 'c'
|
|
}]
|
|
}],
|
|
legend: {
|
|
data: ['a', 'b', 'c'],
|
|
backgroundColor: 'yellow',
|
|
itemHeight: 30
|
|
}
|
|
}
|
|
})
|
|
return res;
|
|
})()
|
|
}]
|
|
}, {
|
|
name: 'formatter',
|
|
cases: [{
|
|
name: 'should have default value as null',
|
|
test: 'equalOption',
|
|
option1: {
|
|
series: [{
|
|
name: 'abc',
|
|
type: 'pie',
|
|
data: []
|
|
}],
|
|
legend: {
|
|
data: ['abc']
|
|
}
|
|
},
|
|
option2: {
|
|
series: [{
|
|
name: 'abc',
|
|
type: 'pie',
|
|
data: []
|
|
}],
|
|
legend: {
|
|
data: ['abc'],
|
|
formatter: null
|
|
}
|
|
}
|
|
}, {
|
|
name: 'should work with string formatter',
|
|
option: {
|
|
series: [{
|
|
name: 'abc',
|
|
type: 'pie',
|
|
data: []
|
|
}],
|
|
legend: {
|
|
data: ['abc'],
|
|
formatter: '{name} series'
|
|
}
|
|
}
|
|
}, {
|
|
name: 'should work with callback formatter',
|
|
test: 'equalOption',
|
|
option1: {
|
|
series: [{
|
|
name: 'abc',
|
|
type: 'pie',
|
|
data: []
|
|
}],
|
|
legend: {
|
|
data: ['abc'],
|
|
formatter: function(name) {
|
|
return name + ' series';
|
|
}
|
|
}
|
|
},
|
|
option2: {
|
|
series: [{
|
|
name: 'abc',
|
|
type: 'pie',
|
|
data: []
|
|
}],
|
|
legend: {
|
|
data: ['abc'],
|
|
formatter: '{name} series'
|
|
}
|
|
}
|
|
}]
|
|
}, {
|
|
name: 'inactiveColor',
|
|
cases: [{
|
|
name: 'should have default value as #ccc',
|
|
test: 'equalOption',
|
|
option1: {
|
|
series: [{
|
|
name: 'a',
|
|
type: 'pie',
|
|
data: []
|
|
}],
|
|
legend: {
|
|
data: ['a'],
|
|
selected: {
|
|
a: false
|
|
}
|
|
}
|
|
},
|
|
option2: {
|
|
series: [{
|
|
name: 'a',
|
|
type: 'pie',
|
|
data: []
|
|
}],
|
|
legend: {
|
|
data: ['a'],
|
|
selected: {
|
|
a: false
|
|
},
|
|
inactiveColor: '#ccc'
|
|
}
|
|
}
|
|
}, {
|
|
name: 'can be changed to other color',
|
|
option: {
|
|
series: [{
|
|
name: 'a',
|
|
type: 'pie',
|
|
data: []
|
|
}],
|
|
legend: {
|
|
data: ['a'],
|
|
selected: {
|
|
a: false
|
|
},
|
|
inactiveColor: '#f00'
|
|
}
|
|
}
|
|
}]
|
|
}, {
|
|
name: 'selected',
|
|
cases: [{
|
|
name: 'should select all by default',
|
|
test: 'equalOption',
|
|
option1: {
|
|
series: [{
|
|
type: 'pie',
|
|
data: [{
|
|
name: 'a'
|
|
}, {
|
|
name: 'b'
|
|
}, {
|
|
name: 'c'
|
|
}]
|
|
}],
|
|
legend: {
|
|
data: ['a', 'b', 'c']
|
|
}
|
|
},
|
|
option2: {
|
|
series: [{
|
|
type: 'pie',
|
|
data: [{
|
|
name: 'a'
|
|
}, {
|
|
name: 'b'
|
|
}, {
|
|
name: 'c'
|
|
}]
|
|
}],
|
|
legend: {
|
|
data: ['a', 'b', 'c'],
|
|
selected: {
|
|
a: true,
|
|
b: true,
|
|
c: true
|
|
}
|
|
}
|
|
}
|
|
}, {
|
|
name: 'should hide when selected is set to be false',
|
|
test: 'notEqualOption',
|
|
option1: {
|
|
series: [{
|
|
type: 'pie',
|
|
data: [{
|
|
name: 'a'
|
|
}, {
|
|
name: 'b'
|
|
}, {
|
|
name: 'c'
|
|
}]
|
|
}],
|
|
legend: {
|
|
data: ['a', 'b', 'c'],
|
|
selected: {
|
|
a: false,
|
|
b: true,
|
|
c: true
|
|
}
|
|
}
|
|
},
|
|
option2: {
|
|
series: [{
|
|
type: 'pie',
|
|
data: [{
|
|
name: 'a'
|
|
}, {
|
|
name: 'b'
|
|
}, {
|
|
name: 'c'
|
|
}]
|
|
}],
|
|
legend: {
|
|
data: ['a', 'b', 'c'],
|
|
selected: {
|
|
a: true,
|
|
b: true,
|
|
c: true
|
|
}
|
|
}
|
|
}
|
|
}]
|
|
}];
|
|
|
|
uiHelper.testOptionSpec('legend', suites, false);
|
|
|
|
});
|