Skip to content

I
incubator-echarts

半栈学徒 / incubator-echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 5
Star 0
Fork 0
I
incubator-echarts

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

提交 a9ee949d 编写于 作者: 1 100pah 提交者： sushuang
浏览文件
操作

fix: enable `dispatchAction` highlight downplay for treemap. fix #9816.

上级 1d0e57c3
隐藏空白更改
内联 并排
Showing with 108 addition and 29 deletion
src/chart/treemap/TreemapView.js
浏览文件 @ a9ee949d
......@@ -187,6 +187,7 @@ export default echarts.extendChartView({
var thisStorage = createStorage();
var oldStorage = this._storage;
var willInvisibleEls = [];
var doRenderNode = zrUtil.curry(
renderNode, seriesModel,
thisStorage, oldStorage, reRoot,
......@@ -685,6 +686,11 @@ function renderNode(
// Start of closure variables available in "Procedures in renderNode".
var thisLayout = thisNode.getLayout();
var data = seriesModel.getData();
// Only for enabling highlight/downplay. Clear firstly.
// Because some node will not be rendered.
data.setItemGraphicEl(thisNode.dataIndex, null);
if (!thisLayout || !thisLayout.isInView) {
return;
......@@ -724,14 +730,36 @@ function renderNode(
return group;
}
var nodeModel = thisNode.getModel();
// Background
var bg = giveGraphic('background', Rect, depth, Z_BG);
bg && renderBackground(group, bg, isParent && thisLayout.upperHeight);
// No children, render content.
if (!isParent) {
if (isParent) {
// Because of the implementation about "traverse" in graphic hover style, we
// can not set hover listener on the "group" of non-leaf node. Otherwise the
// hover event from the descendents will be listenered.
if (graphic.isHighDownDispatcher(group)) {
graphic.setAsHighDownDispatcher(group, false);
}
if (bg) {
graphic.setAsHighDownDispatcher(bg, true);
// Only for enabling highlight/downplay.
data.setItemGraphicEl(thisNode.dataIndex, bg);
}
}
else {
var content = giveGraphic('content', Rect, depth, Z_CONTENT);
content && renderContent(group, content);
if (bg && graphic.isHighDownDispatcher(bg)) {
graphic.setAsHighDownDispatcher(bg, false);
}
graphic.setAsHighDownDispatcher(group, true);
// Only for enabling highlight/downplay.
data.setItemGraphicEl(thisNode.dataIndex, group);
}
return group;
......@@ -746,10 +774,16 @@ function renderNode(
bg.seriesIndex = seriesModel.seriesIndex;
bg.setShape({x: 0, y: 0, width: thisWidth, height: thisHeight});
var visualBorderColor = thisNode.getVisual('borderColor', true);
var emphasisBorderColor = itemStyleEmphasisModel.get('borderColor');
updateStyle(bg, function () {
if (thisInvisible) {
// If invisible, do not set visual, otherwise the element will
// change immediately before animation. We think it is OK to
// remain its origin color when moving out of the view window.
processInvisible(content);
}
else {
var visualBorderColor = thisNode.getVisual('borderColor', true);
var emphasisBorderColor = itemStyleEmphasisModel.get('borderColor');
var normalStyle = getItemStyleNormal(itemStyleNormalModel);
normalStyle.fill = visualBorderColor;
var emphasisStyle = getItemStyleEmphasis(itemStyleEmphasisModel);
......@@ -769,8 +803,8 @@ function renderNode(
}
bg.setStyle(normalStyle);
graphic.setHoverStyle(bg, emphasisStyle);
});
graphic.setElementHoverStyle(bg, emphasisStyle);
}
group.add(bg);
}
......@@ -791,8 +825,14 @@ function renderNode(
height: contentHeight
});
var visualColor = thisNode.getVisual('color', true);
updateStyle(content, function () {
if (thisInvisible) {
// If invisible, do not set visual, otherwise the element will
// change immediately before animation. We think it is OK to
// remain its origin color when moving out of the view window.
processInvisible(content);
}
else {
var visualColor = thisNode.getVisual('color', true);
var normalStyle = getItemStyleNormal(itemStyleNormalModel);
normalStyle.fill = visualColor;
var emphasisStyle = getItemStyleEmphasis(itemStyleEmphasisModel);
......@@ -800,32 +840,19 @@ function renderNode(
prepareText(normalStyle, emphasisStyle, visualColor, contentWidth, contentHeight);
content.setStyle(normalStyle);
graphic.setHoverStyle(content, emphasisStyle);
});
graphic.setElementHoverStyle(content, emphasisStyle);
}
group.add(content);
}
function updateStyle(element, cb) {
if (!thisInvisible) {
// If invisible, do not set visual, otherwise the element will
// change immediately before animation. We think it is OK to
// remain its origin color when moving out of the view window.
cb();
if (!element.__tmWillVisible) {
element.invisible = false;
}
}
else {
// Delay invisible setting utill animation finished,
// avoid element vanish suddenly before animation.
!element.invisible && willInvisibleEls.push(element);
}
function processInvisible(element) {
// Delay invisible setting utill animation finished,
// avoid element vanish suddenly before animation.
!element.invisible && willInvisibleEls.push(element);
}
function prepareText(normalStyle, emphasisStyle, visualColor, width, height, upperLabelRect) {
var nodeModel = thisNode.getModel();
var text = zrUtil.retrieve(
seriesModel.getFormattedLabel(
thisNode.dataIndex, 'normal', null, null, upperLabelRect ? 'upperLabel' : 'label'
......@@ -922,6 +949,7 @@ function renderNode(
// Fade in, user can be aware that these nodes are new.
lastCfg.fadein = storageName !== 'nodeGroup';
}
}
// We can not set all backgroud with the same z, Because the behaviour of
......
test/runTest/actions/__meta__.json
浏览文件 @ a9ee949d
......@@ -146,7 +146,7 @@
"tree-legend": 1,
"tree-radial": 1,
"treemap-disk": 3,
"treemap-disk2": 2,
"treemap-disk2": 3,
"treemap-obama": 2,
"treemap-option": 1,
"treemap-option2": 2,
......
test/runTest/actions/treemap-disk2.json
浏览文件 @ a9ee949d
[{"name":"Action 1","ops":[{"type":"mousemove","time":783,"x":451,"y":369},{"type":"mousemove","time":983,"x":460,"y":399},{"type":"mousemove","time":1190,"x":482,"y":413},{"type":"screenshot","time":2593},{"type":"mousemove","time":2820,"x":481,"y":411},{"type":"mousemove","time":3029,"x":448,"y":369},{"type":"mousemove","time":3244,"x":441,"y":362},{"type":"mousemove","time":3554,"x":441,"y":362},{"type":"screenshot","time":4426},{"type":"mousemove","time":4571,"x":439,"y":361},{"type":"mousemove","time":4771,"x":403,"y":348},{"type":"mousemove","time":4978,"x":381,"y":345},{"type":"mousemove","time":5185,"x":377,"y":344},{"type":"mousemove","time":6345,"x":377,"y":344},{"type":"mousemove","time":6546,"x":368,"y":194},{"type":"mousemove","time":6747,"x":357,"y":149},{"type":"mousemove","time":6953,"x":354,"y":124},{"type":"mousemove","time":7187,"x":349,"y":96},{"type":"mousemove","time":8048,"x":349,"y":98},{"type":"mousemove","time":8248,"x":342,"y":120},{"type":"mousemove","time":8449,"x":340,"y":131},{"type":"mousemove","time":8655,"x":340,"y":132},{"type":"mousemove","time":8715,"x":340,"y":132},{"type":"screenshot","time":10033},{"type":"mousemove","time":10717,"x":340,"y":133},{"type":"mousemove","time":10917,"x":340,"y":153},{"type":"mousemove","time":11118,"x":339,"y":184},{"type":"mousedown","time":11267,"x":339,"y":184},{"type":"mousemove","time":11325,"x":339,"y":184},{"type":"mouseup","time":11359,"x":339,"y":184},{"time":11360,"delay":600,"type":"screenshot-auto"},{"type":"mousemove","time":13286,"x":342,"y":186},{"type":"mousemove","time":13487,"x":510,"y":245},{"type":"mousemove","time":13687,"x":638,"y":306},{"type":"mousemove","time":13896,"x":644,"y":312},{"type":"mousedown","time":14364,"x":644,"y":312},{"type":"mouseup","time":14496,"x":644,"y":312},{"time":14497,"delay":600,"type":"screenshot-auto"},{"type":"mousemove","time":15831,"x":645,"y":314},{"type":"mousemove","time":16031,"x":645,"y":328},{"type":"mousemove","time":16236,"x":646,"y":335},{"type":"mousemove","time":16548,"x":646,"y":335},{"type":"mousemove","time":16754,"x":646,"y":336},{"type":"mousemove","time":16814,"x":646,"y":336},{"type":"mousemove","time":17015,"x":564,"y":449},{"type":"mousemove","time":17215,"x":425,"y":544},{"type":"mousemove","time":17421,"x":347,"y":566},{"type":"mousemove","time":17632,"x":279,"y":589},{"type":"mousedown","time":17711,"x":279,"y":589},{"type":"mouseup","time":17807,"x":279,"y":590},{"time":17808,"delay":600,"type":"screenshot-auto"},{"type":"mousemove","time":17865,"x":279,"y":590},{"type":"mousemove","time":18097,"x":278,"y":591},{"type":"mousemove","time":18327,"x":278,"y":591},{"type":"mousemove","time":18434,"x":278,"y":592},{"type":"mousemove","time":18636,"x":277,"y":593},{"type":"mousemove","time":18837,"x":277,"y":594},{"type":"mousemove","time":19057,"x":277,"y":594},{"type":"mousemove","time":19292,"x":277,"y":596},{"type":"mousemove","time":19534,"x":281,"y":596},{"type":"mousemove","time":19734,"x":391,"y":544},{"type":"mousemove","time":19934,"x":507,"y":505},{"type":"mousemove","time":20135,"x":571,"y":461},{"type":"mousemove","time":20343,"x":572,"y":461},{"type":"screenshot","time":21692}],"scrollY":0,"scrollX":0,"timestamp":1568045404523},{"name":"Action 2","ops":[{"type":"mousewheel","time":282,"x":389,"y":313,"deltaY":4.000244140625},{"type":"mousewheel","time":415,"x":389,"y":313,"deltaY":1274.4915771484375},{"type":"mousewheel","time":498,"x":389,"y":313,"deltaY":323.3740234375},{"type":"mousewheel","time":883,"x":389,"y":313,"deltaY":4.000244140625},{"type":"mousewheel","time":966,"x":389,"y":313,"deltaY":28.831787109375},{"type":"mousewheel","time":1033,"x":389,"y":313,"deltaY":825.3546142578125},{"type":"mousewheel","time":1099,"x":389,"y":313,"deltaY":285.667724609375},{"type":"mousewheel","time":1183,"x":389,"y":313,"deltaY":265.6805419921875},{"type":"mousemove","time":1599,"x":390,"y":313},{"type":"mousedown","time":1743,"x":429,"y":305},{"type":"mousemove","time":1800,"x":426,"y":301},{"type":"mousemove","time":2017,"x":273,"y":158},{"type":"mousemove","time":2223,"x":140,"y":49},{"type":"mouseup","time":2245,"x":140,"y":49},{"time":2246,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":2433,"x":393,"y":303},{"type":"mousemove","time":2642,"x":443,"y":388},{"type":"mousewheel","time":2734,"x":443,"y":387,"deltaY":4.000244140625},{"type":"mousewheel","time":2776,"x":443,"y":387,"deltaY":210.087890625},{"type":"mousewheel","time":2821,"x":443,"y":387,"deltaY":788.75244140625},{"type":"mousemove","time":2879,"x":443,"y":387},{"type":"mousemove","time":3017,"x":445,"y":389},{"type":"mousemove","time":3218,"x":496,"y":381},{"type":"mousedown","time":3277,"x":498,"y":379},{"type":"mousemove","time":3434,"x":448,"y":353},{"type":"mousemove","time":3655,"x":139,"y":194},{"type":"mouseup","time":3844,"x":139,"y":194},{"time":3845,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":3858,"x":139,"y":194},{"type":"mousemove","time":3920,"x":140,"y":195},{"type":"mousemove","time":4129,"x":398,"y":320},{"type":"mousemove","time":4343,"x":472,"y":366},{"type":"mousewheel","time":4470,"x":472,"y":366,"deltaY":4.000244140625},{"type":"mousewheel","time":4519,"x":472,"y":366,"deltaY":194.4476318359375},{"type":"mousewheel","time":4563,"x":472,"y":366,"deltaY":215.1177978515625},{"type":"mousemove","time":4752,"x":482,"y":372},{"type":"mousemove","time":4954,"x":529,"y":394},{"type":"mousedown","time":5149,"x":532,"y":394},{"type":"mousemove","time":5166,"x":532,"y":394},{"type":"mousemove","time":5385,"x":417,"y":302},{"type":"mousemove","time":5588,"x":367,"y":258},{"type":"mousemove","time":5795,"x":350,"y":238},{"type":"mouseup","time":5963,"x":347,"y":236},{"time":5964,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":6001,"x":347,"y":236},{"type":"mousemove","time":6271,"x":347,"y":236},{"type":"mousewheel","time":6288,"x":347,"y":236,"deltaY":-4.000244140625},{"type":"mousewheel","time":6337,"x":347,"y":236,"deltaY":-432.744140625},{"type":"mousewheel","time":6383,"x":347,"y":236,"deltaY":-548.4722900390625},{"type":"mousewheel","time":6430,"x":347,"y":236,"deltaY":-305.631103515625},{"type":"mousewheel","time":6855,"x":347,"y":236,"deltaY":-4.000244140625},{"type":"mousewheel","time":6918,"x":347,"y":236,"deltaY":-173.311767578125},{"type":"mousewheel","time":6973,"x":347,"y":236,"deltaY":-208.1536865234375},{"type":"mousewheel","time":7122,"x":347,"y":236,"deltaY":-4.000244140625},{"type":"mousewheel","time":7206,"x":347,"y":236,"deltaY":-13.6578369140625},{"type":"mousewheel","time":7255,"x":347,"y":236,"deltaY":-82.4737548828125},{"type":"mousewheel","time":7313,"x":347,"y":236,"deltaY":-155.1434326171875},{"type":"mousewheel","time":7368,"x":347,"y":236,"deltaY":-176.4447021484375},{"type":"mousewheel","time":8040,"x":347,"y":236,"deltaY":-4.000244140625},{"type":"mousewheel","time":8098,"x":347,"y":236,"deltaY":-213.1671142578125},{"type":"mousewheel","time":8144,"x":347,"y":236,"deltaY":-485.894775390625},{"type":"mousemove","time":8973,"x":349,"y":240},{"type":"mousemove","time":9174,"x":394,"y":410},{"type":"mousemove","time":9380,"x":392,"y":391},{"type":"mousemove","time":9583,"x":397,"y":347},{"type":"mousedown","time":9650,"x":397,"y":346},{"type":"mousemove","time":9787,"x":431,"y":413},{"type":"mousemove","time":9987,"x":462,"y":465},{"type":"mousemove","time":10191,"x":492,"y":496},{"type":"mousemove","time":10398,"x":505,"y":506},{"type":"mouseup","time":10532,"x":505,"y":506},{"time":10533,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":10716,"x":505,"y":506},{"type":"mousemove","time":10876,"x":505,"y":506},{"type":"mousemove","time":11083,"x":504,"y":505}],"scrollY":0,"scrollX":0,"timestamp":1568969921384}]
\ No newline at end of file
[{"name":"Action 1","ops":[{"type":"mousemove","time":783,"x":451,"y":369},{"type":"mousemove","time":983,"x":460,"y":399},{"type":"mousemove","time":1190,"x":482,"y":413},{"type":"screenshot","time":2593},{"type":"mousemove","time":2820,"x":481,"y":411},{"type":"mousemove","time":3029,"x":448,"y":369},{"type":"mousemove","time":3244,"x":441,"y":362},{"type":"mousemove","time":3554,"x":441,"y":362},{"type":"screenshot","time":4426},{"type":"mousemove","time":4571,"x":439,"y":361},{"type":"mousemove","time":4771,"x":403,"y":348},{"type":"mousemove","time":4978,"x":381,"y":345},{"type":"mousemove","time":5185,"x":377,"y":344},{"type":"mousemove","time":6345,"x":377,"y":344},{"type":"mousemove","time":6546,"x":368,"y":194},{"type":"mousemove","time":6747,"x":357,"y":149},{"type":"mousemove","time":6953,"x":354,"y":124},{"type":"mousemove","time":7187,"x":349,"y":96},{"type":"mousemove","time":8048,"x":349,"y":98},{"type":"mousemove","time":8248,"x":342,"y":120},{"type":"mousemove","time":8449,"x":340,"y":131},{"type":"mousemove","time":8655,"x":340,"y":132},{"type":"mousemove","time":8715,"x":340,"y":132},{"type":"screenshot","time":10033},{"type":"mousemove","time":10717,"x":340,"y":133},{"type":"mousemove","time":10917,"x":340,"y":153},{"type":"mousemove","time":11118,"x":339,"y":184},{"type":"mousedown","time":11267,"x":339,"y":184},{"type":"mousemove","time":11325,"x":339,"y":184},{"type":"mouseup","time":11359,"x":339,"y":184},{"time":11360,"delay":600,"type":"screenshot-auto"},{"type":"mousemove","time":13286,"x":342,"y":186},{"type":"mousemove","time":13487,"x":510,"y":245},{"type":"mousemove","time":13687,"x":638,"y":306},{"type":"mousemove","time":13896,"x":644,"y":312},{"type":"mousedown","time":14364,"x":644,"y":312},{"type":"mouseup","time":14496,"x":644,"y":312},{"time":14497,"delay":600,"type":"screenshot-auto"},{"type":"mousemove","time":15831,"x":645,"y":314},{"type":"mousemove","time":16031,"x":645,"y":328},{"type":"mousemove","time":16236,"x":646,"y":335},{"type":"mousemove","time":16548,"x":646,"y":335},{"type":"mousemove","time":16754,"x":646,"y":336},{"type":"mousemove","time":16814,"x":646,"y":336},{"type":"mousemove","time":17015,"x":564,"y":449},{"type":"mousemove","time":17215,"x":425,"y":544},{"type":"mousemove","time":17421,"x":347,"y":566},{"type":"mousemove","time":17632,"x":279,"y":589},{"type":"mousedown","time":17711,"x":279,"y":589},{"type":"mouseup","time":17807,"x":279,"y":590},{"time":17808,"delay":600,"type":"screenshot-auto"},{"type":"mousemove","time":17865,"x":279,"y":590},{"type":"mousemove","time":18097,"x":278,"y":591},{"type":"mousemove","time":18327,"x":278,"y":591},{"type":"mousemove","time":18434,"x":278,"y":592},{"type":"mousemove","time":18636,"x":277,"y":593},{"type":"mousemove","time":18837,"x":277,"y":594},{"type":"mousemove","time":19057,"x":277,"y":594},{"type":"mousemove","time":19292,"x":277,"y":596},{"type":"mousemove","time":19534,"x":281,"y":596},{"type":"mousemove","time":19734,"x":391,"y":544},{"type":"mousemove","time":19934,"x":507,"y":505},{"type":"mousemove","time":20135,"x":571,"y":461},{"type":"mousemove","time":20343,"x":572,"y":461},{"type":"screenshot","time":21692}],"scrollY":0,"scrollX":0,"timestamp":1568045404523},{"name":"Action 2","ops":[{"type":"mousewheel","time":282,"x":389,"y":313,"deltaY":4.000244140625},{"type":"mousewheel","time":415,"x":389,"y":313,"deltaY":1274.4915771484375},{"type":"mousewheel","time":498,"x":389,"y":313,"deltaY":323.3740234375},{"type":"mousewheel","time":883,"x":389,"y":313,"deltaY":4.000244140625},{"type":"mousewheel","time":966,"x":389,"y":313,"deltaY":28.831787109375},{"type":"mousewheel","time":1033,"x":389,"y":313,"deltaY":825.3546142578125},{"type":"mousewheel","time":1099,"x":389,"y":313,"deltaY":285.667724609375},{"type":"mousewheel","time":1183,"x":389,"y":313,"deltaY":265.6805419921875},{"type":"mousemove","time":1599,"x":390,"y":313},{"type":"mousedown","time":1743,"x":429,"y":305},{"type":"mousemove","time":1800,"x":426,"y":301},{"type":"mousemove","time":2017,"x":273,"y":158},{"type":"mousemove","time":2223,"x":140,"y":49},{"type":"mouseup","time":2245,"x":140,"y":49},{"time":2246,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":2433,"x":393,"y":303},{"type":"mousemove","time":2642,"x":443,"y":388},{"type":"mousewheel","time":2734,"x":443,"y":387,"deltaY":4.000244140625},{"type":"mousewheel","time":2776,"x":443,"y":387,"deltaY":210.087890625},{"type":"mousewheel","time":2821,"x":443,"y":387,"deltaY":788.75244140625},{"type":"mousemove","time":2879,"x":443,"y":387},{"type":"mousemove","time":3017,"x":445,"y":389},{"type":"mousemove","time":3218,"x":496,"y":381},{"type":"mousedown","time":3277,"x":498,"y":379},{"type":"mousemove","time":3434,"x":448,"y":353},{"type":"mousemove","time":3655,"x":139,"y":194},{"type":"mouseup","time":3844,"x":139,"y":194},{"time":3845,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":3858,"x":139,"y":194},{"type":"mousemove","time":3920,"x":140,"y":195},{"type":"mousemove","time":4129,"x":398,"y":320},{"type":"mousemove","time":4343,"x":472,"y":366},{"type":"mousewheel","time":4470,"x":472,"y":366,"deltaY":4.000244140625},{"type":"mousewheel","time":4519,"x":472,"y":366,"deltaY":194.4476318359375},{"type":"mousewheel","time":4563,"x":472,"y":366,"deltaY":215.1177978515625},{"type":"mousemove","time":4752,"x":482,"y":372},{"type":"mousemove","time":4954,"x":529,"y":394},{"type":"mousedown","time":5149,"x":532,"y":394},{"type":"mousemove","time":5166,"x":532,"y":394},{"type":"mousemove","time":5385,"x":417,"y":302},{"type":"mousemove","time":5588,"x":367,"y":258},{"type":"mousemove","time":5795,"x":350,"y":238},{"type":"mouseup","time":5963,"x":347,"y":236},{"time":5964,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":6001,"x":347,"y":236},{"type":"mousemove","time":6271,"x":347,"y":236},{"type":"mousewheel","time":6288,"x":347,"y":236,"deltaY":-4.000244140625},{"type":"mousewheel","time":6337,"x":347,"y":236,"deltaY":-432.744140625},{"type":"mousewheel","time":6383,"x":347,"y":236,"deltaY":-548.4722900390625},{"type":"mousewheel","time":6430,"x":347,"y":236,"deltaY":-305.631103515625},{"type":"mousewheel","time":6855,"x":347,"y":236,"deltaY":-4.000244140625},{"type":"mousewheel","time":6918,"x":347,"y":236,"deltaY":-173.311767578125},{"type":"mousewheel","time":6973,"x":347,"y":236,"deltaY":-208.1536865234375},{"type":"mousewheel","time":7122,"x":347,"y":236,"deltaY":-4.000244140625},{"type":"mousewheel","time":7206,"x":347,"y":236,"deltaY":-13.6578369140625},{"type":"mousewheel","time":7255,"x":347,"y":236,"deltaY":-82.4737548828125},{"type":"mousewheel","time":7313,"x":347,"y":236,"deltaY":-155.1434326171875},{"type":"mousewheel","time":7368,"x":347,"y":236,"deltaY":-176.4447021484375},{"type":"mousewheel","time":8040,"x":347,"y":236,"deltaY":-4.000244140625},{"type":"mousewheel","time":8098,"x":347,"y":236,"deltaY":-213.1671142578125},{"type":"mousewheel","time":8144,"x":347,"y":236,"deltaY":-485.894775390625},{"type":"mousemove","time":8973,"x":349,"y":240},{"type":"mousemove","time":9174,"x":394,"y":410},{"type":"mousemove","time":9380,"x":392,"y":391},{"type":"mousemove","time":9583,"x":397,"y":347},{"type":"mousedown","time":9650,"x":397,"y":346},{"type":"mousemove","time":9787,"x":431,"y":413},{"type":"mousemove","time":9987,"x":462,"y":465},{"type":"mousemove","time":10191,"x":492,"y":496},{"type":"mousemove","time":10398,"x":505,"y":506},{"type":"mouseup","time":10532,"x":505,"y":506},{"time":10533,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":10716,"x":505,"y":506},{"type":"mousemove","time":10876,"x":505,"y":506},{"type":"mousemove","time":11083,"x":504,"y":505}],"scrollY":0,"scrollX":0,"timestamp":1568969921384},{"name":"Action 3","ops":[{"type":"mousemove","time":447,"x":665,"y":124},{"type":"mousemove","time":665,"x":407,"y":125},{"type":"mousemove","time":891,"x":343,"y":118},{"type":"mousemove","time":1014,"x":343,"y":117},{"type":"mousemove","time":1214,"x":355,"y":48},{"type":"mousemove","time":1414,"x":344,"y":30},{"type":"mousemove","time":1614,"x":337,"y":14},{"type":"mousemove","time":1814,"x":329,"y":18},{"type":"mousemove","time":2014,"x":326,"y":21},{"type":"mousedown","time":2180,"x":326,"y":21},{"type":"mouseup","time":2192,"x":326,"y":21},{"time":2193,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":3047,"x":327,"y":21},{"type":"mousemove","time":3247,"x":382,"y":21},{"type":"mousemove","time":3447,"x":416,"y":16},{"type":"mousemove","time":3656,"x":418,"y":15},{"type":"mousedown","time":3672,"x":418,"y":15},{"type":"mouseup","time":3686,"x":418,"y":15},{"time":3687,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":4048,"x":419,"y":15},{"type":"mousemove","time":4248,"x":513,"y":17},{"type":"mousemove","time":4448,"x":544,"y":17},{"type":"mousedown","time":4630,"x":545,"y":17},{"type":"mouseup","time":4641,"x":545,"y":17},{"time":4642,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":4702,"x":545,"y":17},{"type":"mousemove","time":5331,"x":544,"y":17},{"type":"mousemove","time":5534,"x":351,"y":5},{"type":"mousemove","time":5736,"x":221,"y":13},{"type":"mousemove","time":5945,"x":148,"y":48},{"type":"mousemove","time":6147,"x":130,"y":43},{"type":"mousemove","time":6361,"x":130,"y":43},{"type":"mousedown","time":6407,"x":130,"y":43},{"type":"mouseup","time":6418,"x":130,"y":43},{"time":6419,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":6931,"x":138,"y":43},{"type":"mousemove","time":7131,"x":274,"y":27},{"type":"mousemove","time":7332,"x":359,"y":46},{"type":"mousemove","time":7540,"x":388,"y":51},{"type":"mousedown","time":7707,"x":388,"y":51},{"type":"mouseup","time":7718,"x":388,"y":51},{"time":7719,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":8009,"x":390,"y":51},{"type":"mousemove","time":8213,"x":487,"y":55},{"type":"mousemove","time":8427,"x":557,"y":57},{"type":"mousemove","time":8656,"x":565,"y":55},{"type":"mousedown","time":9013,"x":565,"y":55},{"type":"mouseup","time":9029,"x":565,"y":55},{"time":9030,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":10776,"x":565,"y":55},{"type":"mousemove","time":11793,"x":566,"y":55},{"type":"mousemove","time":12004,"x":733,"y":26}],"scrollY":0,"scrollX":0,"timestamp":1579025851293}]
\ No newline at end of file
test/treemap-disk2.html
浏览文件 @ a9ee949d
......@@ -23,6 +23,7 @@ under the License.
<meta charset="utf-8">
<script src="lib/esl.js"></script>
<script src="lib/config.js"></script>
<script src="lib/testHelper.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
......@@ -59,8 +60,18 @@ under the License.
font-size: 16px;
margin-bottom: 5px;
}
#btn-area {
position: fixed;
left: 10px;
top: 10px;
z-index: 999999;
background-color: #fff;
}
</style>
<div id="btn-area">
</div>
<div id="main"></div>
<script src="data/disk.tree.js"></script>
......@@ -145,6 +156,7 @@ under the License.
'#675bba', '#fec42c', '#dd4444',
'#d4df5a', '#cd4870'
],
highDownTarget: 'subtree',
colorMappingBy: 'value',
itemStyle: {
normal: {
......@@ -176,6 +188,45 @@ under the License.
chart.on('click', function (params) {
console.log(params);
});
initBtns('Only single bg highlighted for non-leaf', [
'Disk Usage',
'PrivateFrameworks'
]);
initBtns('Both of the bg and content is highlighted for leaf', [
'Alex.SpeechVoice'
]);
function initBtns(desc, names) {
var btnArea = document.getElementById('btn-area');
var descEl = document.createElement('span');
descEl.innerHTML = testHelper.encodeHTML(desc) + '&nbsp;:&nbsp;&nbsp;';
btnArea.appendChild(descEl);
var highDown = ['highlight', 'downplay'];
for (var i = 0; i < names.length; i++) {
for (var j = 0; j < highDown.length; j++) {
var highDownName = highDown[j];
var name = names[i];
var btnEl = document.createElement('button');
btnEl.innerHTML = testHelper.encodeHTML(highDownName + ': ' + name);
btnEl.onclick = echarts.util.curry(clickHandler, highDownName, name);
btnArea.appendChild(btnEl);
}
}
function clickHandler(highDownName, name) {
chart.dispatchAction({
type: highDownName,
seriesIndex: 0,
name: name
});
}
btnArea.appendChild(document.createElement('br'));
}
}
</script>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或