[apache/echarts]ECharts3 折线图载入新数据后,画面连线混乱

2024-07-04 750 views
4
One-line summary [问题简述]

第一次载入数据正常,但在利用setOption重新载入大量其他数据后,整个画面连线乱掉。需要用户进行放大缩小操作,才会恢复。

请看最下方的截图。

Version & Environment [版本及环境]
  • ECharts version [ECharts 版本]: 3.2.3
  • Browser version [浏览器类型和版本]: Chrome 49.0.2623.87
  • OS Version [操作系统类型和版本]: Windows 7 SP1
Expected behaviour [期望结果]

期望能在第二次、第三次...重新载入数据时,无需人工干预,画面连线正常。

ECharts option [ECharts配置项]
var options = {
    grid: {
        x: 50,
        y: 50,
        x2: 50,
        y2: 50
    },
    toolbox: {
        show: true,
        feature: {
            mark: {show: true},
            dataZoom: {show: true},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    color: ['#5DD5E6','#3C78B5','#FFE37B','#FEC403','#B49AE0','#42CE84'],
    xAxis: {
        type: 'time',
        splitLine: {
            show: false
        }
    },
    yAxis: {
        type: 'value',
        boundaryGap: [0, '100%'],
        splitLine: {
            show: false
        },
        axisLabel: {
            formatter: function (value, index) {
                return comm_tools.bytesToFormat(value, 0, false);
            }
        }
    },
    series: [
        {
            name: '',
            type: 'line',
            smooth: true,
            showSymbol: false,
            hoverAnimation: false,
            areaStyle: {
                normal: {}
            },
            sampling: 'max',
            data: [] //这里的数据很多
        }
    ],
    tooltip: {
        trigger: 'axis',
        formatter: function (params) {
            params = params[0];
            if (params.value) {
                return "{0}: {1}{2}".f(DateTimeUtils.formatDateTime(params.value[0]),
                    comm_tools.bytesToFormat(params.value[1], 3, false), units[idx]);
            }
        }
    }
};
Other comments [其他信息]

在载入新的大量数据后,希望能正确展示: image

但目前展示的却是: image

回答

5

请问这个bug有进展吗?

我这边 v3.3.1同样遇到这个bug

出现的场景是折线图在 大量数据突然变化的时候

6

@NEtOrnANtHeR 我也遇到了。bug恢复的时候,请奔走相告啊。谢谢

1

@amei1234 有办法提供个复现的 option 么,我还没有研究出怎么复现。

6

我也遇到了

2

遇到同样情况的+1. 期待解决.

2

@zhangyj1 @jccode 可以先关闭动画解决这个问题

6

之前我遇到这个问题是因为X轴是时间,我传入option的json数组中的json串,没有按照时间顺序,在数组中排列。所以在加载时遭遇连线混乱。解决方式:传入option的json数组中的每个json串,要按照时间顺序排列

0

@pissang Hi, has this bug been fixed? I am using v3.8.5, but still come across this problem

2

这个问题在多个source的情况下也会出现, @pissang 关闭动画后仍然会有这个问题,具体的出现的场景是:两个source存在数据数量上的差异就会复现(比如source A有15条数据,source B有17条数据,source B就不会再按序排列了)

下图两条线对应两个source且都是按序排列的

image

5

我也碰到了这个问题,在setOption方法之前,通过添加clear方法清除一下数据,就可解决这个问题了