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 2018/04/19 19:50:47 UTC
[incubator-echarts] branch master updated: Support
`series-line.showAllSymbol: 'auto' (default)`: show symbol if there is
enough space but not only depends on axis tick interval strategy.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
The following commit(s) were added to refs/heads/master by this push:
new aad1e1c Support `series-line.showAllSymbol: 'auto' (default)`: show symbol if there is enough space but not only depends on axis tick interval strategy.
aad1e1c is described below
commit aad1e1cf7d9829b2cfc5f35bbe3443b1b4dfd53a
Author: sushuang <su...@gmail.com>
AuthorDate: Fri Apr 20 03:50:25 2018 +0800
Support `series-line.showAllSymbol: 'auto' (default)`: show symbol if there is enough space but not only depends on axis tick interval strategy.
---
src/chart/helper/Symbol.js | 29 ++++++++------
src/chart/line/LineSeries.js | 19 +++++----
src/chart/line/LineView.js | 92 ++++++++++++++++++++++++++++++++------------
test/-cases.js | 2 +-
test/line.html | 6 +--
5 files changed, 98 insertions(+), 50 deletions(-)
diff --git a/src/chart/helper/Symbol.js b/src/chart/helper/Symbol.js
index a296536..eccae51 100644
--- a/src/chart/helper/Symbol.js
+++ b/src/chart/helper/Symbol.js
@@ -9,17 +9,6 @@ import {parsePercent} from '../../util/number';
import {getDefaultLabel} from './labelHelper';
-function getSymbolSize(data, idx) {
- var symbolSize = data.getItemVisual(idx, 'symbolSize');
- return symbolSize instanceof Array
- ? symbolSize.slice()
- : [+symbolSize, +symbolSize];
-}
-
-function getScale(symbolSize) {
- return [symbolSize[0] / 2, symbolSize[1] / 2];
-}
-
/**
* @constructor
* @alias {module:echarts/chart/helper/Symbol}
@@ -34,6 +23,24 @@ function SymbolClz(data, idx, seriesScope) {
var symbolProto = SymbolClz.prototype;
+/**
+ * @public
+ * @static
+ * @param {module:echarts/data/List} data
+ * @param {number} dataIndex
+ * @return {Array.<number>} [width, height]
+ */
+var getSymbolSize = SymbolClz.getSymbolSize = function (data, idx) {
+ var symbolSize = data.getItemVisual(idx, 'symbolSize');
+ return symbolSize instanceof Array
+ ? symbolSize.slice()
+ : [+symbolSize, +symbolSize];
+};
+
+function getScale(symbolSize) {
+ return [symbolSize[0] / 2, symbolSize[1] / 2];
+}
+
function driftSymbol(dx, dy) {
this.parent.drift(dx, dy);
}
diff --git a/src/chart/line/LineSeries.js b/src/chart/line/LineSeries.js
index 8363811..99b7712 100644
--- a/src/chart/line/LineSeries.js
+++ b/src/chart/line/LineSeries.js
@@ -19,8 +19,8 @@ export default SeriesModel.extend({
},
defaultOption: {
- zlevel: 0, // 一级层叠
- z: 2, // 二级层叠
+ zlevel: 0,
+ z: 2,
coordinateSystem: 'cartesian2d',
legendHoverLink: true,
@@ -58,22 +58,21 @@ export default SeriesModel.extend({
// Disabled if step is true
smooth: false,
smoothMonotone: null,
- // 拐点图形类型
symbol: 'emptyCircle',
- // 拐点图形大小
symbolSize: 4,
- // 拐点图形旋转控制
symbolRotate: null,
- // 是否显示 symbol, 只有在 tooltip hover 的时候显示
showSymbol: true,
- // 标志图形默认只有主轴显示（随主轴标签间隔隐藏策略）
- showAllSymbol: false,
+ // `false`: follow the label interval strategy.
+ // `true`: show all symbols.
+ // `'auto'`: If possible, show all symbols, otherwise
+ // follow the label interval strategy.
+ showAllSymbol: 'auto',
- // 是否连接断点
+ // Whether to connect break point.
connectNulls: false,
- // 数据过滤，'average', 'max', 'min', 'sum'
+ // Sampling for large data. Can be: 'average', 'max', 'min', 'sum'.
sampling: 'none',
animationEasing: 'linear',
diff --git a/src/chart/line/LineView.js b/src/chart/line/LineView.js
index 663e448..86a4d03 100644
--- a/src/chart/line/LineView.js
+++ b/src/chart/line/LineView.js
@@ -284,6 +284,69 @@ function getVisualGradient(data, coordSys) {
return gradient;
}
+function getIsIgnoreFunc(seriesModel, data, coordSys) {
+ var showAllSymbol = seriesModel.get('showAllSymbol');
+ var isAuto = showAllSymbol === 'auto';
+
+ if (showAllSymbol && !isAuto) {
+ return;
+ }
+
+ var categoryAxis = coordSys.getAxesByScale('ordinal')[0];
+ if (!categoryAxis) {
+ return;
+ }
+
+ // Note that category label interval strategy might bring some weird effect
+ // in some scenario: users may wonder why some of the symbols are not
+ // displayed. So we show all symbols as possible as we can.
+ if (isAuto
+ // Simplify the logic, do not determine label overlap here.
+ && canShowAllSymbolForCategory(categoryAxis, data)
+ ) {
+ return;
+ }
+
+ // Otherwise follow the label interval strategy on category axis.
+ var categoryDataDim = data.mapDimension(categoryAxis.dim);
+ var labelMap = {};
+
+ zrUtil.each(categoryAxis.getViewLabels(), function (labelItem) {
+ labelMap[labelItem.tickValue] = 1;
+ });
+
+ return function (dataIndex) {
+ return !labelMap.hasOwnProperty(data.get(categoryDataDim, dataIndex));
+ };
+}
+
+function canShowAllSymbolForCategory(categoryAxis, data) {
+ // In mose cases, line is monotonous on category axis, and the label size
+ // is close with each other. So we check the symbol size and some of the
+ // label size alone with the category axis to estimate whether all symbol
+ // can be shown without overlap.
+ var axisExtent = categoryAxis.getExtent();
+ var availSize = Math.abs(axisExtent[1] - axisExtent[0]) / categoryAxis.scale.count();
+ isNaN(availSize) && (availSize = 0); // 0/0 is NaN.
+
+ // Sampling some points, max 5.
+ var dataLen = data.count();
+ var step = Math.max(1, Math.round(dataLen / 5));
+ for (var dataIndex = 0; dataIndex < dataLen; dataIndex += step) {
+ if (SymbolClz.getSymbolSize(
+ data, dataIndex
+ // Only for cartesian, where `isHorizontal` exists.
+ )[categoryAxis.isHorizontal() ? 1 : 0]
+ // Empirical number
+ * 1.5 > availSize
+ ) {
+ return false;
+ }
+ }
+
+ return true;
+}
+
export default ChartView.extend({
type: 'line',
@@ -327,8 +390,8 @@ export default ChartView.extend({
var showSymbol = seriesModel.get('showSymbol');
- var isSymbolIgnore = showSymbol && !isCoordSysPolar && !seriesModel.get('showAllSymbol')
- && this._getSymbolIgnoreFunc(data, coordSys);
+ var isIgnoreFunc = showSymbol && !isCoordSysPolar
+ && getIsIgnoreFunc(seriesModel, data, coordSys);
// Remove temporary symbols
var oldData = this._data;
@@ -353,7 +416,7 @@ export default ChartView.extend({
!(polyline && prevCoordSys.type === coordSys.type && step === this._step)
) {
showSymbol && symbolDraw.updateData(data, {
- isIgnore: isSymbolIgnore,
+ isIgnore: isIgnoreFunc,
clipShape: createClipShape(coordSys, false, seriesModel)
});
@@ -394,7 +457,7 @@ export default ChartView.extend({
// Always update, or it is wrong in the case turning on legend
// because points are not changed
showSymbol && symbolDraw.updateData(data, {
- isIgnore: isSymbolIgnore,
+ isIgnore: isIgnoreFunc,
clipShape: coordSysClipShape
});
@@ -609,27 +672,6 @@ export default ChartView.extend({
/**
* @private
*/
- _getSymbolIgnoreFunc: function (data, coordSys) {
- var categoryAxis = coordSys.getAxesByScale('ordinal')[0];
- if (!categoryAxis) {
- return;
- }
-
- var categoryDataDim = data.mapDimension(categoryAxis.dim);
- var labelMap = {};
-
- zrUtil.each(categoryAxis.getViewLabels(), function (labelItem) {
- labelMap[labelItem.tickValue] = 1;
- });
-
- return function (dataIndex) {
- return !labelMap.hasOwnProperty(data.get(categoryDataDim, dataIndex));
- };
- },
-
- /**
- * @private
- */
// FIXME Two value axis
_updateAnimation: function (data, stackedOnPoints, coordSys, api, step, valueOrigin) {
var polyline = this._polyline;
diff --git a/test/-cases.js b/test/-cases.js
index 38324e8..d64366c 100644
--- a/test/-cases.js
+++ b/test/-cases.js
@@ -42,7 +42,7 @@
'scatter-weibo.html',
'bar-stream-large.html',
'bar-stream-large1.html',
- 'candlestick-large1.html',
+ 'candlestick-large2.html',
'lines-flight.html',
'lines-stream-large.html',
'lines-stream-not-large.html',
diff --git a/test/line.html b/test/line.html
index 9ebf506..310e1d8 100644
--- a/test/line.html
+++ b/test/line.html
@@ -14,6 +14,8 @@
}
</style>
<div id="info"></div>
+ (1) tick 14 and 20 should be red (has textStyle) <br>
+ (2) Check all symbol show if possible.
<div id="main"></div>
<script>
@@ -78,9 +80,6 @@
};
chart.setOption({
- title: {
- text: 'tick 14 and 20 should be red (has textStyle)'
- },
// title: {
// text: '折线图{a|asdf}Step line',
// subtext: 'subtitle',
@@ -188,6 +187,7 @@
stack: 'all',
symbol: 'circle',
symbolSize: 10,
+ // showAllSymbol: false,
data: data2,
itemStyle: itemStyle,
step: 'end'
--
To stop receiving notification emails like this one, please contact
sushuang@apache.org.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org