在 ECharts 中，饼图是一种非常直观的数据展示方式，它能够将数据以扇形的形式展示，每个扇形代表数据的一部分。然而，当饼图中的数据部分较多或者部分占比相近时，直接展示可能会让读者难以清晰地了解每一部分的占比。这时，巧用引导线可以帮助我们更清晰地展示每一部分的占比。以下是如何在 ECharts 饼图中使用引导线来增强可视化效果的详细步骤：

1. 准备数据和配置

首先，我们需要准备一些数据。这里我们以一个简单的例子开始：

var data = [
    {value: 335, name: '直接访问'},
    {value: 310, name: '邮件营销'},
    {value: 234, name: '联盟广告'},
    {value: 135, name: '视频广告'},
    {value: 1548, name: '搜索引擎'}
];

然后，我们需要创建一个 ECharts 实例并设置基本的配置：

var myChart = echarts.init(document.getElementById('main'));

var option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 10,
        data: data.map(function (item) {
            return item.name;
        })
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: data,
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: true,
                    length: 10,
                    length2: 10,
                    smooth: true,
                    lineStyle: {
                        color: '#ccc'
                    }
                }
            }
        }
    ]
};

2. 设置引导线

在上述配置中，labelLine 是控制引导线的关键部分。以下是 labelLine 配置的详细解释：

  • show: 是否显示引导线，设置为 true。
  • length: 引导线的长度，可以根据需要调整。
  • length2: 引导线从扇形到标签的长度，可以根据需要调整。
  • smooth: 引导线的平滑程度，设置为 true 可以让引导线更平滑。
  • lineStyle: 引导线的样式，包括颜色、宽度等。

3. 调整样式

为了使引导线更加清晰，我们可以调整 lineStyle 的颜色和宽度：

labelLine: {
    normal: {
        show: true,
        length: 15,
        length2: 15,
        smooth: true,
        lineStyle: {
            color: '#333',
            width: 2
        }
    }
}

4. 渲染图表

最后，我们将配置好的选项赋值给 ECharts 实例：

myChart.setOption(option);

这样，一个带有清晰引导线的饼图就完成了。通过调整 length、length2 和 lineStyle，你可以根据实际需求来优化引导线的显示效果，从而让读者更直观地理解每一部分的占比。