echarts饼图引导线

Echarts 饼图引导线可以通过设置 `labelLine` 属性来实现。具体来说，可以通过以下代码设置引导线：

series: [{
    type: 'pie',
    data: [
        {value: 335, name: '直接访问'},
        {value: 310, name: '邮件营销'},
        {value: 234, name: '联盟广告'},
        {value: 135, name: '视频广告'},
        {value: 1548, name: '搜索引擎'}
    ],
    labelLine: {
        show: true,
        length: 20,
        length2: 50
    }
}]

其中，`show` 表示是否显示引导线，`length` 表示第一段引导线的长度，`length2` 表示第二段引导线的长度。

相关问题

echarts饼图引导线宽度

ECharts是一款强大的数据可视化库，在创建饼图时，你可以通过设置`emphasis.label.lineStyle.width`属性来控制引导线的宽度。这个属性用于调整鼠标悬停在某个扇区时，连接该扇区中心点到标签之间的线条宽度。

例如，如果你想要将引导线宽度设为2，可以这样做：

var option = {
    series: [{
        type: 'pie',
        emphasis: {
            label: {
                lineStyle: {
                    width: 2 // 设置引导线宽度为2像素
                }
            }
        },
        data: [...]
    }]
};

echarts饼图引导线颜色

### 修改 ECharts 饼图引导线颜色

在 ECharts 中，可以通过配置 `emphasis` 和 `lineStyle` 来调整饼图引导线的颜色。具体来说，在 `series` 的 `itemStyle` 或者 `labelLine` 属性下进行设置可以实现这一需求[^1]。

下面是一个具体的例子来展示如何修改引导线的颜色：

option = {
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                normal: {
                    lineStyle: {
                        color: '#ff0000' // 设置默认状态下的引导线颜色
                    }
                },
                emphasis: {
                    lineStyle: {
                        color: '#00ff00' // 设置高亮状态下（鼠标悬停）的引导线颜色
                    }
                }
            },
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ]
        }
    ]
};

通过上述代码中的 `labelLine.normal.lineStyle.color` 可以指定正常情况下引导线的颜色；而 `labelLine.emphasis.lineStyle.color` 则用于定义当数据项被选中时（比如鼠标悬浮），其对应的引导线所呈现的颜色。