自定义标签和重点标签重叠答案

【问题标题】：Customized label and Emphasis label overlap自定义标签和重点标签重叠
【发布时间】：2021-11-18 07:48:02
【问题描述】：

我尝试让饼图显示“自定义标签”，鼠标触发时更改标签。但除了蓝色数据外，其他所有内容都将与“强调标签”重叠。
“避免标签重叠”不起作用。
有办法吗？
enter image description here enter image description here

这是一个例子

var option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: true,
        position: 'center',
        formatter:  function (params) {
              var html = 'TEST';
              return html;
            }
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
};

【问题讨论】：

标签： echarts

【解决方案1】：

终于找到方法了。

使用鼠标事件改变中心的标签。

<!DOCTYPE html>
    <html lang="Zh-TW">
    <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
    <meta charset="utf-8">
    </head>
    <body>
    <div id="main" style="width:600px;height:600px;">
    </div>
        
    <script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
    title: {
        text: 'Total',
        textStyle: {
            fontSize: 35,
        },
        x: 'center',
        y: 'center'
        },
    tooltip: {
    trigger: 'item'
    },
    legend: {
    top: '5%',
    left: 'center'
    },
    series: [
        {
        name: 'Testname',
        type: 'pie',
        radius: ['40%', '60%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: true,
        textAlign: 'center',
        label: {
            normal: {
                show: true,
                formatter: function (params) {
                          return params.name+'\n'+params.percent+'%'
                        },
                textStyle: {
                            fontSize: 20
                },
                },
            },
        itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                   },
        data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
        },
        {
        name: 'Testname',
        type: 'pie',
        radius: ['40%', '60%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: true,
        textAlign:'center',
        label: {
            normal: {
                show: true,
                position: 'center',
                formatter: '{b}\n{c}',
                align: 'center',
                verticalAlign: 'middle',
                textStyle: {
                            fontSize: 0
                           },
                    },
        emphasis:{
                    show: true,
                    textStyle: {
                        fontSize: 35,
                        fontWeight: 'bold'
                        },
                    formatter: '{b}\n{c}'
                },
        },                        
        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
        data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
         },
                   
            ]
};


myChart.setOption(option);

myChart.on('mouseover', { seriesName: 'Testname' }, () => {
    myChart.setOption({
        title: {
                show: false
               }
        })
    })
myChart.on('mouseout', { seriesName: 'Testname' }, () => {
    myChart.setOption({
        title: {
                show: true
               }
        })
    })
</script>
    </body>
    </html>

【讨论】：

【解决方案2】：

我认为没有办法解决这个问题。

【讨论】：