You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by su...@apache.org on 2019/11/06 21:15:28 UTC
[incubator-echarts] branch fix/bar-width-on-value-axis created (now
7f7e013)
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a change to branch fix/bar-width-on-value-axis
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git.
at 7f7e013 fix: fix bar width strategy. (1) On value axis, the auto-calculated bar width might be near 0, which make the bar invisible. So we add option `barMinWidth` (default 1 in category and default null in other coord sys). (2) In #5316 (commit 2823ab502bf1af27c33de6d09729bc287ef0a185) the fix seems not correct. check the "main3" case in `echarts/test/bar-width.html`. That fix would made the `barMaxWidth` has higher priority than `barWidth`. But it only works when auto-calculat [...]
This branch includes the following new commits:
new 7f7e013 fix: fix bar width strategy. (1) On value axis, the auto-calculated bar width might be near 0, which make the bar invisible. So we add option `barMinWidth` (default 1 in category and default null in other coord sys). (2) In #5316 (commit 2823ab502bf1af27c33de6d09729bc287ef0a185) the fix seems not correct. check the "main3" case in `echarts/test/bar-width.html`. That fix would made the `barMaxWidth` has higher priority than `barWidth`. But it only works when auto-calculat [...]
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[incubator-echarts] 01/01: fix: fix bar width strategy. (1) On
value axis, the auto-calculated bar width might be near 0,
which make the bar invisible. So we add option `barMinWidth` (default 1 in
category and default null in other coord sys). (2) In #5316 (commit
2823ab502bf1af27c33de6d09729bc287ef0a185) the fix seems not correct. check
the "main3" case in `echarts/test/bar-width.html`. That fix would made the
`barMaxWidth` has higher priority than `barWidth`. But it only works when
auto-calculated bar width is big [...]
Posted by su...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch fix/bar-width-on-value-axis
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit 7f7e0131ac2a9efddbc04b3f308e83c6f7d12226
Author: SHUANG SU <su...@gmail.com>
AuthorDate: Thu Nov 7 05:14:19 2019 +0800
fix: fix bar width strategy.
(1) On value axis, the auto-calculated bar width might be near 0, which make the bar invisible.
So we add option `barMinWidth` (default 1 in category and default null in other coord sys).
(2) In #5316 (commit 2823ab502bf1af27c33de6d09729bc287ef0a185) the fix seems not correct.
check the "main3" case in `echarts/test/bar-width.html`. That fix would made the `barMaxWidth` has
higher priority than `barWidth`. But it only works when auto-calculated bar width is bigger than the
giving `barWidth`. So the behavior seems weird.
This fix revert it and use the strategy: `barWidth` always has higher priority than `barMaxWidth`.
---
src/chart/bar/BaseBarSeries.js | 4 +
src/chart/custom.js | 1 +
src/layout/barGrid.js | 35 ++++-
test/bar-width.html | 289 +++++++++++++++++++++++++++++++++++++++++
4 files changed, 322 insertions(+), 7 deletions(-)
diff --git a/src/chart/bar/BaseBarSeries.js b/src/chart/bar/BaseBarSeries.js
index 7c8b603..e27f0a7 100644
--- a/src/chart/bar/BaseBarSeries.js
+++ b/src/chart/bar/BaseBarSeries.js
@@ -66,6 +66,10 @@ export default SeriesModel.extend({
progressiveChunkMode: 'mod',
// barMaxWidth: null,
+
+ // In cartesian, the default value is 1. Otherwise null.
+ // barMinWidth: null,
+
// 默认自适应
// barWidth: null,
// 柱间距离，默认为柱形宽度的30%，可设固定值
diff --git a/src/chart/custom.js b/src/chart/custom.js
index 784e59c..c1dd8be 100644
--- a/src/chart/custom.js
+++ b/src/chart/custom.js
@@ -539,6 +539,7 @@ function makeRenderItem(customSeries, data, ecModel, api) {
* @param {number} opt.count Positive interger.
* @param {number} [opt.barWidth]
* @param {number} [opt.barMaxWidth]
+ * @param {number} [opt.barMinWidth]
* @param {number} [opt.barGap]
* @param {number} [opt.barCategoryGap]
* @return {Object} {width, offset, offsetCenter} is not support, return undefined.
diff --git a/src/layout/barGrid.js b/src/layout/barGrid.js
index 069cc25..a287938 100644
--- a/src/layout/barGrid.js
+++ b/src/layout/barGrid.js
@@ -43,6 +43,7 @@ function getAxisKey(axis) {
* @param {number} opt.count Positive interger.
* @param {number} [opt.barWidth]
* @param {number} [opt.barMaxWidth]
+ * @param {number} [opt.barMinWidth]
* @param {number} [opt.barGap]
* @param {number} [opt.barCategoryGap]
* @return {Object} {width, offset, offsetCenter} If axis.type is not 'category', return undefined.
@@ -187,6 +188,11 @@ export function makeColumnLayout(barSeries) {
var barMaxWidth = parsePercent(
seriesModel.get('barMaxWidth'), bandWidth
);
+ var barMinWidth = parsePercent(
+ // barMinWidth by default is 1 in cartesian. Because in value axis,
+ // the auto-calculated bar width might be less than 1.
+ seriesModel.get('barMinWidth') || 1, bandWidth
+ );
var barGap = seriesModel.get('barGap');
var barCategoryGap = seriesModel.get('barCategoryGap');
@@ -194,6 +200,7 @@ export function makeColumnLayout(barSeries) {
bandWidth: bandWidth,
barWidth: barWidth,
barMaxWidth: barMaxWidth,
+ barMinWidth: barMinWidth,
barGap: barGap,
barCategoryGap: barCategoryGap,
axisKey: getAxisKey(baseAxis),
@@ -248,6 +255,8 @@ function doCalBarWidthAndOffset(seriesInfoList) {
var barMaxWidth = seriesInfo.barMaxWidth;
barMaxWidth && (stacks[stackId].maxWidth = barMaxWidth);
+ var barMinWidth = seriesInfo.barMinWidth;
+ barMinWidth && (stacks[stackId].minWidth = barMinWidth);
var barGap = seriesInfo.barGap;
(barGap != null) && (columnsOnAxis.gap = barGap);
var barCategoryGap = seriesInfo.barCategoryGap;
@@ -273,14 +282,26 @@ function doCalBarWidthAndOffset(seriesInfoList) {
// Find if any auto calculated bar exceeded maxBarWidth
zrUtil.each(stacks, function (column, stack) {
+ if (column.width) {
+ return;
+ }
var maxWidth = column.maxWidth;
- if (maxWidth && maxWidth < autoWidth) {
- maxWidth = Math.min(maxWidth, remainedWidth);
- if (column.width) {
- maxWidth = Math.min(maxWidth, column.width);
- }
- remainedWidth -= maxWidth;
- column.width = maxWidth;
+ var minWidth = column.minWidth;
+ var finalWidth = autoWidth;
+ if (maxWidth && maxWidth < finalWidth) {
+ finalWidth = Math.min(finalWidth, maxWidth, remainedWidth);
+ }
+ // `minWidth` has higher priority. `minWidth` decide that wheter the
+ // bar is able to be visible. So `minWidth` should not be restricted
+ // by `maxWidth` or `remainedWidth` (which is from `bandWidth`). In
+ // the extreme cases for `value` axis, bars are allowed to overlap
+ // with each other if `minWidth` specified.
+ if (minWidth && minWidth > finalWidth) {
+ finalWidth = Math.max(finalWidth, minWidth);
+ }
+ if (finalWidth !== autoWidth) {
+ column.width = finalWidth;
+ remainedWidth -= finalWidth;
autoWidthCount--;
}
});
diff --git a/test/bar-width.html b/test/bar-width.html
new file mode 100644
index 0000000..e788d04
--- /dev/null
+++ b/test/bar-width.html
@@ -0,0 +1,289 @@
+
+<!--
+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">
+ <script src="lib/esl.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>
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <link rel="stylesheet" href="lib/reset.css">
+ </head>
+ <body>
+ <style>
+ h1 {
+ line-height: 60px;
+ height: 60px;
+ background: #146402;
+ text-align: center;
+ font-weight: bold;
+ color: #eee;
+ font-size: 14px;
+ }
+ .chart {
+ height: 400px;
+ }
+ </style>
+
+ <div class="chart" id="main1"></div>
+ <div class="chart" id="main2"></div>
+ <div class="chart" id="main3"></div>
+
+
+ <script>
+
+ require([
+ 'echarts'
+ ], function (echarts) {
+ var data = [
+ [7880,6.52],
+ [7881,3.18], // very near 7880, which makes the bar very thin
+ [6110,2.68],
+ [7390,9.55],
+ [7250,5.59],
+ [7300,7.43],
+ [3980,8.54],
+ [4290,3.22],
+ [500,4.68],
+ [1720,5.15],
+ [900,9],
+ [910,10]
+ ];
+
+ function makeOption() {
+ var option = {
+ tooltip: {},
+ xAxis: {
+ },
+ yAxis: {
+ },
+ dataZoom:
+ [{
+ type: 'inside'
+ }, {
+ type: 'slider'
+ }],
+ series: {
+ type: 'bar',
+ label: {
+ show: true,
+ position: 'top'
+ },
+ data: data
+ },
+ title: {
+ text: 'no barMinWidth, no barMaxWidth specifed'
+ }
+ };
+ return option;
+ }
+
+ var chart = testHelper.create(echarts, 'main1', {
+ title: [
+ 'On `value` axis.',
+ 'Test **barMinWidth** and **barMaxWidth**: move dataZoom, ',
+ 'bar should be **visible** ',
+ '**bar width** should be correct as the title described.'
+ ],
+ height: 200,
+ option: makeOption(),
+ buttons: [{
+ text: 'barMinWidth: 10',
+ onclick: function () {
+ var option = makeOption();
+ option.title.text = 'barMinWidth: 10, no barMaxWidth';
+ option.series.barMinWidth = 10;
+ chart.setOption(option, true);
+ }
+ }, {
+ text: 'barMinWidth: 10, barMaxWidth: 40',
+ onclick: function () {
+ var option = makeOption();
+ option.title.text = 'barMinWidth: 10, barMaxWidth: 40';
+ option.series.barMinWidth = 10;
+ option.series.barMaxWidth = 40;
+ chart.setOption(option, true);
+ }
+ }, {
+ text: 'barMaxWidth: 40',
+ onclick: function () {
+ var option = makeOption();
+ option.title.text = 'no barMinWidth, barMaxWidth: 40';
+ option.series.barMaxWidth = 40;
+ chart.setOption(option, true);
+ }
+ }]
+ });
+ });
+
+ </script>
+
+
+
+
+
+
+
+
+ <script>
+
+ require([
+ 'echarts'
+ ], function (echarts) {
+ var data = [];
+ for (var i = 0; i < 80; i++) {
+ data.push(['a' + i, 10]);
+ }
+
+ function makeOption() {
+ var option = {
+ tooltip: {},
+ xAxis: {
+ type: 'category'
+ },
+ yAxis: {
+ },
+ dataZoom:
+ [{
+ type: 'inside'
+ }, {
+ type: 'slider'
+ }],
+ series: {
+ type: 'bar',
+ data: data
+ },
+ title: {
+ text: 'no barMinWidth, no barMaxWidth specifed'
+ }
+ };
+ return option;
+ }
+
+ var chart = testHelper.create(echarts, 'main2', {
+ title: [
+ 'On `category` axis.',
+ 'Test **barMinWidth** and **barMaxWidth**: move dataZoom, ',
+ 'bar should be **visible**.',
+ '**bar width** should be correct as the title described.'
+ ],
+ height: 200,
+ width: 600,
+ option: makeOption(),
+ buttons: [{
+ text: 'barMinWidth: 10',
+ onclick: function () {
+ var option = makeOption();
+ option.title.text = 'barMinWidth: 10, no barMaxWidth';
+ option.series.barMinWidth = 10;
+ chart.setOption(option, true);
+ }
+ }, {
+ text: 'barMinWidth: 10, barMaxWidth: 40',
+ onclick: function () {
+ var option = makeOption();
+ option.title.text = 'barMinWidth: 10, barMaxWidth: 40';
+ option.series.barMinWidth = 10;
+ option.series.barMaxWidth = 40;
+ chart.setOption(option, true);
+ }
+ }, {
+ text: 'barMaxWidth: 40',
+ onclick: function () {
+ var option = makeOption();
+ option.title.text = 'no barMinWidth, barMaxWidth: 40';
+ option.series.barMaxWidth = 40;
+ chart.setOption(option, true);
+ }
+ }]
+ });
+ });
+
+ </script>
+
+
+
+
+ <script>
+
+ require([
+ 'echarts'
+ ], function (echarts) {
+ var data = [
+ [7880,6.52],
+ [7881,3.18],
+ [6110,2.68],
+ [7390,9.55],
+ [7250,5.59],
+ [7300,7.43],
+ [3980,8.54],
+ [4290,3.22],
+ [500,4.68],
+ [1720,5.15],
+ [900,9],
+ [910,10]
+ ];
+
+ var option = {
+ tooltip: {},
+ xAxis: {
+ type: 'category'
+ },
+ yAxis: {
+ },
+ dataZoom:
+ [{
+ type: 'inside'
+ }, {
+ type: 'slider'
+ }],
+ series: {
+ type: 'bar',
+ label: {
+ show: true,
+ position: 'top'
+ },
+ barWidth: 40,
+ // Smaller than `barWidth`
+ barMaxWidth: 10,
+ data: data
+ }
+ };
+
+ var chart = testHelper.create(echarts, 'main3', {
+ title: [
+ 'Test: **barWidth** should have higher priority then **barMaxWidth**',
+ 'Zoom the data, the bar width should **keep 40px**'
+ ],
+ height: 200,
+ option: option
+ });
+ });
+
+ </script>
+
+
+
+
+ </body>
+</html>
\ No newline at end of file
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org