[GitHub] [incubator-echarts] pciapcib opened issue #9133: 使用 dataZoom 缩放时，visualMap 出现了问题

[GitHub]

<!--
为了方便我们能够复现和修复 bug，请遵从下面的规范描述您的问题。
-->


### One-line summary [问题简述]

在缩放到某一程度时，visualMap.pieces 中指定的某一范围左边或右边的数据都会被渲染成范围中的颜色。

不容易描述，可查看示例。示例中，有两端红色的 visualMap，对该两处进行缩放时，会发现第一段的左边和第二段的右边的数据均变成了红色，即 
visualMap.inRange 中的颜色。

目前只在 Chrome 中出现了问题，在 Safari 和 Firefox 中均正常。

### Version & Environment [版本及环境]
+ ECharts version [ECharts 版本]: 4.1.0
+ Browser version [浏览器类型和版本]: Google Chrome 69.0.3497.100
+ OS Version [操作系统类型和版本]: macOS Mojave 10.14





### Expected behaviour [期望结果]

通过 dataZoom 缩放图表时，visualMap 能正常显示，不受其影响。



### ECharts option [ECharts配置项]
<!-- Copy and paste your 'echarts option' here. -->
<!-- [下方贴你的option，注意不要删掉下方 ```javascript 和 尾部的 ``` 字样。最好是我们能够直接运行的 
option。如何得到能运行的 option 参见上方的 guidelines for contributing] -->
```javascript
option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'line',
            lineStyle: {
                width: 0
            },
            label: {
                formatter: ({
                    value
                }) => new Date(value).getTime()
            }
        }
    },
    xAxis: {
        data: [1534521600000, 1534521660000, 1534521720000, 1534521780000, 
1534521840000, 1534521900000, 1534521960000, 1534522020000, 1534522080000, 
1534522140000, 1534522200000, 1534522260000, 1534522320000, 1534522380000, 
1534522440000, 1534522500000, 1534522560000, 1534522620000, 1534522680000, 
1534522740000, 1534522800000, 1534522860000, 1534522920000, 1534522980000, 
1534523040000, 1534523100000, 1534523160000, 1534523220000, 1534523280000, 
1534523340000, 1534523400000, 1534523460000, 1534523520000, 1534523580000, 
1534523640000, 1534523700000, 1534523760000, 1534523820000, 1534523880000, 
1534523940000, 1534524000000, 1534524060000, 1534524120000, 1534524180000, 
1534524240000, 1534524300000, 1534524360000, 1534524420000, 1534524480000, 
1534524540000, 1534524600000, 1534524660000, 1534524720000, 1534524780000, 
1534524840000, 1534524900000, 1534524960000, 1534525020000, 1534525080000, 
1534525140000, 1534525200000, 1534525260000, 1534525320000, 1534525380000, 
1534525440000, 1534525500000, 1534525560000, 1534525620000, 1534525680000, 
1534525740000, 1534525800000, 1534525860000, 1534525920000, 1534525980000, 
1534526040000, 1534526100000, 1534526160000, 1534526220000, 1534526280000, 
1534526340000, 1534526400000, 1534526460000, 1534526520000, 1534526580000, 
1534526640000, 1534526700000, 1534526760000, 1534526820000, 1534526880000, 
1534526940000, 1534527000000, 1534527060000, 1534527120000, 1534527180000, 
1534527240000, 1534527300000, 1534527360000, 1534527420000, 1534527480000, 
1534527540000],
        axisLabel: {
            formatter: value => {
                const dateTime = new Date(+value)
                return dateTime.getHours() + ':' + dateTime.getMinutes()
            }
        },
        axisLine: {
            lineStyle: {
                color: '#333'
            }
        }
    },
    yAxis: {
        splitLine: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: '#333'
            }
        },
        scale: true
    },
    toolbox: {
        show: false
    },
    brush: {
        xAxisIndex: 'all',
        brushType: 'lineX',
        throttleType: 'debounce',
        throttleDelay: 300,
        brushStyle: {
            color: 'rgba(120, 140, 180, 0.3)',
            borderColor: 'rgba(120, 140, 180, 0.8)'
        }
    },
    dataZoom: [{
            type: 'slider',
            dataBackground: {
                areaStyle: {
                    color: 'rgba(47, 69, 84, 0.3)',
                    opacity: 0.3
                },
                lineStyle: {
                    color: '#2F4554',
                    opacity: 0.3
                }
            },
            fillerColor: 'rgba(167, 183, 204, 0.4)',
            textStyle: {
                color: '#333'
            }
        },
        {
            type: 'inside'
        }
    ],
    visualMap: {
        type: 'piecewise',
        show: false,
        dimension: 0,
        seriesIndex: 0,
        pieces: [{
            "gte": 64,
            "lte": 65,
            "color": null
        }, {
            "gte": 91,
            "lte": 92,
            "color": null
        }],
        inRange: {
            color: '#FB0008'
        },
        outOfRange: {
            color: '#1451F9'
        }
    },
    series: [{
        name: '实际数据',
        type: 'line',
        showSymbol: false,
        data: [680, 696, 571, 586, 681, 607, 567, 592, 514, 591, 652, 533, 617, 
628, 592, 600, 533, 571, 514, 506, 617, 606, 512, 486, 628, 606, 499, 521, 566, 
537, 614, 480, 511, 557, 574, 565, 594, 607, 526, 587, 531, 510, 593, 479, 498, 
460, 463, 470, 534, 430, 519, 451, 565, 545, 524, 573, 524, 460, 499, 404, 457, 
483, 544, 467, 546, 544, 458, 403, 407, 481, 521, 446, 496, 502, 412, 415, 385, 
377, 430, 360, 477, 354, 495, 352, 405, 494, 378, 339, 455, 435, 448, 465, 457, 
374, 450, 339, 449, 332, 343, 416],
        markPoint: {
            symbol: 'circle',
            symbolSize: 10,
            itemStyle: {
                color: '#FB0008'
            },
            data: []
        }
    }]
}

```




### Other comments [其他信息]
<!-- For example: Screenshot or Online demo -->
<!-- [例如，截图或线上实例 (JSFiddle/JSBin/Codepen)] -->
http://gallery.echartsjs.com/editor.html?c=xZi7yvjzuC&v=2

<img width="729" alt="wx20180926-172204 2x" 
src="https://user-images.githubusercontent.com/16255397/46070750-1fb30c00-c1b1-11e8-8cfb-a45244bf589e.png";>
<img width="727" alt="wx20180926-172237 2x" 
src="https://user-images.githubusercontent.com/16255397/46070781-33f70900-c1b1-11e8-839c-96b61ce1041f.png";>



[ Full content available at: 
https://github.com/apache/incubator-echarts/issues/9133 ]
This message was relayed via gitbox.apache.org for devnull@infra.apache.org