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/07 07:04:05 UTC
[incubator-echarts] branch release updated (1191976 -> 2ca8536)
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a change to branch release
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git.
from 1191976 fix: make code more robust.
new adf659a 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) The fix #5316 (commit 2823ab502bf1af27c33de6d09729bc287ef0a185) seems not work any more currently. check the cases in `echarts/test/bar-width.html`. This fix make it works.
new 2ca8536 fix: fix the last commit: tweak code and fix remainWidth when barWidth is given.
The 2 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.
Summary of changes:
src/chart/bar/BaseBarSeries.js | 4 +
src/chart/custom.js | 1 +
src/layout/barGrid.js | 50 ++++++--
test/bar-width.html | 254 +++++++++++++++++++++++++++++++++++++++++
4 files changed, 302 insertions(+), 7 deletions(-)
create mode 100644 test/bar-width.html
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[incubator-echarts] 01/02: 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) The fix #5316 (commit
2823ab502bf1af27c33de6d09729bc287ef0a185) seems not work any more
currently. check the cases in `echarts/test/bar-width.html`. This fix make
it works.
Posted by su...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch release
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit adf659aee25bf19823056745fcfbd9422deca8a3
Author: SHUANG SU <su...@gmail.com>
AuthorDate: Thu Nov 7 13:37:16 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) The fix #5316 (commit 2823ab502bf1af27c33de6d09729bc287ef0a185) seems not work any more currently.
check the cases in `echarts/test/bar-width.html`. This fix make it works.
---
src/chart/bar/BaseBarSeries.js | 4 +
src/chart/custom.js | 1 +
src/layout/barGrid.js | 48 ++++++--
test/bar-width.html | 254 +++++++++++++++++++++++++++++++++++++++++
4 files changed, 300 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 09e85e3..ece940e 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.
@@ -189,6 +190,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');
@@ -196,6 +202,7 @@ export function makeColumnLayout(barSeries) {
bandWidth: bandWidth,
barWidth: barWidth,
barMaxWidth: barMaxWidth,
+ barMinWidth: barMinWidth,
barGap: barGap,
barCategoryGap: barCategoryGap,
axisKey: getAxisKey(baseAxis),
@@ -250,6 +257,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;
@@ -276,14 +285,39 @@ function doCalBarWidthAndOffset(seriesInfoList) {
// Find if any auto calculated bar exceeded maxBarWidth
zrUtil.each(stacks, function (column, stack) {
var maxWidth = column.maxWidth;
- if (maxWidth && maxWidth < autoWidth) {
- maxWidth = Math.min(maxWidth, remainedWidth);
- if (column.width) {
- maxWidth = Math.min(maxWidth, column.width);
+ var minWidth = column.minWidth;
+ if (!column.width) {
+ 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--;
+ }
+ }
+ else {
+ // `barMinWidth/barMaxWidth` has higher priority than `barWidth`, as
+ // CSS does. Becuase barWidth can be a percent value, where
+ // `barMaxWidth` can be used to restrict the final width.
+ var finalWidth = column.width;
+ if (maxWidth) {
+ finalWidth = Math.min(finalWidth, maxWidth);
+ }
+ // `minWidth` has higher priority, as described above
+ if (minWidth) {
+ finalWidth = Math.max(finalWidth, minWidth);
}
- remainedWidth -= maxWidth;
- column.width = maxWidth;
- autoWidthCount--;
+ column.width = finalWidth;
}
});
diff --git a/test/bar-width.html b/test/bar-width.html
new file mode 100644
index 0000000..416a34e
--- /dev/null
+++ b/test/bar-width.html
@@ -0,0 +1,254 @@
+
+<!--
+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>
+
+
+ <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);
+ }
+ }, {
+ text: 'barWidth: 60, barMaxWidth: 20',
+ onclick: function () {
+ var option = makeOption();
+ option.title.text = 'barWidth: 60, barMaxWidth: 20, final bar width should keep 20';
+ option.series.barWidth = 60;
+ option.series.barMaxWidth = 20;
+ 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);
+ }
+ }, {
+ text: 'barWidth: "98%", barMaxWidth: 20',
+ onclick: function () {
+ var option = makeOption();
+ option.title.text = 'barWidth: "98%", barMaxWidth: 20\nfinal bar width should not over 20';
+ option.series.barWidth = '98%';
+ option.series.barMaxWidth = 20;
+ chart.setOption(option, true);
+ }
+ }, {
+ text: 'barWidth: 60, barMaxWidth: 20',
+ onclick: function () {
+ var option = makeOption();
+ option.title.text = 'barWidth: 60, barMaxWidth: 20\nfinal bar width should keep 20';
+ option.series.barWidth = 60;
+ option.series.barMaxWidth = 20;
+ chart.setOption(option, true);
+ }
+ }]
+ });
+ });
+
+ </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
[incubator-echarts] 02/02: fix: fix the last commit: tweak code and
fix remainWidth when barWidth is given.
Posted by su...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch release
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit 2ca85360c2156b7dadcb7cb2853ec365e8bb0b3c
Author: SHUANG SU <su...@gmail.com>
AuthorDate: Thu Nov 7 14:46:03 2019 +0800
fix: fix the last commit: tweak code and fix remainWidth when barWidth is given.
---
src/layout/barGrid.js | 8 +++++---
1 file changed, 5 insertions(+), 3 deletions(-)
diff --git a/src/layout/barGrid.js b/src/layout/barGrid.js
index ece940e..9fb90ea 100644
--- a/src/layout/barGrid.js
+++ b/src/layout/barGrid.js
@@ -283,13 +283,13 @@ function doCalBarWidthAndOffset(seriesInfoList) {
autoWidth = Math.max(autoWidth, 0);
// Find if any auto calculated bar exceeded maxBarWidth
- zrUtil.each(stacks, function (column, stack) {
+ zrUtil.each(stacks, function (column) {
var maxWidth = column.maxWidth;
var minWidth = column.minWidth;
if (!column.width) {
var finalWidth = autoWidth;
if (maxWidth && maxWidth < finalWidth) {
- finalWidth = Math.min(finalWidth, maxWidth, remainedWidth);
+ finalWidth = Math.min(maxWidth, remainedWidth);
}
// `minWidth` has higher priority. `minWidth` decide that wheter the
// bar is able to be visible. So `minWidth` should not be restricted
@@ -297,7 +297,7 @@ function doCalBarWidthAndOffset(seriesInfoList) {
// 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);
+ finalWidth = minWidth;
}
if (finalWidth !== autoWidth) {
column.width = finalWidth;
@@ -318,6 +318,8 @@ function doCalBarWidthAndOffset(seriesInfoList) {
finalWidth = Math.max(finalWidth, minWidth);
}
column.width = finalWidth;
+ remainedWidth -= finalWidth;
+ autoWidthCount--;
}
});
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org