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 <bm2736...@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-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org