解决 ECharts 3D柱状图无法通过图例控制整个圆柱体的显示隐藏

问题

图例只能控制柱体，无法控制上下两个面

原因

完整的圆柱是由三个数据系列拼成的（上底面+柱体+下底面），他们的 name 不一样，图例只能控制 name 相同的数据系列

const BAR_WIDTH = 16;

const options = {
    // ...
    legend: {
        data: ['合同数量', '出租率'],
    },
    series: [
        // 圆柱-顶
        {
            name: '合同数量-顶面',
            type: 'pictorialBar',
            symbolSize: [BAR_WIDTH, BAR_WIDTH * 0.4],
            symbolOffset: [0, (BAR_WIDTH * 0.4) / -2],
            symbolPosition: 'end',
            itemStyle: {
                color: '#10cbfc',
            },
            z: 10,
            silent: true,
            label: {
                show: true,
                position: 'top',
                color: '#fff',
                fontSize: 12,
            },
            tooltip: { show: false },
        },
        // 圆柱-柱体
        {
            name: '合同数量',
            type: 'bar',
            itemStyle: {
                color: createLinearGradient(['#00B7FF', '#2244AC00'], 180),
            },
            barWidth: BAR_WIDTH,
        },
        // 圆柱-底
        {
            name: '合同数量-底面',
            type: 'pictorialBar',
            symbolSize: [BAR_WIDTH, BAR_WIDTH * 0.4],
            symbolOffset: [0, (BAR_WIDTH * 0.4) / 2],
            itemStyle: {
                color: '#1F61EA',
                opacity: 0.4,
            },
            silent: true,
            tooltip: { show: false },
        },
        // 出租率
        {
            name: '出租率',
            type: 'line',
            smooth: true,
            showSymbol: false,
            color: createLinearGradient(['#13c5af', '#39f'], 180),
            lineStyle: {
                color: createLinearGradient(
                    [
                        ['#08d0d9', 0],
                        ['#08d0d9', 0.5],
                        ['#2cd0a9', 0.5],
                        ['#37d7b1', 1],
                    ],
                    90,
                ),
            },
            areaStyle: {
                color: createLinearGradient(
                    [
                        echarts.color.modifyAlpha('#13c5af', 0.8),
                        echarts.color.modifyAlpha('#39f', 0.1),
                    ],
                    180,
                ),
            },
            yAxisIndex: 1,
            tooltip: {
                valueFormatter: (value) => value + '%',
            },
        },
    ],
}

解决

监听图例切换事件，手动切换上下两个底面的显示隐藏

// 监听切换图例选中状态后的事件
chart.on('legendselectchanged', ({ name, selected }) => {
    if (name === '合同数量') {
        // 控制3D圆柱上下两个面的显示隐藏
        chart.dispatchAction({
            type: 'legendToggleSelect',
            name: '合同数量-顶面',
        });
        chart.dispatchAction({
            type: 'legendToggleSelect',
            name: '合同数量-底面',
        });

        chart.setOption({
            yAxis: [
                {
                    // 控制关联Y轴的显示隐藏
                    show: selected[name],
                },
            ],
        });
    }
});

最终效果