| <!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="ut/lib/canteen.js"></script> --> |
| <link rel="stylesheet" href="lib/reset.css" /> |
| </head> |
| <body> |
| <style> |
| </style> |
| |
| |
| <div id="main-no-dataZoom"></div> |
| <div id="main-has-dataZoom-x"></div> |
| <div id="main-has-dataZoom-y"></div> |
| <div id="main-has-stack"></div> |
| <div id="main-has-dataZoom-y-stack"></div> |
| |
| |
| <script> |
| var TOTAL_HEIGHT = 1200; |
| |
| /** |
| * @param opt: { |
| * dataZoomX: boolean; |
| * dataZoomY: boolean; |
| * stack: boolean; |
| * } |
| */ |
| function makeMultiCartesian(echarts, opt) { |
| var gridHeight = 100; |
| var currTop = 40; |
| var gap = 80; |
| |
| var option = { |
| grid: [], |
| xAxis: [], |
| yAxis: [], |
| series: [], |
| dataZoom: [] |
| }; |
| |
| function makeCartesian(option, partialOption, label) { |
| option.grid.push({ |
| top: currTop, |
| height: gridHeight |
| }); |
| |
| option.xAxis.push(echarts.util.defaults({ |
| gridIndex: option.grid.length - 1 |
| }, partialOption.xAxis)); |
| |
| option.yAxis.push(echarts.util.defaults({ |
| name: label[ |
| opt.dataZoomX ? 'dataZoomX' : |
| opt.dataZoomY ? 'dataZoomY' : |
| 'noDataZoom' |
| ], |
| nameTextStyle: { |
| align: 'left' |
| }, |
| gridIndex: option.grid.length - 1 |
| }, partialOption.yAxis)); |
| |
| var xAxisIndex = option.xAxis.length - 1; |
| var yAxisIndex = option.yAxis.length - 1; |
| |
| var seriesList = partialOption.seriesList[opt.stack ? 'stackHas' : 'stackNon']; |
| echarts.util.each(seriesList, function (series) { |
| // FIXME: |
| // currently (20200619) if series.stack is the same but series |
| // on different grid, that would get wrong result. |
| if (opt.stack) { |
| series.stack = series.stack + '__' + xAxisIndex + '_' + yAxisIndex; |
| } |
| option.series.push(echarts.util.defaults({ |
| label: { show: true }, |
| itemStyle: { |
| opacity: 0.8 |
| }, |
| xAxisIndex: xAxisIndex, |
| yAxisIndex: yAxisIndex |
| }, series)); |
| }); |
| |
| if (opt.dataZoomX) { |
| option.dataZoom.push({ |
| type: 'slider', |
| filterMode: 'none', |
| height: 15, |
| top: currTop + gridHeight + 20, |
| xAxisIndex: xAxisIndex |
| }, { |
| type: 'inside', |
| filterMode: 'none', |
| xAxisIndex: xAxisIndex |
| }); |
| } |
| if (opt.dataZoomY) { |
| option.dataZoom.push({ |
| type: 'slider', |
| filterMode: 'none', |
| yAxisIndex: yAxisIndex |
| }, { |
| type: 'inside', |
| filterMode: 'none', |
| yAxisIndex: yAxisIndex |
| }); |
| } |
| |
| currTop += gridHeight + gap; |
| } |
| |
| // --------------------------------------- |
| // Cases in a single chart instance BEGIN |
| // --------------------------------------- |
| |
| makeCartesian(option, { |
| xAxis: { |
| type: 'category' |
| }, |
| yAxis: { |
| }, |
| seriesList: { |
| stackNon: [{ |
| type: 'bar', |
| data: [['a', 22], ['b', 52], ['c', 659]] |
| }], |
| stackHas: [{ |
| type: 'bar', |
| stack: 's', |
| data: [['a', 12], ['b', 32], ['c', 200]] |
| }, { |
| type: 'bar', |
| stack: 's', |
| data: [['a', 10], ['b', 20], ['c', 459]] |
| }] |
| } |
| }, { |
| noDataZoom: 'y-min: 0, y-max: niced from 659, x-min: "a", x-max: "c"', |
| dataZoomX: 'y-min: 0, y-max: niced from 659, x-min: "a", x-max: "c"', |
| dataZoomY: 'y-min: 0, y-max: niced from 659, x-min: "a", x-max: "c"', |
| }); |
| |
| makeCartesian(option, { |
| xAxis: { |
| type: 'category', |
| max: 1 |
| }, |
| yAxis: { |
| }, |
| seriesList: { |
| stackNon: [{ |
| type: 'bar', |
| data: [['a', 22], ['b', 52], ['c', 959]] |
| }], |
| stackHas: [{ |
| type: 'bar', |
| stack: 's', |
| data: [['a', 12], ['b', 32], ['c', 359]] |
| }, { |
| type: 'bar', |
| stack: 's', |
| data: [['a', 10], ['b', 20], ['c', 600]] |
| }] |
| } |
| }, { |
| noDataZoom: 'y-min: 0, y-max: niced from 52, x-min: "a", x-max: "b"', |
| dataZoomX: 'y-min: 0, y-max: niced from 959, x-min: "a", x-max: "b"', |
| dataZoomY: 'y-min: 0, y-max: niced from 959, x-min: "a", x-max: "b"' |
| }); |
| |
| makeCartesian(option, { |
| xAxis: { |
| type: 'category', |
| max: 2, |
| min: 1 |
| }, |
| yAxis: { |
| }, |
| seriesList: { |
| stackNon: [{ |
| type: 'bar', |
| data: [['a', 959], ['b', 22], ['c', 52], ['d', -959]] |
| }], |
| stackHas: [{ |
| type: 'bar', |
| stack: 's', |
| data: [['a', 300], ['b', 12], ['c', 32], ['d', -259]] |
| }, { |
| type: 'bar', |
| stack: 's', |
| data: [['a', 659], ['b', 10], ['c', 20], ['d', -700]] |
| }], |
| } |
| }, { |
| noDataZoom: 'y-min: 0, y-max: niced from 52, x-min: "b", x-max: "c"', |
| dataZoomX: 'y-min: niced from -959, y-max: niced from 959, x-min: "b", x-max: "c"', |
| dataZoomY: 'y-min: niced from -959, y-max: niced from 959, x-min: "b", x-max: "c"' |
| }); |
| |
| makeCartesian(option, { |
| xAxis: { |
| type: 'category', |
| max: 2, |
| min: 1 |
| }, |
| yAxis: { |
| max: 500 |
| }, |
| seriesList: { |
| stackNon: [{ |
| type: 'bar', |
| data: [['a', 959], ['b', 22], ['c', 52], ['d', -959]] |
| }], |
| stackHas: [{ |
| type: 'bar', |
| stack: 's', |
| data: [['a', 159], ['b', 2], ['c', 7], ['d', -59]] |
| }, { |
| type: 'bar', |
| stack: 's', |
| data: [['a', 800], ['b', 20], ['c', 45], ['d', -900]] |
| }] |
| } |
| }, { |
| noDataZoom: 'y-min: 0, y-max: 500, x-min: "b", x-max: "c"', |
| dataZoomX: 'y-min: niced from -959, y-max: 500, x-min: "b", x-max: "c"', |
| dataZoomY: 'y-min: niced from -959, y-max: 500, x-min: "b", x-max: "c"' |
| }); |
| |
| makeCartesian(option, { |
| xAxis: { |
| type: 'category', |
| min: 1 |
| }, |
| yAxis: { |
| scale: true |
| }, |
| seriesList: { |
| stackNon: [{ |
| type: 'line', |
| areaStyle: {}, |
| data: [['a', 359], ['b', 122], ['c', 152]] |
| }], |
| stackHas: [{ |
| type: 'line', |
| stack: 's', |
| data: [['a', 159], ['b', 62], ['c', 100]] |
| }, { |
| type: 'line', |
| stack: 's', |
| areaStyle: {}, |
| data: [['a', 200], ['b', 60], ['c', 52]] |
| }] |
| } |
| }, { |
| noDataZoom: '(yAxis.scale: true) y-min: niced from (noStack ? 122 : 62), y-max: niced from 152, x-min: "b", x-max: "c"', |
| dataZoomX: '(yAxis.scale: true) y-min: niced from (noStack ? 122 : 62), y-max: niced from 359, x-min: "b", x-max: "c"', |
| dataZoomY: '(yAxis.scale: true) y-min: niced from (noStack ? 122 : 62), y-max: niced from 359, x-min: "b", x-max: "c"' |
| }); |
| |
| makeCartesian(option, { |
| xAxis: { |
| type: 'category', |
| min: 1, |
| max: 2 |
| }, |
| yAxis: { |
| boundaryGap: ['50%', '50%'] |
| }, |
| seriesList: { |
| stackNon: [{ |
| type: 'bar', |
| data: [['a', 559], ['b', 82], ['c', 152], ['d', -559]] |
| }], |
| stackHas: [{ |
| type: 'bar', |
| stack: 's', |
| data: [['a', 159], ['b', 22], ['c', 52], ['d', -159]] |
| }, { |
| type: 'bar', |
| stack: 's', |
| data: [['a', 400], ['b', 60], ['c', 100], ['d', -459]] |
| }] |
| } |
| }, { |
| // 187 = 152 + .5 * (152 - 82) |
| // 217 = 152 + .5 * (152 - 22) |
| // -43 = 22-.5 * (152 - 22) |
| noDataZoom: '(boundaryGap: [.5, .5]) y-min: (noStack ? 0 : -43), y-max: niced from (noStack ? 187 : 217), x-min: "b", x-max: "c"', |
| dataZoomX: '(boundaryGap: [.5, .5]) y-min: -1118, y-max: niced from 1118, x-min: "b", x-max: "c"', |
| dataZoomY: '(boundaryGap: [.5, .5]) y-min: -1118, y-max: niced from 1118, x-min: "b", x-max: "c"' |
| }); |
| |
| // ------------------------------------- |
| // Cases in a single chart instance END |
| // ------------------------------------- |
| |
| return option; |
| } |
| </script> |
| |
| |
| |
| |
| <script> |
| require(['echarts'], function (echarts) { |
| var option = makeMultiCartesian(echarts, {}); |
| |
| var chart = testHelper.create(echarts, 'main-no-dataZoom', { |
| title: [ |
| 'Check xAxis, yAxis min/max' |
| ], |
| option: option, |
| height: TOTAL_HEIGHT |
| }); |
| }); |
| </script> |
| |
| |
| |
| <script> |
| require(['echarts'], function (echarts) { |
| var option = makeMultiCartesian(echarts, { |
| dataZoomX: true |
| }); |
| |
| var chart = testHelper.create(echarts, 'main-has-dataZoom-x', { |
| title: [ |
| '[has **dataZoom on X** filterMode: "none"] Check xAxis, yAxis min/max' |
| ], |
| option: option, |
| height: TOTAL_HEIGHT |
| }); |
| }); |
| </script> |
| |
| |
| |
| <script> |
| require(['echarts'], function (echarts) { |
| var option = makeMultiCartesian(echarts, { |
| dataZoomY: true |
| }); |
| |
| var chart = testHelper.create(echarts, 'main-has-dataZoom-y', { |
| title: [ |
| '[has **dataZoom on Y** filterMode: "none"] Check xAxis, yAxis min/max' |
| ], |
| option: option, |
| height: TOTAL_HEIGHT |
| }); |
| }); |
| </script> |
| |
| |
| |
| <script> |
| require(['echarts'], function (echarts) { |
| var option = makeMultiCartesian(echarts, { |
| stack: true |
| }); |
| |
| var chart = testHelper.create(echarts, 'main-has-stack', { |
| title: [ |
| '[has **stack**] Check xAxis, yAxis min/max' |
| ], |
| option: option, |
| height: TOTAL_HEIGHT |
| }); |
| }); |
| </script> |
| |
| |
| <script> |
| require(['echarts'], function (echarts) { |
| var option = makeMultiCartesian(echarts, { |
| stack: true, |
| dataZoomY: true |
| }); |
| |
| var chart = testHelper.create(echarts, 'main-has-dataZoom-y-stack', { |
| title: [ |
| '[has **dataZoom on Y** has **stack**] Check xAxis, yAxis min/max' |
| ], |
| option: option, |
| height: TOTAL_HEIGHT |
| }); |
| }); |
| </script> |
| |
| |
| |
| </body> |
| </html> |
| |
