关于echartsTooptip的问题

Question

想要达到这个效果:鼠标移入的时候展示tooptip,难点: 如何做到我在移入其他扇形的时候,弹框线的位置永远在扇片的中间;
补充: 目前tooltip的样式是我自定义的图片;

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

要实现这个效果，你需要在 ECharts 的配置项中设置 tooltip 的 trigger 为 'item'，并自定义一个回调函数来处理鼠标移入事件。在这个回调函数中，你可以获取到当前触发事件的扇形的数据，然后计算出扇形的中心位置，并将 tooltip 的位置设置为这个中心位置。

以下是一个示例代码：

option = {
    series: [
        {
            type: 'pie',
            data: [
                {value: 46, name: '在线数'},
                {value: 2, name: '离线数'}
            ],
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: true,
                position: 'center',
                formatter: '{d}%',
            },
            labelLine: {
                show: true,
            },
        }
    ],
    tooltip: {
        trigger: 'item',
        formatter: function(params) {
            var data = params.data;
            var total = data.total;
            var online = data.online;
            var offline = data.offline;
            return '总数占比：' + (total * 100).toFixed(2) + '% <br> 在线数：' + online + ' <br> 离线数：' + offline;
        },
        onMouseEnter: function(params) {
            var center = calculateCenter(params); // 计算扇形中心位置的函数
            params.api.update({
                tooltip: {
                    position: center,
                }
            });
        },
        onMouseLeave: function(params) {
            params.api.update({
                tooltip: {
                    position: null,
                }
            });
        }
    }
};

function calculateCenter(params) {
    // 计算扇形中心位置的逻辑，这里需要你自己实现
}

注意：calculateCenter 函数需要你自己实现，根据触发事件的扇形数据计算出扇形的中心位置。