echarts 3d柱状图如何自定义 tooltip

Question

echarts 3d柱状图表 如何自定义 tooltip 变成可以显示对应柱子的名字以及z轴数据

Answer 1

在tooltip中添加trigger和formatter属性，trigger设置为'item'，formatter设置为自定义函数。
在formatter函数中，通过params.data获取当前柱子的数据，包括x、y、z轴数据，然后可以根据需要进行格式化。
如果想要显示柱子的名称，需要在series中添加name属性。
下面是一个示例代码，假设数据是一个包含x、y、z轴数据和柱子名称的数组data：

option = {
    tooltip: {
        trigger: 'item',
        formatter: function(params) {
            var data = params.data;
            return data[3] + '<br>' + 'x: ' + data[0] + '<br>' + 'y: ' + data[1] + '<br>' + 'z: ' + data[2];
        }
    },
    series: [{
        name: '柱子名称',
        type: 'bar3D',
        data: data,
        shading: 'lambert',
        label: {
            show: false,
            textStyle: {
                fontSize: 16,
                borderWidth: 1
            }
        },
        itemStyle: {
            opacity: 0.8
        },
        emphasis: {
            label: {
                textStyle: {
                    fontSize: 20,
                    color: '#900'
                }
            },
            itemStyle: {
                color: '#900'
            }
        }
    }]
};

tooltip的formatter函数会显示当前柱子的名称和x、y、z轴数据。注意，在data数组中，第一个元素是x轴数据，第二个元素是y轴数据，第三个元素是z轴数据，第四个元素是柱子名称