如何实现点击3D Piechart时切片沿Z轴抬升？

基于ECharts的实现方案 #

ECharts的3D饼图支持通过修改数据项的z属性控制切片在Z轴的位置，结合点击事件可实现点击抬升效果：

1. 初始化带3D配置的饼图：

const myChart = echarts.init(document.getElementById('main'));
let lastSelectedIndex = -1; // 记录上一个选中的切片索引

const option = {
    tooltip: { trigger: 'item' },
    series: [
        {
            name: '数据',
            type: 'pie',
            radius: ['40%', '70%'],
            emphasis: { disabled: true }, // 关闭默认高亮，避免冲突
            coordinateSystem: 'cartesian3D',
            label: { show: true },
            data: [
                { value: 335, name: '直接访问', z: 0 },
                { value: 310, name: '邮件营销', z: 0 },
                { value: 234, name: '联盟广告', z: 0 },
                { value: 135, name: '视频广告', z: 0 },
                { value: 1548, name: '搜索引擎', z: 0 }
            ]
        }
    ],
    grid3D: {
        boxWidth: 200,
        boxHeight: 80,
        boxDepth: 80,
        viewControl: { alpha: 40, beta: 0 }
    }
};

myChart.setOption(option);

2. 绑定点击事件修改Z轴位置：

myChart.on('click', (params) => {
    const currentIndex = params.dataIndex;
    // 重置上一个选中切片的Z轴位置
    if (lastSelectedIndex !== -1) {
        myChart.setOption({
            series: [{ data: [{ id: lastSelectedIndex, z: 0 }] }]
        });
    }
    // 设置当前切片的Z轴抬升值（可根据需求调整数值）
    myChart.setOption({
        series: [{ data: [{ id: currentIndex, z: 10 }] }]
    });
    lastSelectedIndex = currentIndex;
});

基于Highcharts的实现方案 #

Highcharts可通过修改切片图形的z属性实现Z轴抬升：

let lastSelectedPoint = null;

Highcharts.chart('container', {
    chart: {
        type: 'pie',
        options3d: { enabled: true, alpha: 45, beta: 0 }
    },
    title: { text: '3D饼图Z轴抬升演示' },
    plotOptions: {
        pie: {
            allowPointSelect: false, // 关闭默认选中效果
            cursor: 'pointer',
            point: {
                events: {
                    click: function () {
                        // 重置上一个选中切片的Z轴位置
                        if (lastSelectedPoint) {
                            lastSelectedPoint.graphic.attr({ z: 0 });
                            lastSelectedPoint.redraw();
                        }
                        // 设置当前切片的Z轴抬升值
                        this.graphic.attr({ z: 20 });
                        this.redraw();
                        lastSelectedPoint = this;
                    }
                }
            },
            showInLegend: true
        }
    },
    series: [{
        name: '数据',
        data: [
            ['直接访问', 335],
            ['邮件营销', 310],
            ['联盟广告', 234],
            ['视频广告', 135],
            ['搜索引擎', 1548]
        ]
    }]
});

关键注意点 #

• 关闭图表库默认的高亮/选中效果，避免和自定义Z轴抬升冲突
• 记录上一个选中的切片，确保每次仅一个切片处于抬升状态
• Z轴抬升数值需根据图表3D尺寸调整，过大可能导致切片超出可视区域

内容的提问来源于stack exchange，提问作者Giuseppe