1194 lines
47 KiB
HTML
Generated
1194 lines
47 KiB
HTML
Generated
<!DOCTYPE html>
|
|
<!--
|
|
Licensed to the Apache Software Foundation (ASF) under one
|
|
or more contributor license agreements. See the NOTICE file
|
|
distributed with this work for additional information
|
|
regarding copyright ownership. The ASF licenses this file
|
|
to you under the Apache License, Version 2.0 (the
|
|
"License"); you may not use this file except in compliance
|
|
with the License. You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing,
|
|
software distributed under the License is distributed on an
|
|
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
|
KIND, either express or implied. See the License for the
|
|
specific language governing permissions and limitations
|
|
under the License.
|
|
-->
|
|
|
|
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<script src="lib/simpleRequire.js"></script>
|
|
<script src="lib/config.js"></script>
|
|
<script src="lib/jquery.min.js"></script>
|
|
<script src="lib/facePrint.js"></script>
|
|
<script src="lib/testHelper.js"></script>
|
|
<script src="lib/canteen.js"></script>
|
|
<link rel="stylesheet" href="lib/reset.css" />
|
|
</head>
|
|
<body>
|
|
<style>
|
|
</style>
|
|
|
|
|
|
<div id="Legacy_compat_test"></div>
|
|
<div id="insideFill_Stroke_auto_test"></div>
|
|
<div id="textConfig_other_feature_test"></div>
|
|
<div id="insideFill_Stroke_hover_test"></div>
|
|
<div id="z_order_test"></div>
|
|
<div id="hover_style_disable"></div>
|
|
<div id="hover_style_remove"></div>
|
|
|
|
|
|
<!-- Utils ----------------------------------------------- -->
|
|
<script>
|
|
function createMaker(opt) {
|
|
opt = opt || {};
|
|
var xStart = opt.xCurr || 80;
|
|
var xCurr = xStart;
|
|
var yStart = opt.yCurr || 20;
|
|
var yCurr = yStart;
|
|
var xStep = opt.xStep || 100;
|
|
var yStep = opt.yStep || 65;
|
|
var colCount = 0;
|
|
var yMax = 0;
|
|
var maxCol = opt.maxCol || Infinity;
|
|
var children = [];
|
|
|
|
function createRectShape(width, height) {
|
|
width = width || 20;
|
|
height = height || 30;
|
|
return {x: -width / 2, y: 0, width: width, height: height};
|
|
}
|
|
|
|
function makeGraphic(text, creators) {
|
|
var y = yCurr;
|
|
children.push({
|
|
type: 'text', x: xCurr, y: y,
|
|
style: {text: text, fill: '#900', align: 'center', fontSize: 10}
|
|
});
|
|
y += yStep;
|
|
for (var i = 0; i < creators.length; i++) {
|
|
children.push(creators[i](xCurr, y));
|
|
y += yStep;
|
|
}
|
|
xCurr += xStep;
|
|
|
|
yMax = Math.max(y, yMax);
|
|
|
|
colCount++;
|
|
if (colCount >= maxCol) {
|
|
colCount = 0;
|
|
xCurr = xStart;
|
|
yCurr = yMax + yStep * 0.7;
|
|
}
|
|
}
|
|
|
|
return {
|
|
makeGraphic: makeGraphic,
|
|
createRectShape: createRectShape,
|
|
children: children
|
|
};
|
|
}
|
|
|
|
// opt: {globalColor, backgroundColor}
|
|
function createOption(renderItem, opt) {
|
|
return {
|
|
animation: false,
|
|
backgroundColor: opt && opt.backgroundColor,
|
|
color: opt && opt.globalColor,
|
|
xAxis: {axisLine: {lineStyle: {color: 'rgba(0,0,0,0.2)'}}, axisLabel: {show: false}, splitLine: {show: false}},
|
|
yAxis: {axisLine: {lineStyle: {color: 'rgba(0,0,0,0.2)'}}, axisLabel: {show: false}, splitLine: {show: false}},
|
|
grid: {left: 30},
|
|
series: {
|
|
type: 'custom',
|
|
renderItem: renderItem,
|
|
data: [[1, 1]]
|
|
}
|
|
};
|
|
}
|
|
</script>
|
|
<!-- --------------------------------------------------- -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
|
|
function renderItem(params, api) {
|
|
var maker = createMaker({xStep: 120, yStep: 60, maxCol: 5});
|
|
var makeGraphic = maker.makeGraphic;
|
|
var createRectShape = maker.createRectShape;
|
|
|
|
makeGraphic([
|
|
'normal: green rect', 'inside orange'
|
|
].join('\n'), [
|
|
function (x, y) {
|
|
return {
|
|
type: 'rect', position: [x, y], shape: createRectShape(),
|
|
style: {
|
|
// textPosition not set but by default 'inside'
|
|
text: 'legacy1', fill: 'green', textFill: 'orange'
|
|
}
|
|
};
|
|
},
|
|
function (x, y) {
|
|
return {
|
|
type: 'rect', x: x, y: y, shape: createRectShape(),
|
|
style: {fill: 'green'},
|
|
textContent: {style: {text: 'ec5_api', fill: 'orange'}},
|
|
textConfig: {position: 'inside'}
|
|
};
|
|
}
|
|
]);
|
|
|
|
makeGraphic([
|
|
'normal: green rect', 'inside orange', 'text is number 0', 'should be displayed'
|
|
].join('\n'), [
|
|
function (x, y) {
|
|
return {
|
|
type: 'rect', position: [x, y], shape: createRectShape(),
|
|
style: {
|
|
// text is number 0, can be displayed
|
|
text: 0, fill: 'green', textFill: 'orange'
|
|
}
|
|
};
|
|
},
|
|
function (x, y) {
|
|
return {
|
|
type: 'rect', x: x, y: y, shape: createRectShape(),
|
|
style: {fill: 'green'},
|
|
textContent: {style: {text: 0, fill: 'orange'}},
|
|
textConfig: {position: 'inside'}
|
|
};
|
|
}
|
|
]);
|
|
|
|
makeGraphic([
|
|
'normal: green rect', 'inside white/bordered', 'hover: red rect', 'inside white/bordered'
|
|
].join('\n'), [
|
|
function (x, y) {
|
|
return {
|
|
type: 'rect', position: [x, y], shape: createRectShape(),
|
|
style: api.style({text: 'legacy0'}),
|
|
styleEmphasis: {fill: 'red'}
|
|
};
|
|
},
|
|
function (x, y) {
|
|
return {
|
|
type: 'rect', position: [x, y], shape: createRectShape(),
|
|
style: {
|
|
text: 'legacy1', fill: 'green', textPosition: 'inside',
|
|
textFill: '#fff', textStroke: 'green', textStrokeWidth: 2
|
|
},
|
|
styleEmphasis: {fill: 'red'}
|
|
};
|
|
},
|
|
function (x, y) {
|
|
return {
|
|
type: 'rect', x: x, y: y, shape: createRectShape(),
|
|
style: {fill: 'green'},
|
|
textContent: {style: {text: 'ec5_api'}},
|
|
textConfig: {position: 'inside'},
|
|
emphasis: {style: {fill: 'red'}}
|
|
};
|
|
}
|
|
]);
|
|
|
|
makeGraphic([
|
|
'normal: green rect', 'bottom green', 'hover: red rect', 'bottom green'
|
|
].join('\n'), [
|
|
function (x, y) {
|
|
return {
|
|
type: 'rect', position: [x, y], shape: createRectShape(),
|
|
style: api.style({text: 'legacy0', textPosition: 'bottom'}),
|
|
styleEmphasis: {fill: 'red'}
|
|
};
|
|
},
|
|
function (x, y) {
|
|
return {
|
|
type: 'rect', x: x, y: y, shape: createRectShape(),
|
|
style: {fill: 'green'},
|
|
textContent: {style: {text: 'ec5_api'}},
|
|
textConfig: {position: 'bottom', outsideFill: 'green'},
|
|
emphasis: {style: {fill: 'red'}}
|
|
};
|
|
}
|
|
]);
|
|
|
|
makeGraphic([
|
|
'green rect', 'normal: inside white/bordered', 'hover: inside red'
|
|
].join('\n'), [
|
|
function (x, y) {
|
|
return {
|
|
type: 'rect', position: [x, y], shape: createRectShape(),
|
|
style: api.style({text: 'legacy0'}),
|
|
styleEmphasis: {textFill: 'red'}
|
|
};
|
|
},
|
|
function (x, y) {
|
|
return {
|
|
type: 'rect', position: [x, y], shape: createRectShape(),
|
|
style: {
|
|
text: 'legacy1', fill: 'green', textPosition: 'inside',
|
|
textFill: '#fff', textStroke: 'green', textStrokeWidth: 2
|
|
},
|
|
styleEmphasis: {textFill: 'red'}
|
|
};
|
|
},
|
|
function (x, y) {
|
|
return {
|
|
type: 'rect', x: x, y: y, shape: createRectShape(),
|
|
style: {fill: 'green'},
|
|
textContent: {
|
|
style: {text: 'ec5_api'},
|
|
emphasis: {style: {fill: 'red', stroke: 'green', lineWidth: 2}}
|
|
},
|
|
textConfig: {position: 'inside'}
|
|
};
|
|
}
|
|
]);
|
|
|
|
makeGraphic([
|
|
'green rect', 'normal: bottom red', 'hover: bottom blue'
|
|
].join('\n'), [
|
|
function (x, y) {
|
|
return {
|
|
type: 'rect', position: [x, y], shape: createRectShape(),
|
|
style: api.style({text: 'legacy0', textPosition: 'bottom', textFill: 'red'}),
|
|
styleEmphasis: {textFill: 'blue'}
|
|
};
|
|
},
|
|
function (x, y) {
|
|
return {
|
|
type: 'rect', x: x, y: y, shape: createRectShape(),
|
|
style: {fill: 'green'},
|
|
textContent: {
|
|
style: {text: 'ec5_api', fill: 'red'},
|
|
emphasis: {style: {fill: 'blue'}}
|
|
},
|
|
textConfig: {position: 'bottom'}
|
|
};
|
|
}
|
|
]);
|
|
|
|
makeGraphic(['green rect', 'normal: inside white/borded', 'hover: bottom'].join('\n'), [
|
|
function (x, y) {
|
|
return {
|
|
type: 'rect', position: [x, y], shape: createRectShape(),
|
|
style: api.style({text: 'legacy0'}),
|
|
// Hover not compat to ec4 (to complicated)
|
|
styleEmphasis: {textPosition: 'bottom'}
|
|
};
|
|
}
|
|
]);
|
|
|
|
makeGraphic(['green rect', 'normal: inside red', 'hover: bottom red'].join('\n'), [
|
|
function (x, y) {
|
|
return {
|
|
type: 'rect', position: [x, y], shape: createRectShape(),
|
|
style: api.style({text: 'legacy0', textFill: 'red'}),
|
|
styleEmphasis: {textPosition: 'bottom'}
|
|
};
|
|
}
|
|
]);
|
|
|
|
makeGraphic(['green rect', 'normal: inside white', 'hover: bottom red'].join('\n'), [
|
|
function (x, y) {
|
|
return {
|
|
type: 'rect', position: [x, y], shape: createRectShape(),
|
|
style: api.style({text: 'legacy0', textFill: 'white'}),
|
|
styleEmphasis: {textFill: 'red', textPosition: 'bottom'}
|
|
};
|
|
}
|
|
]);
|
|
|
|
makeGraphic(['green rect', 'normal: inside white/bordered', 'hover: auto lift'].join('\n'), [
|
|
function (x, y) {
|
|
return {
|
|
type: 'rect', position: [x, y], shape: createRectShape(),
|
|
style: api.style({text: 'legacy0'})
|
|
};
|
|
},
|
|
function (x, y) {
|
|
return {
|
|
type: 'rect', x: x, y: y, shape: createRectShape(),
|
|
style: {fill: 'green'},
|
|
textContent: {style: {text: 'ec5_api'}},
|
|
textConfig: {position: 'inside'}
|
|
};
|
|
}
|
|
]);
|
|
|
|
makeGraphic(['green rect', 'normal: bottom green', 'hover: auto lift'].join('\n'), [
|
|
function (x, y) {
|
|
return {
|
|
type: 'rect', position: [x, y], shape: createRectShape(),
|
|
style: api.style({text: 'legacy0', textPosition: 'bottom'})
|
|
};
|
|
},
|
|
function (x, y) {
|
|
return {
|
|
type: 'rect', x: x, y: y, shape: createRectShape(),
|
|
style: {fill: 'green'},
|
|
textContent: {style: {text: 'ec5_api', fill: 'green'}},
|
|
textConfig: {position: 'bottom'}
|
|
};
|
|
}
|
|
]);
|
|
|
|
return {
|
|
type: 'group',
|
|
children: maker.children
|
|
};
|
|
}
|
|
|
|
var chart = testHelper.create(echarts, 'Legacy_compat_test', {
|
|
title: [
|
|
'Legacy compat test',
|
|
'Each column rects are the same effect implemented by',
|
|
'legacy API and corresponding new API.',
|
|
'So **each column** must be **the same result**',
|
|
'(except text string and some ec5 enhancement).',
|
|
'**Hover** also needs to be tested'
|
|
],
|
|
height: 550,
|
|
option: createOption(renderItem, {globalColor: ['green']})
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
function renderItem() {
|
|
var maker = createMaker({maxCol: 5});
|
|
var makeGraphic = maker.makeGraphic;
|
|
var createRectShape = maker.createRectShape;
|
|
|
|
// opt for example:
|
|
// opt.type
|
|
// opt.shape
|
|
// opt.textConfig: {},
|
|
// opt.textContent: {}, if rich: textContent.style: {rich: {i: xxx}}
|
|
// opt.emphasis: {}
|
|
// opt.extraTitle: string[]
|
|
function makeTest(opt) {
|
|
var isRich = opt.textContent.style.rich;
|
|
var type = opt.type || 'rect';
|
|
var shape = opt.shape || createRectShape(40, 120);
|
|
var title = ['green rect', (isRich ? 'rich text' : 'plain text')];
|
|
opt.extraTitle && (title = title.concat(opt.extraTitle));
|
|
makeGraphic(title.join('\n'), [
|
|
function (x, y) {
|
|
var result = {
|
|
type: type, x: x, y: y, shape: shape, style: {fill: 'green'},
|
|
textConfig: opt.textConfig,
|
|
textContent: opt.textContent
|
|
}
|
|
if (opt.emphasis) {
|
|
result.emphasis = opt.emphasis;
|
|
}
|
|
return result;
|
|
}
|
|
]);
|
|
}
|
|
|
|
makeTest({
|
|
textConfig: {position: 'insideTop', rotation: -0.5 * Math.PI},
|
|
textContent: {style: {
|
|
text: '90 rotated text align with:\nv: top h: middle\ndefault distance',
|
|
align: 'left', verticalAlign: 'middle'
|
|
}}
|
|
});
|
|
|
|
makeTest({
|
|
textConfig: {position: 'insideTop', rotation: -0.5 * Math.PI, distance: 0},
|
|
textContent: {style: {
|
|
text: '90 rotated text align with:\n v: top h: middle\nno distance',
|
|
align: 'left', verticalAlign: 'middle'
|
|
}}
|
|
});
|
|
|
|
makeTest({
|
|
textConfig: {position: 'insideTop', rotation: -0.5 * Math.PI, distance: 0, offset: [0, -25]},
|
|
textContent: {style: {
|
|
text: '90 rotated text outside right rect\nalign top',
|
|
fill: '#700',
|
|
align: 'left', verticalAlign: 'bottom'
|
|
}}
|
|
});
|
|
|
|
makeTest({
|
|
textConfig: {position: 'insideTop', rotation: -0.5 * Math.PI},
|
|
textContent: {style: {
|
|
text: '90 rotated text align with:\n{i|v: top h: middle}\n{a|align right}',
|
|
align: 'left', verticalAlign: 'middle',
|
|
rich: {
|
|
i: {fontSize: 20, fill: 'orange'},
|
|
a: {align: 'right'}
|
|
}
|
|
}}
|
|
});
|
|
|
|
makeTest({
|
|
extraTitle: ['emphasis:\nalign/verticalAlign rollback'],
|
|
textConfig: {position: 'left'},
|
|
textContent: {
|
|
style: {
|
|
text: '--------\nalign\nright\n----',
|
|
fill: '#700'
|
|
}
|
|
},
|
|
emphasis: {
|
|
textConfig: {position: null}
|
|
}
|
|
});
|
|
|
|
makeTest({
|
|
type: 'circle',
|
|
shape: {cx: 0, cy: 20, r: 30},
|
|
textConfig: {
|
|
position: 'right',
|
|
},
|
|
textContent: {
|
|
rotation: -0.3 * Math.PI,
|
|
originX: -35,
|
|
style: {
|
|
text: 'Rotate, outside, origin is center',
|
|
fontSize: 20,
|
|
fill: '#700',
|
|
align: 'left',
|
|
verticalAlign: 'middle'
|
|
}
|
|
}
|
|
});
|
|
|
|
makeTest({
|
|
type: 'circle',
|
|
shape: {cx: 0, cy: 20, r: 30},
|
|
textConfig: {
|
|
position: 'inside', offset: [35, 0]
|
|
},
|
|
textContent: {
|
|
rotation: -0.3 * Math.PI,
|
|
style: {
|
|
text: 'Rotate, outside, origin is center',
|
|
fontSize: 20,
|
|
fill: '#700',
|
|
align: 'left',
|
|
verticalAlign: 'middle'
|
|
}
|
|
}
|
|
});
|
|
|
|
return {
|
|
type: 'group',
|
|
children: maker.children
|
|
};
|
|
}
|
|
|
|
var chart = testHelper.create(echarts, 'textConfig_other_feature_test', {
|
|
title: [
|
|
'textConfig other feature test'
|
|
],
|
|
option: createOption(renderItem),
|
|
// recordCanvas: true,
|
|
height: 800
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
function renderItem() {
|
|
var maker = createMaker({maxCol: 6});
|
|
var makeGraphic = maker.makeGraphic;
|
|
var createRectShape = maker.createRectShape;
|
|
|
|
// opt for example:
|
|
// opt.textConfig: {},
|
|
// opt.textContentStyle: {}, if rich: textContentStyle: {rich: {i: xxx}}
|
|
// opt.expect: [ {fill: 'white', stroke: 'green'}, {fill: 'white', stroke: 'green'} ]
|
|
function makeTest(opt) {
|
|
var expect0 = opt.expect[0];
|
|
var expect1 = opt.expect[1];
|
|
var isRich = opt.textContentStyle.rich;
|
|
makeGraphic(['green rect', (isRich ? 'rich text' : 'plain text')].join('\n'), [
|
|
function (x, y) {
|
|
var text = [
|
|
isRich ? '{i|inside}' : 'inside',
|
|
'fill: ' + expect0.fill,
|
|
'stroke: ' + expect0.stroke
|
|
].join('\n');
|
|
return {
|
|
type: 'rect', x: x, y: y, shape: createRectShape(), style: {fill: 'green'},
|
|
textConfig: echarts.util.extend({position: 'inside'}, opt.textConfig),
|
|
textContent: {
|
|
style: echarts.util.extend({text: text}, opt.textContentStyle)
|
|
}
|
|
}
|
|
},
|
|
function (x, y) {
|
|
var text = [
|
|
isRich ? '{i|bottom}' : 'bottom',
|
|
'fill: ' + expect1.fill,
|
|
'stroke: ' + expect1.stroke
|
|
].join('\n');
|
|
return {
|
|
type: 'rect', x: x, y: y, shape: createRectShape(), style: {fill: 'green'},
|
|
textConfig: echarts.util.extend({position: 'bottom'}, opt.textConfig),
|
|
textContent: {
|
|
style: echarts.util.extend({text: text}, opt.textContentStyle)
|
|
}
|
|
}
|
|
}
|
|
]);
|
|
}
|
|
|
|
makeTest({
|
|
textConfig: {},
|
|
textContentStyle: {},
|
|
expect: [
|
|
{fill: 'white', stroke: 'green'},
|
|
{fill: 'black', stroke: 'none'}
|
|
]
|
|
});
|
|
|
|
makeTest({
|
|
textConfig: {},
|
|
textContentStyle: {backgroundColor: '#aaa'},
|
|
expect: [
|
|
{fill: 'white', stroke: 'none'},
|
|
{fill: 'black', stroke: 'none'}
|
|
]
|
|
});
|
|
|
|
makeTest({
|
|
textConfig: {},
|
|
textContentStyle: {borderColor: '#aaa', borderWidth: 2, padding: 5},
|
|
expect: [
|
|
{fill: 'white', stroke: 'none'},
|
|
{fill: 'black', stroke: 'none'}
|
|
]
|
|
});
|
|
|
|
makeTest({
|
|
textConfig: {},
|
|
textContentStyle: {rich: {i: {fontSize: 30}}},
|
|
expect: [
|
|
{fill: 'white', stroke: 'green'},
|
|
{fill: 'black', stroke: 'none'}
|
|
]
|
|
});
|
|
|
|
makeTest({
|
|
textConfig: {},
|
|
textContentStyle: {rich: {i: {backgroundColor: '#aaa'}}},
|
|
expect: [
|
|
{fill: 'white', stroke: 'none'},
|
|
{fill: 'black', stroke: 'none'}
|
|
]
|
|
});
|
|
|
|
makeTest({
|
|
textConfig: {},
|
|
textContentStyle: {rich: {i: {borderColor: '#aaa', borderWidth: 2, fontSize: 20}}},
|
|
expect: [
|
|
{fill: 'white', stroke: 'none'},
|
|
{fill: 'black', stroke: 'green'}
|
|
]
|
|
});
|
|
|
|
makeTest({
|
|
textConfig: {},
|
|
textContentStyle: {fill: 'orange'},
|
|
expect: [
|
|
{fill: 'orange', stroke: 'none'},
|
|
{fill: 'orange', stroke: 'none'}
|
|
]
|
|
});
|
|
|
|
makeTest({
|
|
textConfig: {},
|
|
textContentStyle: {fill: 'orange', stroke: 'blue', lineWidth: 2},
|
|
expect: [
|
|
{fill: 'orange', stroke: 'blue'},
|
|
{fill: 'orange', stroke: 'blue'}
|
|
]
|
|
});
|
|
|
|
makeTest({
|
|
textConfig: {},
|
|
textContentStyle: {stroke: 'blue', lineWidth: 2},
|
|
expect: [
|
|
{fill: 'white', stroke: 'blue'},
|
|
{fill: 'black', stroke: 'blue'}
|
|
]
|
|
});
|
|
|
|
makeTest({
|
|
textConfig: {insideFill: 'yellow'},
|
|
textContentStyle: {},
|
|
expect: [
|
|
{fill: 'yellow', stroke: 'green'},
|
|
{fill: 'black', stroke: 'none'}
|
|
]
|
|
});
|
|
|
|
makeTest({
|
|
textConfig: {insideFill: 'yellow'},
|
|
textContentStyle: {fill: 'orange'},
|
|
expect: [
|
|
{fill: 'orange', stroke: 'none'},
|
|
{fill: 'orange', stroke: 'none'}
|
|
]
|
|
});
|
|
|
|
makeTest({
|
|
textConfig: {insideFill: 'yellow', insideStroke: 'blue'},
|
|
textContentStyle: {},
|
|
expect: [
|
|
{fill: 'yellow', stroke: 'blue'},
|
|
{fill: 'black', stroke: 'none'}
|
|
]
|
|
});
|
|
|
|
makeTest({
|
|
textConfig: {insideFill: 'yellow', insideStroke: 'blue'},
|
|
textContentStyle: {fill: 'pink'},
|
|
expect: [
|
|
{fill: 'pink', stroke: 'blue'},
|
|
{fill: 'pink', stroke: 'none'}
|
|
]
|
|
});
|
|
|
|
makeTest({
|
|
textConfig: {insideStroke: 'blue'},
|
|
textContentStyle: {},
|
|
expect: [
|
|
{fill: 'white', stroke: 'blue'},
|
|
{fill: 'black', stroke: 'none'}
|
|
]
|
|
});
|
|
|
|
makeTest({
|
|
textConfig: {outsideFill: 'blue', outsideStroke: 'red'},
|
|
textContentStyle: {},
|
|
expect: [
|
|
{fill: 'white', stroke: 'green'},
|
|
{fill: 'blue', stroke: 'red'}
|
|
]
|
|
});
|
|
makeTest({
|
|
textConfig: {outsideFill: 'blue', outsideStroke: 'red'},
|
|
textContentStyle: {fill: 'pink'},
|
|
expect: [
|
|
{fill: 'pink', stroke: 'none'},
|
|
{fill: 'pink', stroke: 'red'}
|
|
]
|
|
});
|
|
|
|
return {
|
|
type: 'group',
|
|
children: maker.children
|
|
};
|
|
}
|
|
|
|
var chart = testHelper.create(echarts, 'insideFill_Stroke_auto_test', {
|
|
title: [
|
|
'insideFill/insideStroke outsideFill/outsideStroke auto rule test'
|
|
],
|
|
option: createOption(renderItem, {backgroundColor: '#ddd'}),
|
|
height: 800
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
|
|
function renderItem(params, api) {
|
|
var maker = createMaker({xCurr: 150, xStep: 150, yStep: 90});
|
|
var makeGraphic = maker.makeGraphic;
|
|
var createRectShape = maker.createRectShape;
|
|
|
|
makeGraphic(['insideFill/Stroke not set', 'normal: white/bordered'].join('\n'), [
|
|
function (x, y) {
|
|
return {
|
|
type: 'rect', x: x, y: y, shape: createRectShape(),
|
|
style: {fill: 'green'},
|
|
textContent: {
|
|
type: 'text', silent: true, style: {
|
|
text: 'if hover,\ntop black'
|
|
}
|
|
},
|
|
textConfig: {position: 'inside'},
|
|
emphasis: {
|
|
textConfig: {position: 'top'}
|
|
}
|
|
};
|
|
},
|
|
function (x, y) {
|
|
return {
|
|
type: 'rect', x: x, y: y, shape: createRectShape(),
|
|
style: {fill: 'green'},
|
|
textContent: {type: 'text', silent: true, style: {text: 'if hover,\nright green'}},
|
|
textConfig: {
|
|
position: 'inside', outsideFill: 'green'
|
|
},
|
|
emphasis: {
|
|
textConfig: {position: 'right'}
|
|
}
|
|
};
|
|
},
|
|
function (x, y) {
|
|
return {
|
|
type: 'rect', x: x, y: y, shape: createRectShape(),
|
|
style: {fill: 'green'},
|
|
textContent: {
|
|
silent: true, style: {text: 'if hover,\nbottom\nlarge bordered red'},
|
|
emphasis: {style: {fontSize: 20}}
|
|
},
|
|
textConfig: {
|
|
position: 'inside', outsideFill: 'green', outsideStroke: 'red'
|
|
},
|
|
emphasis: {
|
|
textConfig: {position: 'bottom'}
|
|
}
|
|
};
|
|
},
|
|
function (x, y) {
|
|
return {
|
|
type: 'rect', x: x, y: y, shape: createRectShape(),
|
|
style: {fill: 'green'},
|
|
textContent: {
|
|
silent: true,
|
|
style: {
|
|
text: 'rich text\nif hover,\nbottom black\n{r|normal orange\nhover red}',
|
|
rich: {r: {fontSize: 16, fill: 'orange'}},
|
|
},
|
|
emphasis: {
|
|
style: {
|
|
rich: {r: {fill: 'red'}}
|
|
}
|
|
}
|
|
},
|
|
textConfig: {position: 'inside'},
|
|
emphasis: {
|
|
textConfig: {position: 'bottom'}
|
|
}
|
|
};
|
|
}
|
|
]);
|
|
|
|
makeGraphic(['green rect'].join('\n'), [
|
|
function (x, y) {
|
|
return {
|
|
type: 'rect', x: x, y: y, shape: createRectShape(),
|
|
style: {fill: 'green'},
|
|
textContent: {silent: true, style: {
|
|
text: 'normal:\ninside yellow/bordered\nhover:\ntop black'
|
|
}},
|
|
textConfig: {position: 'inside', insideFill: 'yellow'},
|
|
emphasis: {
|
|
textConfig: {position: 'top'}
|
|
}
|
|
};
|
|
},
|
|
function (x, y) {
|
|
return {
|
|
type: 'rect', x: x, y: y, shape: createRectShape(),
|
|
style: {fill: 'green'},
|
|
textContent: {
|
|
silent: true,
|
|
style: {text: 'normal:\ninside white/bordered\nhover:\nright green'}
|
|
},
|
|
textConfig: {
|
|
position: 'inside', outsideFill: 'green'
|
|
},
|
|
emphasis: {
|
|
textConfig: {position: 'right'}
|
|
}
|
|
};
|
|
}
|
|
]);
|
|
|
|
return {
|
|
type: 'group',
|
|
children: maker.children
|
|
};
|
|
}
|
|
|
|
var chart = testHelper.create(echarts, 'insideFill_Stroke_hover_test', {
|
|
title: [
|
|
'insideFill/Stroke & hover test. Please **hover any of them**'
|
|
],
|
|
option: createOption(renderItem),
|
|
height: 600
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
|
|
function renderItem(params, api) {
|
|
return {
|
|
type: 'group',
|
|
children: [{
|
|
type: 'circle',
|
|
shape: {cx: 100, cy: 100, r: 50},
|
|
style: {fill: 'red'},
|
|
z2: 100,
|
|
// textContent do not set z2, but auto follow the circle z2.
|
|
textContent: {
|
|
type: 'text',
|
|
style: {
|
|
text: 'normal: {red|red} is over {green|green}.\nHover me',
|
|
// stroke: '#fff', lineWidth: 2,
|
|
rich: {
|
|
red: {fill: 'red', stroke: '#fff', lineWidth: 2, fontSize: 20},
|
|
green: {fill: 'green', stroke: '#fff', lineWidth: 2, fontSize: 20}
|
|
},
|
|
},
|
|
silent: true,
|
|
emphasis: {
|
|
style: {
|
|
text: 'emphasis: {green|green} over {red|red}\nText {below|below} green',
|
|
rich: {
|
|
below: {fontSize: 40}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
textConfig: {
|
|
position: 'inside'
|
|
}
|
|
}, {
|
|
type: 'circle',
|
|
shape: {cx: 100, cy: 140, r: 40},
|
|
style: {fill: 'green'},
|
|
// textContent do not set z2, but auto follow the circle z2.
|
|
textContent: {
|
|
type: 'text',
|
|
style: {
|
|
text: 'text should be always\n{over|over} all circles.',
|
|
rich: {over: {fontSize: 30}}
|
|
},
|
|
silent: true
|
|
},
|
|
textConfig: {
|
|
position: 'inside'
|
|
},
|
|
z2: 80,
|
|
emphasis: {
|
|
z2: 110
|
|
}
|
|
|
|
}, {
|
|
type: 'circle',
|
|
shape: {cx: 300, cy: 100, r: 50},
|
|
style: {fill: 'red'},
|
|
z2: 100,
|
|
// textContent do not set z2, but auto follow the circle z2.
|
|
textContent: {
|
|
type: 'text',
|
|
style: {
|
|
text: 'normal: {red|red} is over {green|green}.\nHover me',
|
|
// stroke: '#fff', lineWidth: 2,
|
|
rich: {
|
|
red: {fill: 'red', stroke: '#fff', lineWidth: 2, fontSize: 20},
|
|
green: {fill: 'green', stroke: '#fff', lineWidth: 2, fontSize: 20}
|
|
},
|
|
},
|
|
silent: true,
|
|
emphasis: {
|
|
style: {
|
|
text: 'emphasis: {red|red} over {green|green}\nText {below|over} green',
|
|
rich: {
|
|
below: {fontSize: 40}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
textConfig: {
|
|
position: 'inside'
|
|
}
|
|
}, {
|
|
type: 'circle',
|
|
shape: {cx: 300, cy: 140, r: 40},
|
|
style: {fill: 'green'},
|
|
// textContent do not set z2, but auto follow the circle z2.
|
|
textContent: {
|
|
type: 'text',
|
|
style: {
|
|
text: 'text should be always\n{over|over} all circles.',
|
|
rich: {over: {fontSize: 30}}
|
|
},
|
|
silent: true,
|
|
emphasis: {
|
|
z2: 110
|
|
}
|
|
},
|
|
textConfig: {
|
|
position: 'inside'
|
|
},
|
|
z2: 80
|
|
|
|
}]
|
|
};
|
|
}
|
|
|
|
var chart = testHelper.create(echarts, 'z_order_test', {
|
|
title: [
|
|
'z order test. Please **hover any of them**.'
|
|
],
|
|
option: createOption(renderItem)
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
|
|
var option = {
|
|
xAxis: {scale: true, min: 0.75, max: 3},
|
|
yAxis: {},
|
|
series: [{
|
|
type: 'custom',
|
|
renderItem: function (params, api) {
|
|
var shape0 = {x: 0, y: 30, width: 100, height: 50};
|
|
var shape1 = {x: 30, y: 50, width: 100, height: 50};
|
|
var shape2 = {x: 60, y: 70, width: 100, height: 50};
|
|
var position = api.coord([api.value(0), api.value(1)]);
|
|
var name = api.value(2);
|
|
|
|
var map = {
|
|
legacy: {
|
|
type: 'group',
|
|
x: position[0],
|
|
y: position[1],
|
|
children: [{
|
|
type: 'rect',
|
|
shape: shape0,
|
|
style: {fill: '#333'}
|
|
}, {
|
|
type: 'rect',
|
|
shape: shape1,
|
|
style: {
|
|
fill: '#555',
|
|
text: 'has inner text',
|
|
textFill: 'white',
|
|
textPostion: 'insideTop'
|
|
},
|
|
styleEmphasis: {textFill: 'yellow'}
|
|
}, {
|
|
type: 'rect',
|
|
shape: shape2,
|
|
style: {fill: '#500'},
|
|
styleEmphasis: false
|
|
}]
|
|
},
|
|
ec5: {
|
|
type: 'group',
|
|
x: position[0],
|
|
y: position[1],
|
|
children: [{
|
|
type: 'rect',
|
|
shape: shape0,
|
|
style: {fill: '#333'},
|
|
}, {
|
|
type: 'rect',
|
|
shape: shape1,
|
|
style: {fill: '#555', text: 'has inner text'},
|
|
textContent: {
|
|
style: {fill: 'white'},
|
|
emphasis: {style: {fill: 'yellow'}}
|
|
},
|
|
textConfig: {position: 'insideTop'}
|
|
}, {
|
|
type: 'rect',
|
|
shape: shape2,
|
|
style: {fill: '#500'},
|
|
emphasis: {
|
|
// set false to disable lift color and z2.
|
|
style: false
|
|
}
|
|
}]
|
|
}
|
|
};
|
|
|
|
return map[name];
|
|
},
|
|
data: [[1, 1, 'legacy'], [2, 1, 'ec5']]
|
|
}]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'hover_style_disable', {
|
|
title: [
|
|
'Hover style disable: hover each group of elements,',
|
|
'all of the elements should lift color and z2 **except the red rect**'
|
|
],
|
|
height: 300,
|
|
option: option
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
require(['echarts'], function (echarts) {
|
|
|
|
var option = {
|
|
xAxis: {scale: true, min: 0.75, max: 3},
|
|
yAxis: {},
|
|
series: [{
|
|
type: 'custom',
|
|
renderItem: function (params, api) {
|
|
var shape0 = {x: 00, y: 30, width: 100, height: 50};
|
|
var shape1 = {x: 30, y: 50, width: 100, height: 50};
|
|
var shape2 = {x: 60, y: 70, width: 100, height: 50};
|
|
var position = api.coord([api.value(0), api.value(1)]);
|
|
var name = api.value(2);
|
|
var useHover = !!api.value(3);
|
|
var map = {
|
|
legacy: {
|
|
type: 'group',
|
|
x: position[0],
|
|
y: position[1],
|
|
children: [{
|
|
type: 'rect',
|
|
shape: shape0,
|
|
style: api.style({fill: '#222', text: 'legacy'}),
|
|
styleEmphasis: useHover ? {fill: 'red', textFill: 'yellow'} : false
|
|
}]
|
|
},
|
|
ec5: {
|
|
type: 'group',
|
|
x: position[0],
|
|
y: position[1],
|
|
children: [{
|
|
type: 'rect',
|
|
shape: shape0,
|
|
style: {fill: '#222'},
|
|
textContent: {
|
|
style: {text: 'ec5_api'},
|
|
emphasis: {style: useHover ? {fill: 'yellow'} : false}
|
|
},
|
|
textConfig: {position: 'inside'},
|
|
emphasis: {style: useHover ? {fill: 'red'} : false}
|
|
}]
|
|
}
|
|
};
|
|
|
|
return map[name];
|
|
},
|
|
data: [[1, 1, 'legacy', 1], [2, 1, 'ec5', 1]]
|
|
}]
|
|
};
|
|
|
|
var chart = testHelper.create(echarts, 'hover_style_remove', {
|
|
title: [
|
|
'Hover style remove test: ',
|
|
'(1) Hover each: become **red rect, yellow text**',
|
|
'(2) Click "disable hover style", elements should more to right a bit.',
|
|
'(3) Hover each again: should no hover style',
|
|
'(4) Click "enable hover style", elements should more to left a bit.',
|
|
'(5) Check whether resume to (1)',
|
|
],
|
|
height: 300,
|
|
option: option,
|
|
buttons: [{
|
|
text: 'disable hover style',
|
|
onclick: function () {
|
|
chart.setOption({
|
|
xAxis: {scale: true, min: 0.75, max: 7},
|
|
series: {
|
|
type: 'custom',
|
|
data: [[3, 1, 'legacy', 0], [6, 1, 'ec5', 0]]
|
|
}
|
|
})
|
|
}
|
|
}, {
|
|
text: 'enable hover style',
|
|
onclick: function () {
|
|
chart.setOption({
|
|
xAxis: {scale: true, min: 0.75, max: 3},
|
|
series: {
|
|
type: 'custom',
|
|
data: [[1, 1, 'legacy', 1], [2, 1, 'ec5', 1]]
|
|
}
|
|
})
|
|
}
|
|
}]
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|
|
|