feat(dataZoom): Add filterMode in the toolbox dataZoom feature.

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);

src/component/dataZoom/DataZoomModel.js

@@ -469,6 +469,16 @@ var DataZoomModel = echarts.extendComponentModel({
         !ignoreUpdateRangeUsg && updateRangeUse(this, opt);
     },
 
+    /**
+     * 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]

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);
+        }
     });
 
 });

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
         });
     }
 

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