Fix #5837 (tooltip did not work in large scatter when zoomed)

apache · May 27, 2017 · eae4fd5 · eae4fd5
1 parent c0b9149
commit eae4fd5
Show file tree

Hide file tree

Showing 2 changed files with 121 additions and 1 deletion.
diff --git a/src/chart/helper/LargeSymbolDraw.js b/src/chart/helper/LargeSymbolDraw.js
@@ -22,6 +22,11 @@ define(function (require) {
             var symbolProxyShape = symbolProxy.shape;
             for (var i = 0; i < points.length; i++) {
                 var pt = points[i];
+
+                if (isNaN(pt[0]) || isNaN(pt[1])) {
+                    continue;
+                }
+
                 var size = sizes[i];
                 if (size[0] < 4) {
                     // Optimize for small symbol
@@ -121,7 +126,7 @@ define(function (require) {
         symbolEl.on('mousemove', function (e) {
             symbolEl.dataIndex = null;
             var dataIndex = symbolEl.findDataIndex(e.offsetX, e.offsetY);
-            if (dataIndex > 0) {
+            if (dataIndex >= 0) {
                 // Provide dataIndex for tooltip
                 symbolEl.dataIndex = dataIndex;
             }

diff --git a/test/largeScatterWithEmpty.html b/test/largeScatterWithEmpty.html
@@ -0,0 +1,115 @@
+<!DOCTYPE>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <script src="esl.js"></script>
+        <script src="config.js"></script>
+        <script src="lib/jquery.min.js"></script>
+        <script src="lib/facePrint.js"></script>
+        <script src="lib/testHelper.js"></script>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="stylesheet" href="reset.css">
+    </head>
+    <body>
+        <style>
+            h1 {
+                line-height: 60px;
+                height: 60px;
+                background: #146402;
+                text-align: center;
+                font-weight: bold;
+                color: #eee;
+                font-size: 14px;
+            }
+            body {
+                position: absolute;
+                left: 0;
+                top: 0;
+                bottom: 0;
+                right: 0;
+            }
+            .chart {
+                margin: 100px;
+                background: #333;
+                height: 300px;
+            }
+        </style>
+
+        <div style="padding: 100px;">
+
+        <h2>'-' exists in data. tooltip shoule be displayed normally.</h2>
+        <div class="chart" id="main"></div>
+        </div>
+
+
+
+
+        <script>
+
+            var echarts;
+            var chart;
+            var myChart;
+            var groupCategories = [];
+            var groupColors = [];
+
+            require([
+                'echarts',
+                'echarts/chart/line',
+                'echarts/chart/bar',
+                'echarts/chart/pie',
+                'echarts/chart/scatter',
+                'echarts/chart/map',
+                'echarts/chart/parallel',
+                'echarts/chart/radar',
+                'echarts/component/grid',
+                'echarts/component/polar',
+                'echarts/component/geo',
+                'echarts/component/singleAxis',
+                'echarts/component/legend',
+                'echarts/component/tooltip',
+                'echarts/component/toolbox',
+                'echarts/component/visualMap',
+                'echarts/component/dataZoom'
+            ], function (ec) {
+                echarts = ec;
+                chart = myChart = echarts.init(document.getElementById('main'));
+
+                option = {
+                    tooltip : {
+                        trigger: 'item',
+                        showDelay : 0
+                    },
+                    xAxis : [
+                        {
+                            type : 'value',
+                            scale:true,
+                            min: 0,
+                            max: 1000
+                        }
+                    ],
+                    yAxis : [
+                        {
+                            type : 'value',
+                            min: 0,
+                            max: 1000,
+                            scale:true
+                        }
+                    ],
+                    series : [
+                        {
+                            name:'sin',
+                            type:'scatter',
+                            large: true,
+                            largeThreshold: 1,
+                            symbolSize: 10,
+                            data: [[200, 200], ['-', 300], [400, 400]]
+                        }
+                    ]
+                };
+
+                chart.setOption(option);
+            });
+
+        </script>
+    </body>
+</html>