| |
| <!-- |
| 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> --> |
| <!-- <script src="lib/draggable.js"></script> --> |
| <link rel="stylesheet" href="lib/reset.css" /> |
| </head> |
| <body> |
| <style> |
| html { |
| /* Fix the line-height to integer to avoid it varying across clients and |
| causing visual test failures. Some clients may not support fractional px. */ |
| line-height: 18px; |
| } |
| </style> |
| |
| |
| <div id="main_roam"></div> |
| |
| |
| <script> |
| require([ |
| 'echarts', |
| './data/flare.json' |
| ], function (echarts, data) { |
| |
| var _ctx = { |
| center: null |
| }; |
| |
| var option = { |
| backgroundColor: '#eef', |
| |
| tooltip: { |
| trigger: 'item', |
| triggerOn: 'mousemove' |
| }, |
| |
| series:[ |
| { |
| type: 'tree', |
| id: 'tree0', |
| // animation: false, |
| |
| data: [data], |
| |
| top: '18%', |
| bottom: '14%', |
| |
| roam: true, |
| // roam: 'scale', |
| // roam: 'move', |
| |
| layout: 'radial', |
| // layout: 'orthogonal', |
| symbol: 'emptyCircle', |
| // label: {show: false}, |
| |
| symbolSize: 7, |
| initialTreeDepth: 3, |
| animationDurationUpdate: 750 |
| } |
| ] |
| }; |
| |
| function makeRectIndicators(option) { |
| var graphicOption = option.graphic = option.graphic || {}; |
| graphicElsOption = graphicOption.elements = graphicOption.elements || []; |
| graphicElsOption.push({ |
| id: 'view_rect_indicator', |
| type: 'rect', |
| silent: true, |
| z: -9, |
| style: { |
| // fill: '#e0e0e0', |
| fill: 'none', |
| stroke: '#999', |
| lineWidth: 1, |
| lineDash: 'dashed', |
| }, |
| textContent: { |
| type: 'text', |
| style: { |
| text: 'view rect', |
| fill: '#555', |
| fontSize: 11, |
| }, |
| }, |
| textConfig: { |
| position: 'insideTopRight' |
| } |
| }, { |
| id: 'content_rect_indicator', |
| type: 'rect', |
| silent: true, |
| z: -10, |
| style: { |
| // fill: 'rgba(150,100,50,0.3)', |
| fill: 'none', |
| stroke: '#999', |
| lineWidth: 1, |
| lineDash: 'dashed', |
| }, |
| textContent: { |
| type: 'text', |
| style: { |
| text: 'content bounding rect', |
| fill: '#555', |
| fontSize: 11, |
| }, |
| }, |
| textConfig: { |
| position: 'insideTopRight' |
| } |
| }); |
| |
| var gridOptions = option.grid = option.grid || []; |
| if (!Array.isArray(gridOptions)) { |
| gridOptions = option.grid = [option.grid]; |
| } |
| gridOptions.push({ |
| id: 'viewport_indicator', |
| show: true, |
| // Using `grid` as a indicator is a tricky way - should no bounding rect, |
| // otherwise it affect the trigger of geo roam due to `onIrrelevantElement`. |
| backgroundColor: '#eee', |
| silent: false, |
| ..._ctx.layoutParams, |
| borderColor: '#aaa', |
| borderType: 'dashed', |
| z: -100, |
| }); |
| } |
| makeRectIndicators(option); |
| |
| function renderIndicatorRect() { |
| if (!chart) { |
| return; |
| } |
| // [CAVEAT] Internal data structure, probably change, do not use it outside. |
| // const queryParam = {mainType: 'series', query: {seriesId: _ctx.seriesMapId}}; |
| // const viewCoordSys = chart.getModel().findComponents(queryParam)[0].coordinateSystem; |
| // const contentBoundingRect = viewCoordSys.getBoundingRect().clone(); |
| // const trans = viewCoordSys.getComputedTransform(); |
| // if (trans) { |
| // contentBoundingRect.applyTransform(trans); |
| // } |
| // chart.setOption({ |
| // grid: { |
| // id: 'viewport_indicator', |
| // ..._ctx.layoutParams, |
| // }, |
| // graphic: { |
| // elements: [{ |
| // id: 'content_rect_indicator', |
| // shape: contentBoundingRect, |
| // }] |
| // }, |
| // }); |
| } |
| |
| var chart = testHelper.create(echarts, 'main_roam', { |
| title: [ |
| 'tree roam and layout' |
| ], |
| option: option, |
| inputsStyle: 'compact', |
| inputs: [ |
| { |
| type: 'select', |
| text: 'box layout:', |
| values: [ |
| 'do_nothing', |
| { |
| left: 50, top: 80, right: '20%', bottom: 20, |
| }, |
| { |
| left: null, top: null, right: null, bottom: null, |
| }, |
| { |
| left: 30, top: 30, right: null, bottom: '50%', |
| }, |
| ], |
| onchange: function () { |
| var layoutParams = this.value; |
| if (layoutParams == 'do_nothing') { |
| return; |
| } |
| chart.setOption({ |
| series: { |
| id: 'tree0', |
| ...layoutParams, |
| } |
| }); |
| renderIndicatorRect(); |
| } |
| }, |
| { |
| type: 'select', |
| text: 'layout:', |
| values: ['radial', 'orthogonal'], |
| onchange: function () { |
| chart.setOption({ |
| series: { |
| id: 'tree0', |
| layout: this.value, |
| } |
| }); |
| renderIndicatorRect(); |
| } |
| }, |
| { |
| type: 'select', |
| text: 'roam:', |
| values: [true, 'scale', 'move'], |
| onchange() { |
| chart.setOption({ |
| series: { |
| id: 'tree0', |
| roam: this.value, |
| } |
| }); |
| renderIndicatorRect(); |
| } |
| }, |
| { |
| type: 'select', |
| text: 'roamTrigger:', |
| values: ['global', undefined], |
| onchange() { |
| chart.setOption({ |
| series: { |
| id: 'tree0', |
| roamTrigger: this.value, |
| } |
| }); |
| renderIndicatorRect(); |
| } |
| }, |
| { |
| text: 'zoom:', |
| type: 'select', |
| values: [undefined, 0.5, 1, 5], |
| onchange() { |
| chart.setOption({ |
| series: { |
| id: 'tree0', |
| zoom: this.value, |
| } |
| }); |
| renderIndicatorRect(); |
| } |
| }, |
| { |
| type: 'select', |
| text: 'specify center:', |
| values: [false, true], |
| onchange() { |
| chart.__testHelper.switchGroup( |
| this.value ? 'group_use_center' : 'group_no_center' |
| ) |
| if (this.value) { |
| _ctx.center = _ctx.center || ['50%', '50%']; |
| } |
| else { |
| _ctx.center = null; |
| } |
| chart.setOption({ |
| series: { |
| id: 'graph0', |
| center: _ctx.center |
| } |
| }); |
| renderIndicatorRect(); |
| } |
| }, |
| { |
| type: 'select', |
| text: 'label.show:', |
| values: [true, false], |
| onchange() { |
| chart.setOption({ |
| series: { |
| id: 'tree0', |
| label: {show: this.value}, |
| } |
| }); |
| renderIndicatorRect(); |
| } |
| }, |
| { |
| type: 'br', |
| }, |
| { |
| type: 'groupset', |
| inputsHeight: 40, |
| groups: [{ |
| id: 'group_no_center', |
| text: 'no center', |
| }, { |
| id: 'group_use_center', |
| text: 'specify center', |
| inputs: [ |
| ...[0, 1].map(centerIdx => ({ |
| type: 'select', |
| text: `center[${centerIdx}]:`, |
| options: [ |
| { |
| id: 'percent', |
| text: 'percent', |
| input: {type: 'range', min: -50, max: 150, value: 50, suffix: '%'} |
| }, |
| { |
| id: 'absolute', |
| text: 'absolute', |
| input: {type: 'range', min: -100, max: 800, value: 100} |
| }, |
| ], |
| onchange() { |
| if (this.optionId === 'absolute') { |
| _ctx.center[centerIdx] = this.value; |
| } |
| else if (this.optionId === 'percent') { |
| _ctx.center[centerIdx] = this.value + '%'; |
| } |
| chart.setOption({ |
| series: { |
| id: 'tree0', |
| center: _ctx.center |
| } |
| }); |
| renderIndicatorRect(); |
| } |
| })) |
| ] |
| }] |
| }, // End of groupset |
| ] // End of inputs |
| }); // End of testHelper.create |
| |
| if (chart) { |
| chart.on('treeRoam', e => { |
| renderIndicatorRect(); |
| }); |
| } |
| |
| }); |
| </script> |
| |
| </body> |
| </html> |
