问题记录（4）echarts问题 — 引导线和label内部同时生效

问题：为了让echarts的饼图的引导线和饼图内部label同时生效，引导性的标签需要设置'outside'，

但是饼图内部必须设置'inside',默认并不支持同一个扇区同时显示内部（inside）和外部（outside）两种标签,

解决方案：可以设置两个重叠的饼图系列，其中一个系列的标签设置在内部，另一个系列的标签设置在外部，然后通过调整样式使它们看起来像是一个整体。

var option = {
    series: [
        {
            type: 'pie',
            radius: ['50%', '70%'], // 内部标签系列稍微小一点
            center: ['50%', '50%'],
            data: [
                { value: 335, name: '扇区A' },
                { value: 310, name: '扇区B' },
 
            ],
            label: {
                normal: {
                    show: true,
                    position: 'inside',  --------重点
                    formatter: '{b} ({d}%)', // 只显示标签名称和百分比
                    fontSize: 12, // 调整内部标签字体大小
                }
            },
            silent: true, // 不响应鼠标事件，避免影响外层标签的交互
            z: 10, // 设置更高的层级，保证被外层标签覆盖
        },
        {
            type: 'pie',
            radius: ['60%', '80%'], // 外部标签系列稍大一点以容纳标签
            center: ['50%', '50%'],
            data: [
                { value: 335, name: '扇区A', label: { value: '内部标签值' } },
                { value: 310, name: '扇区B', label: { value: '内部标签值' } },
                // 其他数据...
            ],
            label: {
                normal: {
                    show: true,
                    position: 'outside', ---------------重点
                    formatter: function (params) {
                        return params.data.label.value; // 显示内部标签值
                    },
                    distance: 20, // 调整外部标签距离圆心的距离
                    alignTo: 'edge', // 对齐方式为边缘对齐
                    fontSize: 14, // 调整外部标签字体大小
                }
            },
            emphasis: {
                label: {
                    show: false, // 可选，禁用高亮时的外部标签显示
                }
            }
        }
    ]
};

echarts.init(document.getElementById('main')).setOption(option);