DataZoom 在动态数据时表现异常 #2667

Closed
qingweibinary opened this Issue Feb 26, 2016 · 5 comments

Comments

Projects
None yet
2 participants
@qingweibinary
  1. 有时候 zoom in 会让 label 跑到 grid 外面
  2. 有时候 zoom out 之后并没有和 series data 同步

我猜测zoom in/out 时并没有设置上下限,当我用滑鼠的轮子操作时,zoom in 到最大化后,继续 zoom in 会循环回到 原始 zoom out 的状态

还是我需要在动态加载数据的同时对 dataZoom 进行改动?

附上示例

option = {
    title : {
        text: '动态数据',
        subtext: '纯属虚构'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['最新成交价']
    },
    toolbox: {
        show : true,
        feature : {
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    dataZoom : [{
        type: 'inside',
        start : 0,
        end : 100
    },
    {
        type: 'slider',
        start : 0,
        end : 100
    }
    ],
    xAxis : [
        {
            type : 'value',
            scale: true
        }
    ],
    yAxis : [
        {
            type : 'value',
            scale: true,
            name : '预购量',
            max: 1200,
            min: 0,
            boundaryGap: [0.2, 0.2]
        }
    ],
    series : [
        {
            name:'最新成交价',
            type:'line',
            data:(function (){
                var res = [];
                var len = 0;
                while (len < 10) {
                    var n = [
                        len,
                        (Math.random()*10 + 5).toFixed(1)
                    ];
                    res.push({name: n[0], value: n});
                    len++;
                }
                return res;
            })(),
            animation: true,
            animationDurationUpdate: 500,
            animationEasing: 'linear',
            animationEasingUpdate: 'linear'
        }
    ]
};
clearInterval(app.timeTicket);
app.count = 11;
app.timeTicket = setInterval(function (){

    var data0 = option.series[0].data;
    data0.shift();
    var lastData = data0[data0.length - 1].value;
    var x = [lastData[0] + 1, Math.round(Math.random() * 1000)];

    data0.push({name: x[0], value: x});

    myChart.setOption(option);
}, 2100);

@pissang pissang added the bug label Feb 26, 2016

@pissang

This comment has been minimized.

Show comment
Hide comment
@pissang

pissang Feb 26, 2016

Contributor

动态数据加载只设置 series 试试,现在你是完整的 option 同时设置了 dataZoom

Contributor

pissang commented Feb 26, 2016

动态数据加载只设置 series 试试,现在你是完整的 option 同时设置了 dataZoom

@qingweibinary

This comment has been minimized.

Show comment
Hide comment
@qingweibinary

qingweibinary Feb 26, 2016

setOption 只设置 series 的话,ZoomIn 循环至 zoomOut 的 情况不再出现,但是还是有 label 溢出的问题

option = {
    title : {
        text: '动态数据',
        subtext: '纯属虚构'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['最新成交价']
    },
    toolbox: {
        show : true,
        feature : {
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    dataZoom : [{
        type: 'inside',
        start : 0,
        end : 100
    },
    {
        type: 'slider',
        start : 0,
        end : 100
    }
    ],
    xAxis : [
        {
            type : 'value',
            scale: true
        }
    ],
    yAxis : [
        {
            type : 'value',
            scale: true,
            name : '预购量',
            max: 1200,
            min: 0,
            boundaryGap: [0.2, 0.2]
        }
    ],
    series : [
        {
            name:'最新成交价',
            type:'line',
            data:(function (){
                var res = [];
                var len = 0;
                while (len < 10) {
                    var n = [
                        len,
                        (Math.random()*10 + 5).toFixed(1)
                    ];
                    res.push({name: n[0], value: n});
                    len++;
                }
                return res;
            })(),
            animation: true,
            animationDurationUpdate: 500,
            animationEasing: 'linear',
            animationEasingUpdate: 'linear'
        }
    ]
};
clearInterval(app.timeTicket);
app.count = 11;
app.timeTicket = setInterval(function (){

    var data0 = option.series[0].data;
    data0.shift();
    var lastData = data0[data0.length - 1].value;
    var x = [lastData[0] + 1, Math.round(Math.random() * 1000)];

    data0.push({name: x[0], value: x});

    myChart.setOption({series: option.series});
}, 2100);

setOption 只设置 series 的话,ZoomIn 循环至 zoomOut 的 情况不再出现,但是还是有 label 溢出的问题

option = {
    title : {
        text: '动态数据',
        subtext: '纯属虚构'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['最新成交价']
    },
    toolbox: {
        show : true,
        feature : {
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    dataZoom : [{
        type: 'inside',
        start : 0,
        end : 100
    },
    {
        type: 'slider',
        start : 0,
        end : 100
    }
    ],
    xAxis : [
        {
            type : 'value',
            scale: true
        }
    ],
    yAxis : [
        {
            type : 'value',
            scale: true,
            name : '预购量',
            max: 1200,
            min: 0,
            boundaryGap: [0.2, 0.2]
        }
    ],
    series : [
        {
            name:'最新成交价',
            type:'line',
            data:(function (){
                var res = [];
                var len = 0;
                while (len < 10) {
                    var n = [
                        len,
                        (Math.random()*10 + 5).toFixed(1)
                    ];
                    res.push({name: n[0], value: n});
                    len++;
                }
                return res;
            })(),
            animation: true,
            animationDurationUpdate: 500,
            animationEasing: 'linear',
            animationEasingUpdate: 'linear'
        }
    ]
};
clearInterval(app.timeTicket);
app.count = 11;
app.timeTicket = setInterval(function (){

    var data0 = option.series[0].data;
    data0.shift();
    var lastData = data0[data0.length - 1].value;
    var x = [lastData[0] + 1, Math.round(Math.random() * 1000)];

    data0.push({name: x[0], value: x});

    myChart.setOption({series: option.series});
}, 2100);
@pissang

This comment has been minimized.

Show comment
Hide comment
@pissang

pissang Feb 26, 2016

Contributor

label 溢出指的是?

Contributor

pissang commented Feb 26, 2016

label 溢出指的是?

@qingweibinary

This comment has been minimized.

Show comment
Hide comment
@qingweibinary

qingweibinary Feb 26, 2016

不好意思,不常用中文,就 series 的 label , (circle) 会跑到 grid 外面,

在快速 zoom in, 再 zoom out 后,DataZoom slider 会显示已 zoom out 至最大,但图表的显示并不正确,有时可以看到 circle 在 axis 以外

screen shot 2016-02-26 at 10 53 31 am

看看右侧有个小圆点

不好意思,不常用中文,就 series 的 label , (circle) 会跑到 grid 外面,

在快速 zoom in, 再 zoom out 后,DataZoom slider 会显示已 zoom out 至最大,但图表的显示并不正确,有时可以看到 circle 在 axis 以外

screen shot 2016-02-26 at 10 53 31 am

看看右侧有个小圆点

@qingweibinary

This comment has been minimized.

Show comment
Hide comment
@qingweibinary

qingweibinary Feb 26, 2016

I have a workaround for this which fit my use case ~
Set xAxis (or whichever Axis that DataZoom works on) with absolute min and max value
eg.

{ xAxis: {
    min: minimumData - 10,
    max: maximumData + 10,
}}

This will at least prevent label go outside of the graph

I have a workaround for this which fit my use case ~
Set xAxis (or whichever Axis that DataZoom works on) with absolute min and max value
eg.

{ xAxis: {
    min: minimumData - 10,
    max: maximumData + 10,
}}

This will at least prevent label go outside of the graph

@100pah 100pah closed this in f78b8a2 Feb 26, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment