Spaces:
Running
Running
| <!-- | |
| 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="ut/lib/canteen.js"></script> --> | |
| <link rel="stylesheet" href="lib/reset.css" /> | |
| </head> | |
| <body> | |
| <style> | |
| </style> | |
| <div id="main0"></div> | |
| <script> | |
| require([ | |
| 'echarts' | |
| ], function (echarts) { | |
| var option; | |
| var data = []; | |
| var dataCount = 1000; | |
| var startTime = new Date(); | |
| var categories = ['categoryA', 'categoryB', 'categoryC']; | |
| var types = [ | |
| {name: 'JS Heap', color: '#7b9ce1'}, | |
| {name: 'Documents', color: '#bd6d6c'}, | |
| {name: 'Nodes', color: '#75d874'}, | |
| {name: 'Listeners', color: '#e0bc78'}, | |
| {name: 'GPU Memory', color: '#dc77dc'}, | |
| {name: 'GPU', color: '#72b362'} | |
| ]; | |
| // Generate mock data | |
| categories.forEach(function (category, index) { | |
| let start = 0; | |
| for (var i = 0; i < dataCount; i++) { | |
| var typeItem = types[Math.round(Math.random() * (types.length - 1))]; | |
| data.push({ | |
| name: typeItem.name, | |
| value: [ | |
| index, | |
| i + start, | |
| i + 1 + start, | |
| 1 | |
| ], | |
| itemStyle: { | |
| color: typeItem.color | |
| } | |
| }); | |
| start | |
| } | |
| }); | |
| function renderItem(params, api) { | |
| var categoryIndex = api.value(0); | |
| var start = api.coord([api.value(1), categoryIndex]); | |
| var end = api.coord([api.value(2), categoryIndex]); | |
| var height = api.size([0, 1])[1] * 0.6; | |
| var rectShape = echarts.graphic.clipRectByRect({ | |
| x: start[0], | |
| y: start[1] - height / 2, | |
| width: end[0] - start[0], | |
| height: height | |
| }, { | |
| x: params.coordSys.x, | |
| y: params.coordSys.y, | |
| width: params.coordSys.width, | |
| height: params.coordSys.height | |
| }); | |
| return rectShape && { | |
| type: 'rect', | |
| transition: ['shape'], | |
| shape: rectShape, | |
| style: api.style() | |
| }; | |
| } | |
| option = { | |
| tooltip: { | |
| formatter: function (params) { | |
| return params.marker + params.name + ': ' + params.value[3] + ' ms'; | |
| } | |
| }, | |
| title: { | |
| text: 'Profile', | |
| left: 'center' | |
| }, | |
| dataZoom: [{ | |
| type: 'slider', | |
| filterMode: 'weakFilter', | |
| showDataShadow: false, | |
| top: 400, | |
| labelFormatter: '' | |
| }, { | |
| type: 'inside', | |
| filterMode: 'weakFilter' | |
| }], | |
| grid: { | |
| height: 300 | |
| }, | |
| xAxis: { | |
| min: 0, | |
| scale: true, | |
| axisLabel: { | |
| formatter: function (val) { | |
| return val + ' ms'; | |
| } | |
| } | |
| }, | |
| yAxis: { | |
| data: categories | |
| }, | |
| series: [{ | |
| type: 'custom', | |
| renderItem: renderItem, | |
| itemStyle: { | |
| opacity: 0.8 | |
| }, | |
| encode: { | |
| x: [1, 2], | |
| y: 0 | |
| }, | |
| data: data | |
| }] | |
| }; | |
| var chart = testHelper.create(echarts, 'main0', { | |
| title: [ | |
| 'Test Case from https://github.com/apache/echarts/issues/14573', | |
| 'Should switch between progressive normally.' | |
| ], | |
| option: option, | |
| buttons: [{ | |
| text: 'Zoom in', | |
| onclick: function () { | |
| chart.dispatchAction({ | |
| type: 'dataZoom', | |
| start: 10, | |
| end: 12 | |
| }); | |
| } | |
| }, { | |
| text: 'Zoom out', | |
| onclick: function () { | |
| chart.dispatchAction({ | |
| type: 'dataZoom', | |
| start: 0, | |
| end: 100 | |
| }); | |
| } | |
| }], | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |