echarts环状图中间文字显示

echarts环状图，中间随机显示一个数据和相对应的数据名，但是我把鼠标放到另外一个数据上，就会出现之间显示的文字重叠在一起，没有更换成我指的数据

这一部分的代码是这样：

如果要实现，我指到对应数据，中间就更换显示它要怎么修改呢？

通过鼠标事件处理，移入隐藏label，移出显示

myChart.on('mouseover', 'series.pie', e => {
  myChart.setOption({
    series: {
      label: {
        show: false
      }
    }
  })
})
myChart.on('mouseout', 'series.pie', e => {
  myChart.setOption({
    series: {
      label: {
        show: true
      }
    }
  })
})

可以到官网引用类似插件，里面有一样的图表

引用皆我百晓生小程序回复内容作答：
要实现鼠标指向数据时中间文字的更换，可以使用echarts的事件监听机制。具体步骤如下：

在echarts的配置项option中，添加一个tooltip选项，用来显示鼠标悬浮时的提示信息。例如：
```
tooltip: {
trigger: 'item',
formatter: '{b} : {c}'  // 显示数据项的名称和值
},
```

添加一个事件监听器，监听鼠标悬浮到数据项时的事件。例如：

myChart.on('mouseover', function(params) {
// params中包含当前悬浮的数据项的相关信息
// 在这里修改中间文字的显示内容
});

在事件监听器中，根据当前悬浮的数据项信息，更新中间文字的显示内容。例如：

myChart.on('mouseover', function(params) {
var name = params.name;  // 当前悬浮数据项的名称
var value = params.value;  // 当前悬浮数据项的值
// 在这里根据name和value更换中间文字的显示内容
});

根据具体的需求和数据结构，你可以通过params对象获取当前悬浮数据项的名称和值，然后更新中间文字的显示内容。

【以下回答由 GPT 生成】

您好，

要解决您的问题，您需要使用echarts的事件处理机制来监听鼠标悬停事件，并在鼠标悬停在特定数据时，动态修改中间文字的内容。

下面是一个示例代码，用来演示如何实现您希望的效果：

// 初始化echarts图表
var myChart = echarts.init(document.getElementById('chart'));

// 定义环状图的数据
var data = [
    {value: 335, name: '数据1'},
    {value: 310, name: '数据2'},
    {value: 234, name: '数据3'},
    {value: 135, name: '数据4'},
    {value: 1548, name: '数据5'}
];

// 定义中间文字的初始内容
var centerText = '中间文字';

// 配置echarts选项
var option = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    series: [
        {
            name:'访问来源',
            type:'pie',
            radius: ['40%', '55%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: data
        }
    ]
};

// 设置初始的中间文字
option.graphic = [{
    type: 'text',
    left: 'center',
    top: '45%',
    style: {
        text: centerText,
        textAlign: 'center',
        fill: '#333',
        fontSize: 18
    }
}];

// 将配置项设置给echarts图表
myChart.setOption(option);

// 监听鼠标悬停事件
myChart.on('mouseover', function(params) {
    if (params.seriesType === 'pie') {
        // 获取当前悬停的数据的名称和值
        var name = params.name;
        var value = params.value;

        // 动态更新中间文字的内容
        option.graphic[0].style.text = name + ': ' + value;

        // 更新echarts配置
        myChart.setOption(option);
    }
});

您只需将您的数据和图表容器ID替换成适合自己的即可。

使用这段代码，在鼠标悬停在某个数据上时，中间文字会根据悬停的数据动态变换。

【相关推荐】

这个问题的回答你可以参考下: https://ask.csdn.net/questions/7629401
这篇博客你也可以参考下：echarts柱状图在顶端显示数值，并且数值为0时不展示。
您还可以看一下童金浩老师的跟风舞烟学大数据可视化－Echarts从入门到上手实战课程中的【大数据可视化技术：Echarts】课程目标小节, 巩固相关知识点
除此之外, 这篇博客: echarts柱状图与环形饼状图配置，且图例展示为标题+数据中的 环形饼状图，环形中间显示图片 部分也许能够解决你的问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^