在数据可视化领域，ECharts 是一款非常流行的图表库，它可以帮助我们轻松地创建各种图表，如柱状图、折线图、饼图等。其中，饼图是一种常用的图表类型，可以直观地展示数据占比。本文将重点介绍如何使用 ECharts 饼图实现文字飘上顶的效果，让你的数据展示更加美观。

一、准备工作

在开始之前，请确保你已经安装了 ECharts。可以通过以下命令进行安装：

npm install echarts --save

或者通过 CDN 链接引入 ECharts：

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>

二、创建基本饼图

首先，我们需要创建一个基本的饼图。以下是一个简单的示例代码：

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('container'));
        var option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        {value: 1048, name: '搜索引擎'},
                        {value: 735, name: '直接访问'},
                        {value: 580, name: '邮件营销'},
                        {value: 484, name: '联盟广告'},
                        {value: 300, name: '视频广告'}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    </script>
</body>
</html>

三、实现文字飘上顶效果

为了实现文字飘上顶的效果，我们需要自定义一个 ECharts 的 rich 样式，并在 tooltip 的 formatter 函数中使用该样式。以下是实现文字飘上顶效果的完整代码：

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('container'));
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    return `{top|{b}}<br/>{top|{c} (${d}%)}<br/>{top|{d}}`;
                },
                rich: {
                    top: {
                        color: '#333',
                        lineHeight: 20,
                        align: 'left'
                    }
                }
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        {value: 1048, name: '搜索引擎'},
                        {value: 735, name: '直接访问'},
                        {value: 580, name: '邮件营销'},
                        {value: 484, name: '联盟广告'},
                        {value: 300, name: '视频广告'}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    </script>
</body>
</html>

在这段代码中，我们定义了一个名为 top 的 rich 样式，用于设置文字的样式和间距。在 formatter 函数中，我们使用了 {top|} 占位符来应用该样式。

四、总结

通过本文的介绍，相信你已经学会了如何使用 ECharts 饼图实现文字飘上顶的效果。这种方法可以让你在数据可视化领域更好地展示数据，提升用户体验。如果你对 ECharts 还有其他疑问，欢迎在评论区留言交流。