设置dataZoom或 toolbox->feature->dataZoom,yAxis和xAxis 动态互换会出错。 #2635

Closed
zhump opened this Issue Feb 23, 2016 · 4 comments

Comments

Projects
None yet
3 participants
@zhump

zhump commented Feb 23, 2016

@pissang 如果设置了 dataZoom 或者 toolbox->feature->dataZoom ,我setTimeout中的方法,控制台就报错了,去除这个两个配置,方法就可以正常执行。我互换xy轴的方法,是不是有问题?

option = {
    toolbox: {
        feature: {
            dataZoom: {}
        }
    },
    dataZoom: [{
        show: true,
    }, {
        type: 'inside',
    }],
    legend: {
        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
    },
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'邮件营销',
            type:'line',
            stack: '总量',
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'联盟广告',
            type:'line',
            stack: '总量',
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'视频广告',
            type:'line',
            stack: '总量',
            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:'直接访问',
            type:'line',
            stack: '总量',
            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:'搜索引擎',
            type:'line',
            stack: '总量',
            data:[820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};


setTimeout(function() {
    var option  = myChart.getOption();
    var temp;
    temp = option.xAxis;
    option.xAxis =  option.yAxis;
    option.yAxis = temp;
    myChart.setOption(option);
}, 3000);

@100pah 100pah closed this in b8c0abd Feb 24, 2016

@zhump

This comment has been minimized.

Show comment
Hide comment
@zhump

zhump Mar 2, 2016

@100pah 很感谢大神修复了这个问题。
但这个交换XY轴的方式,实际应用还是有问题。

现象:
当XY轴成功对调后,此时缩放了dataZoom,再将XY换回来就会有问题。苦恼。。如图:

yx

代码如下

<body>
        <style>

            #main {
                width: 500px;
                height: 300px;
            }
        </style>
        <div id="main"></div>
        <button onclick="change()">对调XY</button>
        <script>
        var chart = echarts.init(document.getElementById('main'));
        chart.setOption({
            dataZoom: [{
                show: true,
            }, {
                type: 'inside',
            }],
            xAxis : [
                {
                    type : 'category',
                    data : ['周一','周二','周三','周四','周五','周六','周日']
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'直接访问',
                    type:'bar',
                    data:[320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name:'邮件营销',
                    type:'bar',
                    stack: '广告',
                    data:[120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name:'联盟广告',
                    type:'bar',
                    stack: '广告',
                    data:[220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name:'视频广告',
                    type:'bar',
                    stack: '广告',
                    data:[150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name:'搜索引擎',
                    type:'bar',
                    data:[862, 1018, 964, 1026, 1679, 1600, 1570],
                },
                {
                    name:'百度',
                    type:'bar',
                    barWidth : 5,
                    stack: '搜索引擎',
                    data:[620, 732, 701, 734, 1090, 1130, 1120]
                },
                {
                    name:'谷歌',
                    type:'bar',
                    stack: '搜索引擎',
                    data:[120, 132, 101, 134, 290, 230, 220]
                },
                {
                    name:'必应',
                    type:'bar',
                    stack: '搜索引擎',
                    data:[60, 72, 71, 74, 190, 130, 110]
                },
                {
                    name:'其他',
                    type:'bar',
                    stack: '搜索引擎',
                    data:[62, 82, 91, 84, 109, 110, 120]
                }
            ]
        });

        function change(){
            var option  = chart.getOption();
            var temp;
            temp = option.xAxis;
            option.xAxis =  option.yAxis;
            option.yAxis = temp;
            chart.setOption(option);
        }
        </script>
    </body>

zhump commented Mar 2, 2016

@100pah 很感谢大神修复了这个问题。
但这个交换XY轴的方式,实际应用还是有问题。

现象:
当XY轴成功对调后,此时缩放了dataZoom,再将XY换回来就会有问题。苦恼。。如图:

yx

代码如下

<body>
        <style>

            #main {
                width: 500px;
                height: 300px;
            }
        </style>
        <div id="main"></div>
        <button onclick="change()">对调XY</button>
        <script>
        var chart = echarts.init(document.getElementById('main'));
        chart.setOption({
            dataZoom: [{
                show: true,
            }, {
                type: 'inside',
            }],
            xAxis : [
                {
                    type : 'category',
                    data : ['周一','周二','周三','周四','周五','周六','周日']
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'直接访问',
                    type:'bar',
                    data:[320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name:'邮件营销',
                    type:'bar',
                    stack: '广告',
                    data:[120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name:'联盟广告',
                    type:'bar',
                    stack: '广告',
                    data:[220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name:'视频广告',
                    type:'bar',
                    stack: '广告',
                    data:[150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name:'搜索引擎',
                    type:'bar',
                    data:[862, 1018, 964, 1026, 1679, 1600, 1570],
                },
                {
                    name:'百度',
                    type:'bar',
                    barWidth : 5,
                    stack: '搜索引擎',
                    data:[620, 732, 701, 734, 1090, 1130, 1120]
                },
                {
                    name:'谷歌',
                    type:'bar',
                    stack: '搜索引擎',
                    data:[120, 132, 101, 134, 290, 230, 220]
                },
                {
                    name:'必应',
                    type:'bar',
                    stack: '搜索引擎',
                    data:[60, 72, 71, 74, 190, 130, 110]
                },
                {
                    name:'其他',
                    type:'bar',
                    stack: '搜索引擎',
                    data:[62, 82, 91, 84, 109, 110, 120]
                }
            ]
        });

        function change(){
            var option  = chart.getOption();
            var temp;
            temp = option.xAxis;
            option.xAxis =  option.yAxis;
            option.yAxis = temp;
            chart.setOption(option);
        }
        </script>
    </body>
@pissang

This comment has been minimized.

Show comment
Hide comment
@pissang

pissang Mar 2, 2016

Contributor

这个问题是因为 getOption() 获取的是存有 xAxis.min, xAxis.max 的 option,所以使用这个 option 重新 setOption 的时候会出问题,可以写成这样:

        function change(){
            var option  = chart.getOption();
            var temp;
            option.xAxis.min = option.xAxis.max = null;
            temp = option.xAxis;
            option.xAxis =  option.yAxis;
            option.yAxis = temp;
            chart.setOption(option);
        }

另外,dataZoom 不建议在有 stack 的柱状图的数值轴上使用。

Contributor

pissang commented Mar 2, 2016

这个问题是因为 getOption() 获取的是存有 xAxis.min, xAxis.max 的 option,所以使用这个 option 重新 setOption 的时候会出问题,可以写成这样:

        function change(){
            var option  = chart.getOption();
            var temp;
            option.xAxis.min = option.xAxis.max = null;
            temp = option.xAxis;
            option.xAxis =  option.yAxis;
            option.yAxis = temp;
            chart.setOption(option);
        }

另外,dataZoom 不建议在有 stack 的柱状图的数值轴上使用。

@100pah

This comment has been minimized.

Show comment
Hide comment
@100pah

100pah Mar 2, 2016

Member

对调xy轴后,dataZoom 对应到了『数值轴』。dataZoom 现在还不支持对使用了 stack 的数值轴进行操作。如果不使用 stack 则能正常。@zhump 你的应用场景中,是需要用 dataZoom 操作 stack 的数值轴么?

Member

100pah commented Mar 2, 2016

对调xy轴后,dataZoom 对应到了『数值轴』。dataZoom 现在还不支持对使用了 stack 的数值轴进行操作。如果不使用 stack 则能正常。@zhump 你的应用场景中,是需要用 dataZoom 操作 stack 的数值轴么?

@zhump

This comment has been minimized.

Show comment
Hide comment
@zhump

zhump Mar 2, 2016

最好可以一起比对哈。想了想如果dataZoom 可以对stack 后的值进行缩放,那itemStyle->normal->label->formatter应该就可以得到堆积的总和值了,我是不是太偷懒了。-。-
ddd

zhump commented Mar 2, 2016

最好可以一起比对哈。想了想如果dataZoom 可以对stack 后的值进行缩放,那itemStyle->normal->label->formatter应该就可以得到堆积的总和值了,我是不是太偷懒了。-。-
ddd

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