You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2019/09/17 12:10:19 UTC
[incubator-echarts] branch feature/clip updated: feat(dataZoom):
Add filterMode in the toolbox dataZoom feature.
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch feature/clip
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
The following commit(s) were added to refs/heads/feature/clip by this push:
new d80db8e feat(dataZoom): Add filterMode in the toolbox dataZoom feature.
d80db8e is described below
commit d80db8e577a80efaed0c84ff96a424e0e37ad8de
Author: pissang <bm...@gmail.com>
AuthorDate: Tue Sep 17 20:00:43 2019 +0800
feat(dataZoom): Add filterMode in the toolbox dataZoom feature.
---
src/chart/line/LineView.js | 1 +
src/component/dataZoom/DataZoomModel.js | 10 ++
src/component/dataZoom/dataZoomAction.js | 5 +
src/component/toolbox/feature/DataZoom.js | 6 +-
test/clip.html | 159 +++++++++++++++++++++++++++++-
5 files changed, 176 insertions(+), 5 deletions(-)
diff --git a/src/chart/line/LineView.js b/src/chart/line/LineView.js
index ea7fd3f..5879308 100644
--- a/src/chart/line/LineView.js
+++ b/src/chart/line/LineView.js
@@ -281,6 +281,7 @@ function createLineClipPath(coordSys, hasAnimation, seriesModel) {
rectShape.width += expandSize * 2;
}
}
+ return clipPath;
}
else {
return createPolarClipPath(coordSys, hasAnimation, seriesModel);
diff --git a/src/component/dataZoom/DataZoomModel.js b/src/component/dataZoom/DataZoomModel.js
index 9c5f6a5..9da7bf0 100644
--- a/src/component/dataZoom/DataZoomModel.js
+++ b/src/component/dataZoom/DataZoomModel.js
@@ -470,6 +470,16 @@ var DataZoomModel = echarts.extendComponentModel({
},
/**
+ * Set filter mode.
+ * This will be set in the action dispatched from toolbox.
+ *
+ * @param {string} filterMode Values can be 'filter', 'weakFilter', 'empty' ,'none'
+ */
+ setFilterMode: function (filterMode) {
+ this.option.filterMode = filterMode;
+ },
+
+ /**
* @public
* @return {Array.<number>} [startPercent, endPercent]
*/
diff --git a/src/component/dataZoom/dataZoomAction.js b/src/component/dataZoom/dataZoomAction.js
index b227e11..d679579 100644
--- a/src/component/dataZoom/dataZoomAction.js
+++ b/src/component/dataZoom/dataZoomAction.js
@@ -50,6 +50,11 @@ echarts.registerAction('dataZoom', function (payload, ecModel) {
startValue: payload.startValue,
endValue: payload.endValue
});
+ // Update filterMode if it's needs to be changed.
+ // This action is mainly dispatched from dataZoom toolbox.
+ if (payload.filterMode != null) {
+ dataZoomModel.setFilterMode(payload.filterMode);
+ }
});
});
diff --git a/src/component/toolbox/feature/DataZoom.js b/src/component/toolbox/feature/DataZoom.js
index 84a9170..fde5669 100644
--- a/src/component/toolbox/feature/DataZoom.js
+++ b/src/component/toolbox/feature/DataZoom.js
@@ -54,6 +54,7 @@ function DataZoom(model, ecModel, api) {
DataZoom.defaultOption = {
show: true,
+ filterMode: 'filter',
// Icon group
icon: {
zoom: 'M0,13.5h26.9 M13.5,26.9V0 M32.1,13.5H58V58H13.5 V32.1',
@@ -115,6 +116,7 @@ proto._onBrush = function (areas, opt) {
}
var snapshot = {};
var ecModel = this.ecModel;
+ var filterMode = this.model.get('filterMode');
this._brushController.updateCovers([]); // remove cover
@@ -157,7 +159,9 @@ proto._onBrush = function (areas, opt) {
dataZoomModel && (snapshot[dataZoomModel.id] = {
dataZoomId: dataZoomModel.id,
startValue: minMax[0],
- endValue: minMax[1]
+ endValue: minMax[1],
+ // Set filterMode
+ filterMode: filterMode
});
}
diff --git a/test/clip.html b/test/clip.html
index 9fcb0bb..5802b9a 100644
--- a/test/clip.html
+++ b/test/clip.html
@@ -49,6 +49,7 @@ under the License.
<div class="chart" id="scatter-clip-incremental"></div> -->
<div class="chart" id="large-scatter-clip"></div>
<div class="chart" id="lines-clip"></div>
+ <div class="chart" id="line-dataZoom"></div>
<div class="chart" id="bar-clip"></div>
<div class="chart" id="custom-clip"></div>
<div class="chart" id="candlestick-clip"></div>
@@ -162,6 +163,9 @@ under the License.
</script>
+
+
+
<script>
require([
'echarts'
@@ -237,6 +241,10 @@ under the License.
})
</script>
+
+
+
+
<script>
require([
'echarts'
@@ -274,7 +282,6 @@ under the License.
}
var obj = {
- name: "测试直线"+i+1,
coords: [
[0, 0],
[x, y]
@@ -294,9 +301,6 @@ under the License.
option = {
animation: false,
- title: {
- text: '网络拓扑图'
- },
xAxis: {
type:'value',
min: -1000,
@@ -356,5 +360,152 @@ under the License.
})
</script>
+
+
+ <script>
+ require([
+ 'echarts'
+ ], function (echarts) {
+
+ var base = +new Date(2016, 9, 3);
+ var oneDay = 24 * 3600 * 1000;
+ var valueBase = Math.random() * 300;
+ var valueBase2 = Math.random() * 50;
+ var data = [];
+ var data2 = [];
+
+ for (var i = 1; i < 10; i++) {
+ var now = new Date(base += oneDay);
+ var dayStr = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-');
+
+ valueBase = Math.round((Math.random() - 0.5) * 20 + valueBase);
+ valueBase <= 0 && (valueBase = Math.random() * 300);
+ data.push([dayStr, valueBase]);
+
+ valueBase2 = Math.round((Math.random() - 0.5) * 20 + valueBase2);
+ valueBase2 <= 0 && (valueBase2 = Math.random() * 50);
+ data2.push([dayStr, valueBase2]);
+ }
+
+ option = {
+ animation: false,
+ legend: {
+ top: 'bottom',
+ data:['意向']
+ },
+ tooltip: {
+ triggerOn: 'none',
+ position: function (pt) {
+ return [pt[0], 130];
+ }
+ },
+ toolbox: {
+ left: 'center',
+ itemSize: 25,
+ top: 55,
+ feature: {
+ dataZoom: {
+ // Not filter the data.
+ filterMode: 'none',
+ yAxisIndex: 'none'
+ },
+ restore: {}
+ }
+ },
+ xAxis: {
+ type: 'time',
+ splitLine: {
+ show: false
+ }
+ },
+ yAxis: {
+ type: 'value',
+ axisTick: {
+ inside: true
+ },
+ splitLine: {
+ show: false
+ },
+ axisLabel: {
+ inside: true,
+ formatter: '{value}\n'
+ },
+ z: 10
+ },
+ grid: {
+ top: 110,
+ left: 15,
+ right: 15,
+ height: 160
+ },
+ dataZoom: [{
+ type: 'inside',
+ throttle: 50
+ }],
+ series: [
+ {
+ name:'模拟数据',
+ type:'line',
+ smooth: true,
+ symbol: 'circle',
+ symbolSize: 5,
+ sampling: 'average',
+ itemStyle: {
+ normal: {
+ color: '#8ec6ad'
+ }
+ },
+ stack: 'a',
+ areaStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: '#8ec6ad'
+ }, {
+ offset: 1,
+ color: '#ffe'
+ }])
+ }
+ },
+ data: data
+ },
+ {
+ name:'模拟数据',
+ type:'line',
+ smooth:true,
+ stack: 'a',
+ symbol: 'circle',
+ symbolSize: 5,
+ sampling: 'average',
+ itemStyle: {
+ normal: {
+ color: '#d68262'
+ }
+ },
+ areaStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: '#d68262'
+ }, {
+ offset: 1,
+ color: '#ffe'
+ }])
+ }
+ },
+ data: data2
+ }
+
+ ]
+ };
+
+ var chart = testHelper.create(echarts, 'line-dataZoom', {
+ title: 'Line with dataZoom,(#10224). Should not be blank when selected a small area',
+ option: option,
+ height: 400
+ });
+ })
+ </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