ECharts3的toolbox.feature.magicType.option设置没有起作用 #2855

Closed
wuhaosir opened this Issue Mar 18, 2016 · 7 comments

Comments

Projects
None yet
6 participants
@wuhaosir

问题简述 (One-line summary)

ECharts3的toolbox.feature.magicType.option好像不起作用,不知道是不是我的写法有问题?

我想在 line 图的设置 xAxis: {boundaryGap: true},
bar图的时候设置 xAxis: {boundaryGap: false}

版本及环境 (Version & Environment)

  • ECharts 版本 (ECharts version):
  • 浏览器类型和版本 (Browser version):
  • 操作系统类型和版本 (OS Version):
    ECharts 3
    Chrome49
    Windows7

重现步骤 (Steps to reproduce)

1.浏览器生成line图
2.点击图右上方转换为bar图

期望结果 (Expected behaviour)

不同图时boundaryGap的设置可以生效

可能哪里有问题 (What went wrong)

可能示例不详细导致我设置方式有问题,也可能ECharts3版本新出还没有人用这个功能。
谢谢!

ECharts配置项 (ECharts option)

option = {
title: {
            text: '标题',
            textStyle: {fontSize: 16}
        },
        tooltip: {
            rigger: 'item',
            formatter: function (params) {
                return params.seriesName+'<br>'+params.name+'时:  '+params.value+' s';
            }
        },
        legend: {
            data:['解析时间','建立连接时间', '下载时间']
        },
        toolbox: {
            feature: {
                magicType: {
                    type: ['line', 'bar'],
                    option: {
                        line: {xAxis: {boundaryGap: true} },
                        bar: {xAxis: {boundaryGap: false} }
                    }
                },
                saveAsImage: {}
            }
        },
        grid: {
            top: 36,
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLabel: {formatter: '{value} (s)'},
            data: ["01","02","03","04","05","06","07","08","09","10","11","12"]
        },
        yAxis: {
            axisLabel: {
                formatter:  function (value, index) {
                    return value+' s';
                }
            }
        },
        color: ['#c23531', '#ca8622', '#91c7ae'],
        series: [{
            name: '解析时间',
            type: 'line',
            label: {
                normal: {
                    formatter: function (params) {
                        var percent = params.value * 100;
                        return percent+' %';
                    }
                }
            },
            data: [0.1, 0.1, 0.06, 0.03, 0.02, 0.01, 0.02,0.1, 0.1, 0.06, 0.03, 0.02]
        }, {
            name: '建立连接时间',
            type: 'line',
            data: [0.1, 0.21, 0.22, 0.06, 0.08, 0.01, 0.02,0.1, 0.21, 0.22, 0.06, 0.08]
        }, {
            name: '下载时间',
            type: 'line',
            data: [0.8, 0.79, 0.92, 1.11, 1.09, 0.98, 0.96,0.8, 0.69, 0.72, 0.91, 0.9]
        }]
}

其他信息 (Other comments)

@pissang pissang added the enhancement label Mar 21, 2016

@netwww1

This comment has been minimized.

Show comment
Hide comment
@netwww1

netwww1 Mar 21, 2016

可能 toolbox.feature.magicType 没作用的不仅是 option,前些天忙了,没提交这个问题,而且baidu上关于这个的文档和实例比较缺乏,不太确定是否是我写错了。

我期望的是 tiled 和 stack 按钮仅对 series 的 0、1 两个起作用,而不影响 2 (即'搜索引擎')。但实际是这个配置没有效果,3个series都被平铺、堆叠,且填充透明度没有改变。

相关的配置如下(option部分问题和楼主类似的,此外seriesIndex部分也没有作用,抱歉,代码部分好像没法编辑成美观些的样子):

var option = {
        title: {
            text: '堆叠区域图'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['邮件营销','联盟广告','搜索引擎']
        },
        toolbox: {
            feature: {
                saveAsImage: {},
                restore : {show: true},
                magicType: {
                    show: true,
                    type: ['tiled','stack'],
                    seriesIndex: {
                        tiled: [0,1],
                        stack: [0,1]
                    },
                    option: {
                        tiled: {areaStyle: {normal: {opacity:0}}},
                        stack: {areaStyle: {normal: {opacity:0.3}}}
                    }
                }
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : ['周一','周二','周三','周四','周五','周六','周日']
            }
        ],
        yAxis : [
            {
                type : 'value'
            },
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'邮件营销',
                type:'line',
                stack: '总量',
                areaStyle: {normal: {opacity:0.3}},
                data:[120, 132, 101, 134, 90, 230, 210]
            },
            {
                name:'联盟广告',
                type:'line',
                stack: '总量',
                areaStyle: {normal: {opacity:0.3}},
                data:[220, 182, 191, 234, 290, 330, 310]
            },
            {
                name:'搜索引擎',
                type:'line',
                stack: '总量2',
                yAxisIndex:1,
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                lineStyle: {normal:{shadowColor:'#666',shadowBlur: 3}},
                data:[820, 932, 901, 934, 600, 1330, 1320]
            }
        ]
    };

