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

[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)

[netwww1]

可能 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]

谢谢反馈

[Haichengguo]

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

[Haichengguo]

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

[pissang]

@netwww1 发的例子就可以

[dkypooh]

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

[iamziyue]

3.4.0版本貌似也是这样，还没修复吗？

[Fuerniu]

问题简述 (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)

echart中toolbox的magicType属性option里面设置的样式是复写series中的样式内容，只有在series中能改变的属性才能被修改，如果不是则修改不了。