| <!-- | |
| 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> | |
| <link rel="stylesheet" href="lib/reset.css" /> | |
| </head> | |
| <body> | |
| <div id="main_onZero" class="chart"></div> | |
| <div id="main_category_axis" class="chart"></div> | |
| <div id="main_value_axis" class="chart"></div> | |
| <script type="text/javascript"> | |
| require(['echarts'], function (echarts) { | |
| var _ctx = { | |
| yAxisOnZero: { | |
| text: 'yAxis.axisLine.onZero:', | |
| value: 'NOT_SET', | |
| values: ['NOT_SET', true, false, undefined, 'auto'], | |
| }, | |
| useDataZoom: { | |
| text: 'useDataZoom:', | |
| value: true, | |
| values: [true, false], | |
| }, | |
| xAxisShowMinMaxLabel: { | |
| text: 'xAxisShowMinMaxLabel:', | |
| value: undefined, | |
| values: [undefined, true, false], | |
| }, | |
| br: {}, | |
| dataZoomLabelPrecision: { | |
| text: 'dataZoomLabelPrecision:', | |
| value: undefined, | |
| values: [undefined, 0, 2, 4, 8], | |
| }, | |
| stack: { | |
| text: 'stack', | |
| value: false, | |
| values: [false, true], | |
| }, | |
| }; | |
| function createData() { | |
| var MIN_X = -0.0025; | |
| var MAX_X = 0.0035; | |
| var actualMinX = Infinity; | |
| var data0 = []; | |
| var data1 = []; | |
| var bar_partially_negative = []; | |
| var last = 360; | |
| var lastDelta = 20; | |
| var dataSet = {bar_a: [], bar_b: [], bar_partially_negative: []}; | |
| var minXSet = {bar_a: Infinity, bar_b: Infinity, bar_partially_negative: Infinity}; | |
| for (var i = MIN_X; i <= MAX_X; i = +(i + 0.0001).toFixed(10)) { | |
| lastDelta += (Math.random() - 0.5) * 5; | |
| last += lastDelta; | |
| if (i >= 0) { | |
| addItem('bar_a', i, last); | |
| addItem('bar_b', i, Math.max(90, last - Math.random() * 700)); | |
| } | |
| if (i < 0.0030) { | |
| addItem('bar_partially_negative', i, Math.max(70, last + Math.random() * 600)); | |
| } | |
| } | |
| function addItem(prop, x, y) { | |
| dataSet[prop].push([x, y]); | |
| minXSet[prop] = Math.min(minXSet[prop], x); | |
| } | |
| console.log(dataSet, minXSet) | |
| return {dataSet, minXSet}; | |
| } | |
| var _data = createData(); | |
| function createOption() { | |
| var option = { | |
| grid: { | |
| top: 50, | |
| bottom: 100, | |
| show: true, | |
| backgroundColor: '#fee', | |
| borderWidth: 0, | |
| }, | |
| legend: { | |
| top: 5, | |
| selected: { | |
| 'bar_partially_negative': false, | |
| }, | |
| }, | |
| tooltip: { | |
| trigger: 'axis', | |
| axisPointer: { | |
| type: 'shadow' | |
| } | |
| }, | |
| dataZoom: _ctx.useDataZoom.value | |
| ? [{ | |
| type: 'slider', | |
| labelPrecision: _ctx.dataZoomLabelPrecision.value, | |
| valuePrecision: 4, | |
| }, { | |
| type: 'inside', | |
| labelPrecision: _ctx.dataZoomLabelPrecision.value, | |
| valuePrecision: 4, | |
| }] | |
| : undefined, | |
| xAxis: { | |
| type: 'value', | |
| splitLine: { | |
| show: false | |
| }, | |
| axisLabel: { | |
| showMinLabel: _ctx.xAxisShowMinMaxLabel.value, | |
| showMaxLabel: _ctx.xAxisShowMinMaxLabel.value, | |
| } | |
| }, | |
| yAxis: { | |
| type: 'value', | |
| axisLine: { | |
| }, | |
| splitLine: { | |
| show: false | |
| } | |
| }, | |
| series: [{ | |
| name: 'bar_a', | |
| type: 'bar', | |
| itemStyle: { | |
| barBorderRadius: 3, | |
| }, | |
| // barMaxWidth: 10, | |
| data: _data.dataSet.bar_a | |
| }, { | |
| name: 'bar_b', | |
| type: 'bar', | |
| itemStyle: { | |
| barBorderRadius: 3, | |
| }, | |
| // barMaxWidth: 10, | |
| data: _data.dataSet.bar_b | |
| }, { | |
| name: 'bar_partially_negative', | |
| type: 'bar', | |
| itemStyle: { | |
| barBorderRadius: 3, | |
| }, | |
| // barMaxWidth: 10, | |
| data: _data.dataSet.bar_partially_negative | |
| }] | |
| }; | |
| if (_ctx.yAxisOnZero.value !== 'NOT_SET') { | |
| option.yAxis.axisLine.onZero = _ctx.yAxisOnZero.value; | |
| } | |
| if (_ctx.stack.value) { | |
| option.series.forEach(individualSeries => { | |
| individualSeries.stack = 'a'; | |
| }); | |
| } | |
| return option; | |
| } | |
| function updateChart() { | |
| myChart.setOption(createOption(), {notMerge: true}); | |
| } | |
| var myChart = testHelper.create(echarts, 'main_onZero', { | |
| title: [ | |
| 'Bars must not overflow the xAxis. (value xAxis)', | |
| 'Check yAxis onZero to xAxis (xAxis is value axis).', | |
| `series data min value is **${testHelper.printObject(_data.minXSet)}**`, | |
| `dataZoom min label should **not below zero**`, | |
| ], | |
| option: createOption(), | |
| inputsStyle: 'compact', | |
| inputs: testHelper.createInputsSimply(_ctx, updateChart), | |
| }); | |
| }) | |
| </script> | |
| <script type="text/javascript"> | |
| require(['echarts'], function (echarts) { | |
| var _ctx = { | |
| dataCount: { | |
| value: 'ALL', | |
| values: ['ALL', 0, 1, 2, 3] | |
| }, | |
| useDataZoom: { | |
| text: 'useDataZoom:', | |
| value: true, | |
| values: [true, false], | |
| }, | |
| br0: {}, | |
| xAxisShowMinMaxLabel: { | |
| text: 'xAxisShowMinMaxLabel:', | |
| value: undefined, | |
| values: [undefined, true, false], | |
| }, | |
| br1: {}, | |
| xAxisContainShape: { | |
| value: 'NOT_SET', | |
| values: ['NOT_SET', false, true] | |
| }, | |
| clip: { | |
| value: 'NOT_SET', | |
| values: ['NOT_SET', false, true], | |
| }, | |
| br2: {}, | |
| dataZoomLabelPrecision: { | |
| text: 'dataZoomLabelPrecision:', | |
| value: undefined, | |
| values: [undefined, 0, 2, 4, 8], | |
| }, | |
| stack: { | |
| text: 'stack', | |
| value: false, | |
| values: [false, true], | |
| }, | |
| xAxisBoundaryGap: { | |
| value: false, | |
| values: [false, true], | |
| }, | |
| barWidth: { | |
| value: 'NOT_SET', | |
| values: ['NOT_SET', 30, '20%', 100] | |
| }, | |
| }; | |
| function createOption() { | |
| function createData() { | |
| var MIN_X = -0.0025; | |
| var MAX_X = 0.0035; | |
| var actualMinX = Infinity; | |
| var last = 360; | |
| var lastDelta = 20; | |
| var dataSet = {bar_a: [], bar_b: [], bar_c: []}; | |
| var minXSet = {bar_a: Infinity, bar_b: Infinity, bar_c: Infinity}; | |
| var idx = 0; | |
| for (var i = MIN_X; | |
| i <= MAX_X | |
| && (_ctx.dataCount.value === 'ALL' || idx < _ctx.dataCount.value); | |
| i = +(i + 0.0001).toFixed(10), idx++ | |
| ) { | |
| lastDelta += (Math.random() - 0.5) * 5; | |
| last += lastDelta; | |
| var xVal = (i + 'c').replace('.', '/'); | |
| addItem('bar_a', xVal, last); | |
| addItem('bar_b', xVal, Math.max(90, last - Math.random() * 700)); | |
| addItem('bar_c', xVal, Math.max(70, last + Math.random() * 600)); | |
| } | |
| function addItem(prop, x, y) { | |
| dataSet[prop].push([x, y]); | |
| minXSet[prop] = Math.min(minXSet[prop], x); | |
| } | |
| console.log(dataSet, minXSet) | |
| return {dataSet, minXSet}; | |
| } | |
| var _data = createData(); | |
| var option = { | |
| grid: { | |
| top: 50, | |
| bottom: 100, | |
| width: 400, | |
| show: true, | |
| backgroundColor: '#eef', | |
| borderWidth: 0, | |
| }, | |
| legend: { | |
| top: 5, | |
| }, | |
| tooltip: { | |
| trigger: 'axis', | |
| axisPointer: { | |
| type: 'shadow' | |
| } | |
| }, | |
| dataZoom: _ctx.useDataZoom.value | |
| ? [{ | |
| type: 'slider', | |
| labelPrecision: _ctx.dataZoomLabelPrecision.value, | |
| start: 20, | |
| end: 40, | |
| }, { | |
| type: 'inside', | |
| labelPrecision: _ctx.dataZoomLabelPrecision.value, | |
| start: 20, | |
| end: 40, | |
| }] | |
| : undefined, | |
| xAxis: { | |
| type: 'category', | |
| boundaryGap: _ctx.xAxisBoundaryGap.value, | |
| splitLine: { | |
| show: true | |
| }, | |
| axisTick: { | |
| show: true | |
| }, | |
| axisLabel: { | |
| showMinLabel: _ctx.xAxisShowMinMaxLabel.value, | |
| showMaxLabel: _ctx.xAxisShowMinMaxLabel.value, | |
| } | |
| }, | |
| yAxis: { | |
| type: 'value', | |
| axisLine: { | |
| show: true, | |
| }, | |
| axisTick: { | |
| show: true, | |
| }, | |
| splitLine: { | |
| show: true | |
| } | |
| }, | |
| series: [{ | |
| name: 'bar_a', | |
| type: 'bar', | |
| itemStyle: { | |
| barBorderRadius: 3, | |
| }, | |
| // barMaxWidth: 10, | |
| data: _data.dataSet.bar_a | |
| }, { | |
| name: 'bar_b', | |
| type: 'bar', | |
| itemStyle: { | |
| barBorderRadius: 3, | |
| }, | |
| // barMaxWidth: 10, | |
| data: _data.dataSet.bar_b | |
| }, { | |
| name: 'bar_c', | |
| type: 'bar', | |
| itemStyle: { | |
| barBorderRadius: 3, | |
| }, | |
| // barMaxWidth: 10, | |
| data: _data.dataSet.bar_c | |
| }] | |
| }; | |
| if (_ctx.stack.value) { | |
| option.series.forEach(individualSeries => { | |
| individualSeries.stack = 'a'; | |
| }); | |
| } | |
| if (_ctx.barWidth.value !== 'NOT_SET') { | |
| option.series.forEach(individualSeries => { | |
| individualSeries.barWidth = _ctx.barWidth.value; | |
| }); | |
| } | |
| if (_ctx.xAxisContainShape.value !== 'NOT_SET') { | |
| option.xAxis.containShape = _ctx.xAxisContainShape.value; | |
| } | |
| if (_ctx.clip.value !== 'NOT_SET') { | |
| option.series.forEach(function (series) { | |
| series.clip = _ctx.clip.value; | |
| }); | |
| } | |
| return option; | |
| } | |
| function updateChart() { | |
| myChart.setOption(createOption(), {notMerge: true}); | |
| } | |
| var myChart = testHelper.create(echarts, 'main_category_axis', { | |
| title: [ | |
| 'Bars must not overflow the xAxis. (category xAxis)', | |
| ], | |
| option: createOption(), | |
| inputsStyle: 'compact', | |
| inputs: testHelper.createInputsSimply(_ctx, updateChart), | |
| }); | |
| }) | |
| </script> | |
| <script type="text/javascript"> | |
| require(['echarts'], function (echarts) { | |
| var _ctx = { | |
| dataCount: { | |
| value: 'ALL', | |
| values: ['ALL', 0, 1, 2, 3] | |
| }, | |
| useDataZoom: { | |
| text: 'useDataZoom:', | |
| value: true, | |
| values: [true, false], | |
| }, | |
| br0: {}, | |
| yAxisOnZero: { | |
| text: 'yAxis.axisLine.onZero:', | |
| value: 'NOT_SET', | |
| values: ['NOT_SET', true, false, undefined, 'auto'], | |
| }, | |
| xAxisShowMinMaxLabel: { | |
| text: 'xAxisShowMinMaxLabel:', | |
| value: undefined, | |
| values: [undefined, true, false], | |
| }, | |
| br1: {}, | |
| xAxisMin: { | |
| value: 'NOT_SET', | |
| values: ['NOT_SET', 0, -0.5, -1], | |
| }, | |
| xAxisMax: { | |
| value: 'NOT_SET', | |
| values: ['NOT_SET', 0, 0.5, 1], | |
| }, | |
| xAxisContainShape: { | |
| value: 'NOT_SET', | |
| values: ['NOT_SET', false, true] | |
| }, | |
| clip: { | |
| value: 'NOT_SET', | |
| values: ['NOT_SET', false, true], | |
| }, | |
| br2: {}, | |
| dataZoomLabelPrecision: { | |
| text: 'dataZoomLabelPrecision:', | |
| value: undefined, | |
| values: [undefined, 0, 2, 4, 8], | |
| }, | |
| stack: { | |
| text: 'stack', | |
| value: false, | |
| values: [false, true], | |
| }, | |
| xAxisBoundaryGap: { | |
| value: 'NOT_SET', | |
| values: ['NOT_SET', ['20%', '20%']], | |
| }, | |
| barWidth: { | |
| value: 'NOT_SET', | |
| values: ['NOT_SET', 30, '20%', 100] | |
| }, | |
| }; | |
| function createOption() { | |
| function createData() { | |
| var MIN_X = -0.0025; | |
| var MAX_X = 0.0035; | |
| var actualMinX = Infinity; | |
| var last = 360; | |
| var lastDelta = 20; | |
| var dataSet = {bar_a: [], bar_b: [], bar_c: []}; | |
| var minXSet = {bar_a: Infinity, bar_b: Infinity, bar_c: Infinity}; | |
| var idx = 0; | |
| for (var i = MIN_X; | |
| i <= MAX_X | |
| && (_ctx.dataCount.value === 'ALL' || idx < _ctx.dataCount.value); | |
| i = +(i + 0.0001).toFixed(10), idx++ | |
| ) { | |
| lastDelta += (Math.random() - 0.5) * 5; | |
| last += lastDelta; | |
| var xVal = idx; | |
| addItem('bar_a', xVal, last); | |
| addItem('bar_b', xVal, Math.max(90, last - Math.random() * 700)); | |
| addItem('bar_c', xVal, Math.max(70, last + Math.random() * 600)); | |
| } | |
| function addItem(prop, x, y) { | |
| dataSet[prop].push([x, y]); | |
| minXSet[prop] = Math.min(minXSet[prop], x); | |
| } | |
| console.log(dataSet, minXSet) | |
| return {dataSet, minXSet}; | |
| } | |
| var _data = createData(); | |
| var option = { | |
| grid: { | |
| top: 50, | |
| bottom: 100, | |
| width: 400, | |
| show: true, | |
| backgroundColor: '#eef', | |
| borderWidth: 0, | |
| }, | |
| legend: { | |
| top: 5, | |
| }, | |
| tooltip: { | |
| trigger: 'axis', | |
| axisPointer: { | |
| type: 'shadow' | |
| } | |
| }, | |
| dataZoom: _ctx.useDataZoom.value | |
| ? [{ | |
| type: 'slider', | |
| labelPrecision: _ctx.dataZoomLabelPrecision.value, | |
| start: 20, | |
| end: 40, | |
| }, { | |
| type: 'inside', | |
| labelPrecision: _ctx.dataZoomLabelPrecision.value, | |
| start: 20, | |
| end: 40, | |
| }] | |
| : undefined, | |
| xAxis: { | |
| type: 'value', | |
| splitLine: { | |
| show: true | |
| }, | |
| axisTick: { | |
| show: true | |
| }, | |
| axisLabel: { | |
| showMinLabel: _ctx.xAxisShowMinMaxLabel.value, | |
| showMaxLabel: _ctx.xAxisShowMinMaxLabel.value, | |
| } | |
| }, | |
| yAxis: { | |
| type: 'value', | |
| axisLine: { | |
| show: true, | |
| }, | |
| axisTick: { | |
| show: true, | |
| }, | |
| splitLine: { | |
| show: true | |
| } | |
| }, | |
| series: [{ | |
| name: 'bar_a', | |
| type: 'bar', | |
| itemStyle: { | |
| barBorderRadius: 3, | |
| }, | |
| // barMaxWidth: 10, | |
| data: _data.dataSet.bar_a | |
| }, { | |
| name: 'bar_b', | |
| type: 'bar', | |
| itemStyle: { | |
| barBorderRadius: 3, | |
| }, | |
| // barMaxWidth: 10, | |
| data: _data.dataSet.bar_b | |
| }, { | |
| name: 'bar_c', | |
| type: 'bar', | |
| itemStyle: { | |
| barBorderRadius: 3, | |
| }, | |
| // barMaxWidth: 10, | |
| data: _data.dataSet.bar_c | |
| }] | |
| }; | |
| if (_ctx.yAxisOnZero.value !== 'NOT_SET') { | |
| option.yAxis.axisLine.onZero = _ctx.yAxisOnZero.value; | |
| } | |
| if (_ctx.stack.value) { | |
| option.series.forEach(individualSeries => { | |
| individualSeries.stack = 'a'; | |
| }); | |
| } | |
| if (_ctx.barWidth.value !== 'NOT_SET') { | |
| option.series.forEach(individualSeries => { | |
| individualSeries.barWidth = _ctx.barWidth.value; | |
| }); | |
| } | |
| if (_ctx.xAxisContainShape.value !== 'NOT_SET') { | |
| option.xAxis.containShape = _ctx.xAxisContainShape.value; | |
| } | |
| if (_ctx.xAxisMin.value !== 'NOT_SET') { | |
| option.xAxis.min = _ctx.xAxisMin.value; | |
| } | |
| if (_ctx.xAxisMax.value !== 'NOT_SET') { | |
| option.xAxis.max = _ctx.xAxisMax.value; | |
| } | |
| if (_ctx.clip.value !== 'NOT_SET') { | |
| option.series.forEach(function (series) { | |
| series.clip = _ctx.clip.value; | |
| }); | |
| } | |
| if (_ctx.xAxisBoundaryGap.value !== 'NOT_SET') { | |
| option.xAxis.boundaryGap = _ctx.xAxisBoundaryGap.value; | |
| } | |
| return option; | |
| } | |
| function updateChart() { | |
| myChart.setOption(createOption(), {notMerge: true}); | |
| } | |
| var myChart = testHelper.create(echarts, 'main_value_axis', { | |
| title: [ | |
| 'Bars must not overflow the xAxis. (value xAxis)', | |
| ], | |
| option: createOption(), | |
| inputsStyle: 'compact', | |
| inputs: testHelper.createInputsSimply(_ctx, updateChart), | |
| }); | |
| }) | |
| </script> | |
| </body> | |
| </html> |