From 2e1f313cc0360bd73b4b3dc341e34b94ddd3ae80 Mon Sep 17 00:00:00 2001
From: pah100 <sushuang0322@gmail.com>
Date: Sat, 18 Jun 2016 19:10:15 +0800
Subject: [PATCH] update example

---
 src/util/throttle.js |   5 +-
 test/brush.html      | 520 ++++++++++++++++++++++++++-----------------
 2 files changed, 318 insertions(+), 207 deletions(-)

diff --git a/src/util/throttle.js b/src/util/throttle.js
index 507ef63e2..412777ffd 100755
--- a/src/util/throttle.js
+++ b/src/util/throttle.js
@@ -4,6 +4,7 @@ define(function () {
 
     var ORIGIN_METHOD = '\0__throttleOriginMethod';
     var RATE = '\0__throttleRate';
+    var THROTTLE_TYPE = '\0__throttleType';
 
     /**
      * @public
@@ -104,13 +105,15 @@ define(function () {
         }
 
         var originFn = fn[ORIGIN_METHOD] || fn;
+        var lastThrottleType = fn[THROTTLE_TYPE];
         var lastRate = fn[RATE];
 
-        if (lastRate !== rate) {
+        if (lastRate !== rate || lastThrottleType !== throttleType) {
             fn = obj[fnAttr] = lib.throttle(
                 originFn, rate, throttleType === 'debounce'
             );
             fn[ORIGIN_METHOD] = originFn;
+            fn[THROTTLE_TYPE] = throttleType;
             fn[RATE] = rate;
         }
 
diff --git a/test/brush.html b/test/brush.html
index 4119c6a72..50f62f2d0 100644
--- a/test/brush.html
+++ b/test/brush.html
@@ -24,7 +24,7 @@
             }
             body .main {
                 height: 550px;
-                margin-right: 220px;
+                margin-right: 300px;
                 margin-left: 20px;
             }
             .panel {
@@ -32,7 +32,7 @@
                 top: 0;
                 right: 0;
                 bottom: 0;
-                width: 200px;
+                width: 280px;
                 background: #555;
                 color: #fff;
                 font-size: 14px;
@@ -66,6 +66,14 @@
                 border-radius: 2px;
                 color: #000;
             }
+
+            .sm-settings {
+                border-bottom: 1px solid #777;
+                padding-bottom: 15px;
+            }
+            .sm-settings input {
+                max-width: 50px;
+            }
         </style>
 
         <div class="split">Scatter</div>
@@ -81,6 +89,7 @@
             </div>
         </div>
 
+
         <div class="split">Scatter in Map</div>
         <div class="block">
             <div id="main1" class="main"></div>
@@ -88,10 +97,36 @@
                 <ul class="panel-desc">
                     <li>bar and scatter are in the same ec instances and use setOption in brushSelected event.</li>
                 </ul>
+                <div class="sm-settings">
+                    <div>
+                        DIFF with previous selected:
+                        <input onclick="smChange.diff(true)" type="radio" name="diff" checked="checked"/>Y
+                        <input onclick="smChange.diff(false)" type="radio" name="diff" />N
+                    </div>
+                    <div>
+                        animation:
+                        <input onclick="smChange.animation(true)" type="radio" name="animation" checked="checked"/>Y
+                        <input onclick="smChange.animation(false)" type="radio" name="animation" />N
+                    </div>
+                    <div>
+                        animationDurationUpdate:
+                        <input value="1000" onblur="smChange.animationDurationUpdate(this)" type="text" />
+                    </div>
+                    <div>
+                        throttleDelay:
+                        <input value="300" onblur="smChange.throttleDelay(this)" type="text" />
+                    </div>
+                    <div>
+                        throttleType:
+                        <input onclick="smChange.throttleType('debounce')" type="radio" name="throttleType" checked="checked"/>debounce
+                        <input onclick="smChange.throttleType('fixRate')" type="radio" name="throttleType" />fixRate
+                    </div>
+                </div>
                 <div id="panel1"></div>
             </div>
         </div>
 
+
         <div class="split">Stacked Bar (rect-polygon intersect)</div>
         <div class="block">
             <div id="main4" class="main"></div>
@@ -108,6 +143,15 @@
 
 
 
+
+        <!-- =================== 1 ===================== -->
+
+
+
+
+
+
+
         <script type="text/javascript">
             require([
                 'echarts',
@@ -399,6 +443,10 @@
 
 
 
+        <!-- =================== 2 ===================== -->
+
+
+
 
 
 
@@ -821,242 +869,298 @@
                     var chart = echarts.init(document.getElementById('main1'));
                     panel = document.getElementById('panel1');
 
-                    var option = {
-                        backgroundColor: '#404a59',
-                        title: {
-                            text: '全国主要城市空气质量',
-                            subtext: 'data from PM25.in',
-                            sublink: 'http://www.pm25.in',
-                            left: 'center',
-                            textStyle: {
-                                color: '#fff'
-                            }
+
+                    var smSettings = {
+                        diff: true,
+                        animation: true,
+                        animationDurationUpdate: 1000,
+                        throttleDelay: 300,
+                        throttleType: 'debounce'
+                    };
+
+                    window.smChange = {
+                        diff: function (val) {
+                            smSettings.diff = val;
+                            restart();
                         },
-                        tooltip : {
-                            trigger: 'item'
+                        animation: function (val) {
+                            smSettings.animation = val;
+                            restart();
                         },
-                        toolbox: {
-                            iconStyle: {
-                                normal: {
-                                    borderColor: '#fff'
-                                },
-                                emphasis: {
-                                    borderColor: '#b1e4ff'
-                                }
-                            }
+                        animationDurationUpdate: function (el) {
+                            smSettings.animationDurationUpdate = +el.value;
+                            restart();
                         },
-                        legend: {
-                            orient: 'vertical',
-                            top: 'bottom',
-                            left: 'right',
-                            data:['pm2.5'],
-                            textStyle: {
-                                color: '#fff'
-                            }
+                        throttleDelay: function (el) {
+                            smSettings.throttleDelay = +el.value;
+                            restart();
                         },
-                        geo: {
-                            map: 'china',
-                            left: '10',
-                            right: '35%',
-                            center: [117.98561551896913, 31.205000490896193],
-                            zoom: 4.177248169415658,
-                            label: {
-                                emphasis: {
-                                    show: false
+                        throttleType: function (val) {
+                            smSettings.throttleType = val;
+                            restart();
+                        }
+                    };
+
+
+                    restart();
+
+
+                    function restart() {
+                        chart.off();
+
+                        var option = {
+                            backgroundColor: '#404a59',
+                            animation: smSettings.animation,
+                            animationDurationUpdate: smSettings.animationDurationUpdate,
+                            title: {
+                                text: '全国主要城市空气质量',
+                                subtext: 'data from PM25.in',
+                                sublink: 'http://www.pm25.in',
+                                left: 'center',
+                                textStyle: {
+                                    color: '#fff'
                                 }
                             },
-                            roam: true,
-                            itemStyle: {
-                                normal: {
-                                    areaColor: '#323c48',
-                                    borderColor: '#111'
-                                },
-                                emphasis: {
-                                    areaColor: '#2a333d'
-                                }
-                            }
-                        },
-                        brush: {
-                            outOfBrush: {
-                                color: '#abc'
+                            tooltip : {
+                                trigger: 'item'
                             },
-                            seriesIndex: [0, 1],
-                            throttleType: 'debounce',
-                            throttleDelay: 100,
-                            brushRanges: [
-                                {
-                                    brushType: 'polygon',
-                                    range: [[482,130],[481,130],[470,123],[406,100],[387,94],[377,88],[374,83],[373,81],[366,76],[360,74],[355,73],[346,79],[337,83],[323,84],[301,84],[297,84],[281,88],[265,92],[265,93],[258,120],[265,144],[272,148],[297,168],[319,192],[324,200],[324,201],[325,205],[337,229],[342,240],[343,242],[343,243],[344,247],[345,250],[350,261],[354,268],[355,274],[355,281],[347,300],[342,319],[336,352],[333,388],[336,424],[351,442],[364,451],[375,455],[392,466],[401,474],[409,483],[419,493],[432,502],[453,502],[487,484],[521,436],[536,364],[539,322],[539,309],[537,305],[537,304],[536,295],[517,273],[511,264],[511,264]]
-                                }
-                            ]
-                        },
-                        grid: {
-                            right: 20,
-                            top: 50,
-                            bottom: 20,
-                            width: '30%'
-                        },
-                        xAxis: {
-                            type: 'value',
-                            scale: true,
-                            boundaryGap: false,
-                            splitLine: {show: false},
-                            axisLine: {show: false, lineStyle: {color: '#ddd'}},
-                            axisTick: {show: false},
-                            axisLabel: {textStyle: {color: '#ddd'}},
-                        },
-                        yAxis: {
-                            type: 'category',
-                            name: 'PM 2.5',
-                            axisLine: {show: false, lineStyle: {color: '#ddd'}},
-                            axisTick: {show: false, lineStyle: {color: '#ddd'}},
-                            axisLabel: {interval: 0, textStyle: {color: '#ddd'}},
-                            data: []
-                        },
-                        series : [
-                            {
-                                name: 'pm2.5',
-                                type: 'scatter',
-                                coordinateSystem: 'geo',
-                                data: convertedData,
-                                symbolSize: function (val) {
-                                    return val[2] / 10;
-                                },
-                                label: {
+                            toolbox: {
+                                iconStyle: {
                                     normal: {
-                                        formatter: '{b}',
-                                        position: 'right',
-                                        show: false
+                                        borderColor: '#fff'
                                     },
                                     emphasis: {
-                                        show: true
-                                    }
-                                },
-                                itemStyle: {
-                                    normal: {
-                                        color: '#ddb926'
+                                        borderColor: '#b1e4ff'
                                     }
                                 }
                             },
-                            {
-                                name: 'Top 5',
-                                type: 'effectScatter',
-                                coordinateSystem: 'geo',
-                                data: convertData(data.sort(function (a, b) {
-                                    return b.value - a.value;
-                                }).slice(0, 6)),
-                                symbolSize: function (val) {
-                                    return val[2] / 10;
-                                },
-                                showEffectOn: 'emphasis',
-                                rippleEffect: {
-                                    brushType: 'stroke'
-                                },
-                                hoverAnimation: true,
+                            legend: {
+                                orient: 'vertical',
+                                top: 'bottom',
+                                left: 'right',
+                                data:['pm2.5'],
+                                textStyle: {
+                                    color: '#fff'
+                                }
+                            },
+                            geo: {
+                                map: 'china',
+                                left: '10',
+                                right: '35%',
+                                center: [117.98561551896913, 31.205000490896193],
+                                zoom: 4.177248169415658,
                                 label: {
-                                    normal: {
-                                        formatter: '{b}',
-                                        position: 'right',
-                                        show: true
+                                    emphasis: {
+                                        show: false
                                     }
                                 },
+                                roam: true,
                                 itemStyle: {
                                     normal: {
-                                        color: '#f4e925',
-                                        shadowBlur: 10,
-                                        shadowColor: '#333'
+                                        areaColor: '#323c48',
+                                        borderColor: '#111'
+                                    },
+                                    emphasis: {
+                                        areaColor: '#2a333d'
                                     }
+                                }
+                            },
+                            brush: {
+                                outOfBrush: {
+                                    color: '#abc'
                                 },
-                                zlevel: 1
+                                seriesIndex: [0, 1],
+                                throttleType: smSettings.throttleType,
+                                throttleDelay: smSettings.throttleDelay,
+                                brushRanges: [
+                                    {
+                                        brushType: 'polygon',
+                                        range: [[482,130],[481,130],[470,123],[406,100],[387,94],[377,88],[374,83],[373,81],[366,76],[360,74],[355,73],[346,79],[337,83],[323,84],[301,84],[297,84],[281,88],[265,92],[265,93],[258,120],[265,144],[272,148],[297,168],[319,192],[324,200],[324,201],[325,205],[337,229],[342,240],[343,242],[343,243],[344,247],[345,250],[350,261],[354,268],[355,274],[355,281],[347,300],[342,319],[336,352],[333,388],[336,424],[351,442],[364,451],[375,455],[392,466],[401,474],[409,483],[419,493],[432,502],[453,502],[487,484],[521,436],[536,364],[539,322],[539,309],[537,305],[537,304],[536,295],[517,273],[511,264],[511,264]]
+                                    }
+                                ]
                             },
-                            {
-                                id: 'bar',
-                                zlevel: 2,
-                                type: 'bar',
-                                symbol: 'none',
-                                itemStyle: {
-                                    normal: {
-                                        color: '#ddb926'
+                            grid: {
+                                right: 20,
+                                top: 50,
+                                bottom: 20,
+                                width: '30%'
+                            },
+                            xAxis: {
+                                type: 'value',
+                                scale: true,
+                                boundaryGap: false,
+                                splitLine: {show: false},
+                                axisLine: {show: false, lineStyle: {color: '#ddd'}},
+                                axisTick: {show: false},
+                                axisLabel: {textStyle: {color: '#ddd'}},
+                            },
+                            yAxis: {
+                                type: 'category',
+                                name: 'PM 2.5',
+                                axisLine: {show: false, lineStyle: {color: '#ddd'}},
+                                axisTick: {show: false, lineStyle: {color: '#ddd'}},
+                                axisLabel: {interval: 0, textStyle: {color: '#ddd'}},
+                                data: []
+                            },
+                            series : [
+                                {
+                                    name: 'pm2.5',
+                                    type: 'scatter',
+                                    coordinateSystem: 'geo',
+                                    data: convertedData,
+                                    symbolSize: function (val) {
+                                        return val[2] / 10;
+                                    },
+                                    label: {
+                                        normal: {
+                                            formatter: '{b}',
+                                            position: 'right',
+                                            show: false
+                                        },
+                                        emphasis: {
+                                            show: true
+                                        }
+                                    },
+                                    itemStyle: {
+                                        normal: {
+                                            color: '#ddb926'
+                                        }
                                     }
                                 },
-                                data: []
-                            }
-                        ]
-                    };
-
-                    chart.on('brushSelected', renderBrushed);
-                    chart.setOption(option);
-
-                    function renderBrushed(params) {
-                        var brushed = [];
-                        var top = 0;
-                        var topWhere;
-                        var sum = 0;
-                        var count = 0;
-                        var brushComponent = params.brushComponents[0];
-                        var selectedItems = [];
-
-                        for (var sIdx = 0; sIdx < brushComponent.series.length; sIdx++) {
-                            var rawIndices = brushComponent.series[sIdx].rawIndices;
-                            var placesBySeries = [];
-                            for (var i = 0; i < rawIndices.length; i++) {
-                                var rawIndex = rawIndices[i];
-                                var item = convertedData[rawIndex];
-                                var value = item.value[2];
-                                sum += value;
-                                count++;
-                                if (value > top) {
-                                    top = value;
-                                    topWhere = item.name;
+                                {
+                                    name: 'Top 5',
+                                    type: 'effectScatter',
+                                    coordinateSystem: 'geo',
+                                    data: convertData(data.sort(function (a, b) {
+                                        return b.value - a.value;
+                                    }).slice(0, 6)),
+                                    symbolSize: function (val) {
+                                        return val[2] / 10;
+                                    },
+                                    showEffectOn: 'emphasis',
+                                    rippleEffect: {
+                                        brushType: 'stroke'
+                                    },
+                                    hoverAnimation: true,
+                                    label: {
+                                        normal: {
+                                            formatter: '{b}',
+                                            position: 'right',
+                                            show: true
+                                        }
+                                    },
+                                    itemStyle: {
+                                        normal: {
+                                            color: '#f4e925',
+                                            shadowBlur: 10,
+                                            shadowColor: '#333'
+                                        }
+                                    },
+                                    zlevel: 1
+                                },
+                                {
+                                    id: 'bar',
+                                    zlevel: 2,
+                                    type: 'bar',
+                                    symbol: 'none',
+                                    itemStyle: {
+                                        normal: {
+                                            color: '#ddb926'
+                                        }
+                                    },
+                                    data: []
                                 }
-                                if (sIdx === 0) {
-                                    selectedItems.push(item);
+                            ]
+                        };
+
+                        var oldSelectedItems = [];
+
+                        chart.on('brushSelected', renderBrushed);
+                        chart.setOption(option, true);
+
+                        function renderBrushed(params) {
+                            var brushed = [];
+                            var top = 0;
+                            var topWhere;
+                            var sum = 0;
+                            var count = 0;
+                            var brushComponent = params.brushComponents[0];
+                            var selectedItems = [];
+
+                            var isDiff;
+
+                            for (var sIdx = 0; sIdx < brushComponent.series.length; sIdx++) {
+                                var rawIndices = brushComponent.series[sIdx].rawIndices;
+                                var placesBySeries = [];
+                                for (var i = 0; i < rawIndices.length; i++) {
+                                    var rawIndex = rawIndices[i];
+                                    var item = convertedData[rawIndex];
+                                    var value = item.value[2];
+                                    sum += value;
+                                    count++;
+                                    if (value > top) {
+                                        top = value;
+                                        topWhere = item.name;
+                                    }
+                                    if (sIdx === 0) {
+                                        selectedItems.push(item);
+                                    }
+                                    placesBySeries.push(item.name);
                                 }
-                                placesBySeries.push(item.name);
+                                brushed.push('[Series ' + sIdx + '] ' + placesBySeries.join(', '));
                             }
-                            brushed.push('[Series ' + sIdx + '] ' + placesBySeries.join(', '));
-                        }
 
-                        panel.innerHTML = [
-                            '<h3>STATISTICS:</h3>',
-                            'PM2.5 TOP: ' + topWhere + ' ' + top.toFixed(4) + '<br>',
-                            'PM2.5 AVERAGE: ' + (sum / count).toFixed(4) + '<br>',
-                            '<br>',
-                            '<br>',
-                            '<h3>BRUSHED:</h3>',
-                            brushed.join('<br><br>'),
-                        ].join(' ');
-
-                        selectedItems.sort(function (a, b) {
-                            return a.value[2] - b.value[2];
-                        });
-
-                        var categoryData = [];
-                        var barData = [];
-                        var max = 30;
-
-                        for (var i = 0; i < Math.min(selectedItems.length, max); i++) {
-                            categoryData.push(selectedItems[i].name);
-                            barData.push(selectedItems[i].value[2]);
-                        }
+                            if (selectedItems.length !== oldSelectedItems.length) {
+                                isDiff = true;
+                            }
+                            else {
+                                for (var i = 0; i < selectedItems.length; i++) {
+                                    if (selectedItems[i].value !== oldSelectedItems[i].value
+                                        || selectedItems[i].name !== oldSelectedItems[i].name
+                                    ) {
+                                        isDiff = true;
+                                    }
+                                }
+                            }
 
-                        console.log('in brushSeleteed listener.');
+                            panel.innerHTML = [
+                                '<h3>STATISTICS:</h3>',
+                                'PM2.5 TOP: ' + topWhere + ' ' + top.toFixed(4) + '<br>',
+                                'PM2.5 AVERAGE: ' + (sum / count).toFixed(4) + '<br>',
+                                '<br>',
+                                '<br>',
+                                '<h3>BRUSHED:</h3>',
+                                brushed.join('<br><br>'),
+                            ].join(' ');
+
+                            selectedItems.sort(function (a, b) {
+                                return a.value[2] - b.value[2];
+                            });
+
+                            var categoryData = [];
+                            var barData = [];
+                            var max = 30;
+
+                            for (var i = 0; i < Math.min(selectedItems.length, max); i++) {
+                                categoryData.push(selectedItems[i].name);
+                                barData.push(selectedItems[i].value[2]);
+                            }
 
-                        // console.log(chart.getOption().geo[0].center, chart.getOption().geo[0].zoom);
-                        // console.log(JSON.stringify(params));
+                            if (!smSettings.diff || isDiff) {
+                                smSettings.diff
+                                    ? console.log('diff checked and setOption.')
+                                    : console.log('do not check diff and setOption.');
+                                chart.setOption({
+                                    yAxis: {data: categoryData},
+                                    series: {id: 'bar', data: barData}
+                                });
+                            }
 
-                        chart.setOption({
-                            // animation: false,
-                            yAxis: {
-                                data: categoryData
-                            },
-                            series: {
-                                id: 'bar',
-                                data: barData
+                            if (smSettings.diff && !isDiff) {
+                                console.log('check diff and NO DIFF');
                             }
-                        });
+                        }
                     }
-
                 });
             });
 
@@ -1071,6 +1175,10 @@
 
 
 
+        <!-- =================== 3 ===================== -->
+
+
+
 
 
 
-- 
GitLab