ECharts4: Uncaught TypeError: Cannot read property 'slice' of undefined

admover commented 6 years ago

One-line summary [问题简述]

使用dataZoom echarts 3 中正常 echarts 4 中报错

Uncaught TypeError: Cannot read property 'slice' of undefined
    at AxisProxy.getDataPercentWindow (echarts.js:68274)
    at ExtendedClass.getPercentRange (echarts.js:69116)
    at ExtendedClass._resetInterval (echarts.js:69854)
    at ExtendedClass._buildView (echarts.js:69479)
    at ExtendedClass.render (echarts.js:69451)
    at echarts.js:25114
    at Array.forEach (<anonymous>)
    at each$1 (echarts.js:488)
    at renderComponents (echarts.js:25112)
    at render (echarts.js:25095)

Version & Environment [版本及环境]

ECharts version [ECharts 版本]: 4.0.2
Browser version [浏览器类型和版本]: Chrome 64
OS Version [操作系统类型和版本]: macOS 10.13.2

Expected behaviour [期望结果]

ECharts option [ECharts配置项]

option = {
    grid: {
            top: '10px',
            left: '60px',
            right: '50px'
        },
        tooltip: {
            trigger: 'axis',
            formatter: function(params) {
                var date = new Date(params[0]['data'][0]);
                s = (date.getMonth() + 1) + '月' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes();

                params.forEach(function(item) {
                    s += '<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>';
                    s += item.seriesName + ' : ' + item.data[1] + ' %';
                });

                return s
            }
        },
        xAxis: {
            type: 'time',
            splitNumber: 10,
            axisLabel: {
                formatter: function(value) {
                    return echarts.format.formatTime('MM月dd日 HH:mm', new Date(value), true);
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: function(value) {
                    return value + ' %';
                }
            }
        },
        dataZoom: [{ // 这个dataZoom组件，默认控制x轴。
            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            start: 95, // 左边在 10% 的位置。
            end: 100 // 右边在 60% 的位置。
        }],
        series: []
}

Other comments [其他信息]

100pah commented 6 years ago

根据您给出的 option，在目前 HEAD 版本中，我没有复现出这个报错。因为您给的 option 中，series 一项是空的。不知道是不是 option 不全？

vision57 commented 6 years ago

我是通过react用的，也会出现这个错误（我这里dataZoom的type为insider）。 @100pah 复现方法就是保持series为[]，然后让render方法执行两次，第二次就会报错。有时间我贴个出错样例。

vision57 commented 6 years ago

重新尝试了下，我上面的结论不太准确。下面的例子必然能够重现错误：

echarts: 4.0.3 echarts-for-react: 2.0.6

<ReactEcharts
  notMerge={true}
  option={{
    dataZoom: [{
      type: 'inside',
      start: 0,
      end: 100
    }],
    xAxis: {
      type: 'time'
    },
    yAxis: {
      type: 'value'
    },
    series: []
  }} />

关键地方有几个：

series必须为[]
dataZoom不能为[]
notMerge必须为true

另外，如果lazyUpdate为true，那么可能要第二次渲染才会报错，而且是一直无限循环刷错误提示。

apache / echarts