netwww1 commented Mar 21, 2016

可能 toolbox.feature.magicType 没作用的不仅是 option,前些天忙了,没提交这个问题,而且baidu上关于这个的文档和实例比较缺乏,不太确定是否是我写错了。

我期望的是 tiled 和 stack 按钮仅对 series 的 0、1 两个起作用,而不影响 2 (即'搜索引擎')。但实际是这个配置没有效果,3个series都被平铺、堆叠,且填充透明度没有改变。

相关的配置如下(option部分问题和楼主类似的,此外seriesIndex部分也没有作用,抱歉,代码部分好像没法编辑成美观些的样子):

var option = {
        title: {
            text: '堆叠区域图'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['邮件营销','联盟广告','搜索引擎']
        },
        toolbox: {
            feature: {
                saveAsImage: {},
                restore : {show: true},
                magicType: {
                    show: true,
                    type: ['tiled','stack'],
                    seriesIndex: {
                        tiled: [0,1],
                        stack: [0,1]
                    },
                    option: {
                        tiled: {areaStyle: {normal: {opacity:0}}},
                        stack: {areaStyle: {normal: {opacity:0.3}}}
                    }
                }
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : ['周一','周二','周三','周四','周五','周六','周日']
            }
        ],
        yAxis : [
            {
                type : 'value'
            },
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'邮件营销',
                type:'line',
                stack: '总量',
                areaStyle: {normal: {opacity:0.3}},
                data:[120, 132, 101, 134, 90, 230, 210]
            },
            {
                name:'联盟广告',
                type:'line',
                stack: '总量',
                areaStyle: {normal: {opacity:0.3}},
                data:[220, 182, 191, 234, 290, 330, 310]
            },
            {
                name:'搜索引擎',
                type:'line',
                stack: '总量2',
                yAxisIndex:1,
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                lineStyle: {normal:{shadowColor:'#666',shadowBlur: 3}},
                data:[820, 932, 901, 934, 600, 1330, 1320]
            }
        ]
    };
@pissang

This comment has been minimized.

Show comment
Hide comment
@pissang

pissang Mar 21, 2016

Contributor

谢谢反馈

Contributor

pissang commented Mar 21, 2016

谢谢反馈

@Haichengguo

This comment has been minimized.

Show comment
Hide comment
@Haichengguo

Haichengguo Mar 25, 2016

今天刚好也要用到 toolbox.feature.magicType.option , 我是想在切换到堆叠的时候,设置下:areaStyle , 结果没有效果。

今天刚好也要用到 toolbox.feature.magicType.option , 我是想在切换到堆叠的时候,设置下:areaStyle , 结果没有效果。

@Haichengguo

This comment has been minimized.

Show comment
Hide comment
@Haichengguo

Haichengguo Mar 31, 2016

这个是好了吗,官网下的echarts.min.js 可以用了吗?能给个具体的例子不

这个是好了吗,官网下的echarts.min.js 可以用了吗?能给个具体的例子不

@pissang

This comment has been minimized.

Show comment
Hide comment
@pissang

pissang Mar 31, 2016

Contributor

@netwww1 发的例子就可以

Contributor

pissang commented Mar 31, 2016

@netwww1 发的例子就可以

@dkypooh

This comment has been minimized.

Show comment
Hide comment
@dkypooh

dkypooh Aug 25, 2016

echart 如何修改 toolbox, magicType的按钮选中颜色和选中状态, 例如mark属性

dkypooh commented Aug 25, 2016

echart 如何修改 toolbox, magicType的按钮选中颜色和选中状态, 例如mark属性

@iamziyue

This comment has been minimized.

Show comment
Hide comment
@iamziyue

iamziyue Mar 6, 2017

3.4.0版本貌似也是这样,还没修复吗?

iamziyue commented Mar 6, 2017

3.4.0版本貌似也是这样,还没修复吗?

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