圆环图是echarts图表中常用的一种形式，它能够直观地展示数据的占比情况。而在一些特定的场景下，为了使图表看起来更加美观和突出重点，我们可以在圆环图中添加镂空效果。下面，我就来教大家如何轻松实现echarts圆环图的镂空效果，让图表数据展示更加美观。

准备工作

在开始之前，我们需要确保以下准备工作已经完成：

  1. 引入echarts库：在HTML文件中引入echarts库，可以通过CDN链接或下载到本地引入。
  2. 准备数据：根据实际需求准备相应的数据，用于绘制圆环图。

实现步骤

步骤一：创建基本的圆环图

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

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    series: [{
        name: '访问来源',
        type: 'pie',
        radius: '55%',
        center: ['50%', '50%'],
        data: [
            {value: 335, name: '直接访问'},
            {value: 310, name: '邮件营销'},
            {value: 234, name: '联盟广告'},
            {value: 135, name: '视频广告'},
            {value: 1548, name: '搜索引擎'}
        ],
        label: {
            normal: {
                show: true,
                position: 'center'
            }
        },
        itemStyle: {
            normal: {
                color: '#c23531',
                label: {
                    show: true,
                    formatter: '{b}: {c} ({d}%)'
                }
            }
        }
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

步骤二：添加镂空效果

要实现圆环图的镂空效果，我们需要在series配置项中添加hole属性，并设置相应的值。以下是修改后的代码：

series: [{
    name: '访问来源',
    type: 'pie',
    radius: ['40%', '70%'], // 设置内外半径，实现镂空效果
    center: ['50%', '50%'],
    data: [
        {value: 335, name: '直接访问'},
        {value: 310, name: '邮件营销'},
        {value: 234, name: '联盟广告'},
        {value: 135, name: '视频广告'},
        {value: 1548, name: '搜索引擎'}
    ],
    label: {
        normal: {
            show: true,
            position: 'center'
        }
    },
    itemStyle: {
        normal: {
            color: '#c23531',
            label: {
                show: true,
                formatter: '{b}: {c} ({d}%)'
            }
        }
    },
    // 添加镂空效果
    hole: {
        show: true,
        width: '60%',
        color: '#fff'
    }
}]

步骤三：调整样式

最后，根据实际需求调整图表的样式，如颜色、字体等。以下是修改后的代码：

series: [{
    name: '访问来源',
    type: 'pie',
    radius: ['40%', '70%'],
    center: ['50%', '50%'],
    data: [
        {value: 335, name: '直接访问'},
        {value: 310, name: '邮件营销'},
        {value: 234, name: '联盟广告'},
        {value: 135, name: '视频广告'},
        {value: 1548, name: '搜索引擎'}
    ],
    label: {
        normal: {
            show: true,
            position: 'center',
            formatter: '{b}: {c} ({d}%)',
            rich: {
                a: {
                    color: '#333',
                    lineHeight: 33,
                    fontSize: 16
                },
                b: {
                    color: '#333',
                    lineHeight: 33,
                    fontSize: 16
                }
            }
        }
    },
    itemStyle: {
        normal: {
            color: '#c23531',
            label: {
                show: true,
                formatter: '{b}: {c} ({d}%)'
            }
        }
    },
    hole: {
        show: true,
        width: '60%',
        color: '#fff'
    }
}]

总结

通过以上步骤，我们成功地实现了echarts圆环图的镂空效果。在实际应用中，可以根据具体需求调整圆环图的样式和数据，使其更加美观和实用。希望这篇文章能帮助你更好地理解和应用echarts圆环图。