佬们看看这个饼图，有点难调

让哈基米调了下，但是三角尖的距离和右边边距有点调不动

Examples - Apache ECharts

Apache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。

const rawData = [
  { name: 'Black', total: 1878, sub: 800, color: '#1a1a1a' },
  { name: 'Yellow', total: 1236, sub: 400, color: '#fcd328' },
  { name: 'Red', total: 1802, sub: 850, color: '#d32027' },
  { name: 'Green', total: 2763, sub: 1200, color: '#24ae43' }
];

const topLayerData = [];
rawData.forEach(item => {
    // 1. 定义灰色块距大块右边缘的微小间距 (占该扇区的 3%)
    const margin = item.total * 0.03; 
    // 2. 计算左侧透明区域，将灰色块挤向右侧
    const leftSpace = item.total - item.sub - margin;

    // --- 顶层扇区三段式逻辑 ---
    // [左] 透明占位
    topLayerData.push({
        value: leftSpace > 0 ? leftSpace : 0,
        itemStyle: { color: 'transparent' }
    });
    // [中] 灰色比例块 (内径为0，保证是尖角且中间没洞)
    topLayerData.push({
        value: item.sub,
        itemStyle: { 
            color: '#eeeeee',
            borderRadius: 0 // 尖角不需要圆角
        }
    });
    // [右] 透明微间距 (实现距右边缘的距离)
    topLayerData.push({
        value: margin,
        itemStyle: { color: 'transparent' }
    });
});

option = {
    backgroundColor: '#fff',
    series: [
        // --- 底层：大块背景 & 文字中心层 ---
        {
            type: 'pie',
            radius: [0, '75%'],
            silent: false,
            padAngle: 0, // 【要求】大块之间不要动，保持紧贴
            label: {
                show: true,
                position: 'inside',
                formatter: (params) => {
                    // 找到对应的 sub 数值显示在大块中心
                    const item = rawData[params.dataIndex];
                    return `${item.total}(${item.sub})`;
                },
                fontSize: 20, // 【要求】20px 大小
                color: '#fff',
                fontWeight: 'bold'
            },
            data: rawData.map(item => ({
                value: item.total,
                name: item.name,
                itemStyle: { 
                    color: item.color,
                    // 默认状态下的悬浮阴影
                    shadowBlur: 20,
                    shadowOffsetX: 5,
                    shadowOffsetY: 5,
                    shadowColor: 'rgba(0, 0, 0, 0.3)'
                }
            })),
            emphasis: {
                scale: true,
                scaleSize: 10,
                itemStyle: {
                    // 【要求】你提供的 emphasis 阴影配置
                    shadowBlur: 30,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 1)"
                }
            },
            z: 1
        },
        // --- 顶层：灰色小块 (统统靠右，尖角无洞) ---
        {
            type: 'pie',
            radius: [0, '65%'], // 半径略小，产生四周的留白感
            silent: true, 
            label: { show: false },
            labelLine: { show: false },
            data: topLayerData,
            z: 2 
        }
    ]
};

18 个帖子 - 6 位参与者

阅读完整话题