在 ECharts 中,你可以通过 tooltip 配置中的 formatter 属性来自定义极坐标系中 tooltip 的内容格式。formatter 是一个回调函数,可以对 tooltip 中显示的内容进行灵活的定制。

以下是一个例子,演示如何设置极坐标系中 tooltip 内容的格式化:
option = {
    polar: {
        center: ['50%', '50%'],
        radius: '80%'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        },
        formatter: function(params) {
            var result = params[0].name + '<br>';
            params.forEach(function(item) {
                result += item.seriesName + ': ' + item.value + '<br>';
            });
            return result;
        }
    },
    angleAxis: {
        type: 'value',
        startAngle: 0
    },
    radiusAxis: {
        min: 0
    },
    polar: {
        center: ['50%', '50%'],
        radius: '80%'
    },
    series: [{
        type: 'bar',
        data: [2, 1, 3, 4],
        coordinateSystem: 'polar',
        name: 'A',
        stack: 'a'
    }, {
        type: 'bar',
        data: [5, 1, 2, 6],
        coordinateSystem: 'polar',
        name: 'B',
        stack: 'a'
    }, {
        type: 'bar',
        data: [1, 2, 3, 4],
        coordinateSystem: 'polar',
        name: 'C',
        stack: 'a'
    }],
    indicator: [
        { text: '指示器1', max: 5 },
        { text: '指示器2', max: 5 },
        { text: '指示器3', max: 5 },
        { text: '指示器4', max: 5 }
    ]
};

在上述例子中,通过设置 formatter 回调函数,自定义了 tooltip 的显示内容。在函数中,通过遍历 params 数组获取每个系列的名称和对应的值,然后拼接成想要显示的格式。你可以根据需要进一步定制 formatter 函数以满足你的需求。


转载请注明出处:http://www.zyzy.cn/article/detail/5236/ECharts