ECharts图表参数配置与SQL查询数据联动 - 第4节

4.1 饼图（Pie Chart）核心参数与数据映射

饼图用于展示部分与整体的比例关系，每个扇区代表一个数据维度在总量中的占比。ECharts 的饼图支持环形图、南丁格尔玫瑰图等变体，核心参数集中在 series 的 type: 'pie' 中。

4.1.1 基础参数配置表

4.1.2 饼图数据映射与 SQL 联动

饼图的数据结构为 [{ name: '分类', value: 数值 }]。以下 SQL 查询按产品类别统计销售额占比：

-- 按产品类别统计销售额占比
SELECT 
    category_name AS name,
    SUM(sales_amount) AS value
FROM orders
JOIN products ON orders.product_id = products.id
WHERE order_date BETWEEN '2024-01-01' AND '2024-12-31'
GROUP BY category_name
ORDER BY value DESC;

前端接收 JSON 后直接赋值给 series[0].data，无需二次转换。

4.1.3 饼图参数配置示例

option = {
    tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
    legend: { bottom: '5%' },
    series: [{
        type: 'pie',
        radius: ['40%', '70%'],   // 环形图
        center: ['50%', '50%'],
        roseType: 'radius',       // 玫瑰图效果
        selectedMode: 'single',
        label: { formatter: '{b}\n{d}%' },
        emphasis: { scaleSize: 12 },
        data: [
            { name: '电子产品', value: 2850 },
            { name: '服装', value: 1920 },
            { name: '食品', value: 1580 },
            { name: '家居', value: 1240 },
            { name: '其他', value: 680 }
        ]
    }]
};

4.2 散点图（Scatter Chart）核心参数与数据映射

散点图用于展示两个连续变量之间的分布关系，每个点代表一条数据记录。ECharts 支持气泡图（通过 symbolSize 映射第三个维度）和带有回归趋势线的散点图。

4.2.1 基础参数配置表

4.2.2 散点图数据映射与 SQL 联动

散点图的数据结构为 [[x1, y1], [x2, y2], ...] 或 [{ value: [x, y] }]。以下 SQL 查询用户年龄与消费金额的关系：

-- 查询用户年龄与消费金额的散点数据
SELECT 
    u.age AS x,
    SUM(o.amount) AS y
FROM users u
JOIN orders o ON u.id = o.user_id
WHERE o.order_date >= '2024-01-01'
GROUP BY u.id, u.age
HAVING SUM(o.amount) > 0
ORDER BY u.age;

前端将结果映射为 [age, totalAmount] 数组，赋值给 series[0].data。

4.2.3 散点图参数配置示例（含气泡图）

option = {
    tooltip: { trigger: 'item', formatter: '年龄: {c0} 岁\n消费: ¥{c1}' },
    xAxis: { type: 'value', name: '年龄（岁）' },
    yAxis: { type: 'value', name: '消费金额（元）' },
    series: [{
        type: 'scatter',
        symbol: 'circle',
        symbolSize: function(value) {
            // 第三个维度：消费频次，映射为气泡大小
            return Math.max(5, value[2] / 5);
        },
        itemStyle: { opacity: 0.6 },
        large: true,
        largeThreshold: 3000,
        data: [
            [25, 3200, 12],   // [年龄, 消费金额, 消费频次]
            [30, 4800, 18],
            [35, 5600, 22],
            [40, 6200, 25],
            [45, 5100, 20],
            [50, 4300, 15],
            [55, 3800, 10],
            [60, 2900, 8]
        ]
    }]
};

4.3 饼图与散点图的参数对比

4.4 常见问题与避坑指南

• 饼图标签重叠：当扇区较小时，标签会相互遮挡。解决方案：设置 label.avoidLabelOverlap: true，或使用 label.position: 'outside' 配合引导线。
• 散点图数据点过多导致卡顿：务必开启 large: true，并设置 largeThreshold 为 2000~5000。同时降低 itemStyle.opacity 到 0.3~0.5。
• 饼图数据项过多：超过 8 项时，将小比例项（如 < 3%）合并为“其他”，并在 tooltip 中显示详细数据。
• 散点图坐标轴范围不当：使用 xAxis.min 和 xAxis.max 手动设置范围，避免离群点拉伸坐标轴导致主体数据聚集。
• SQL 返回空值：饼图和散点图都不接受 null 或 undefined 值，SQL 中需使用 COALESCE 或 HAVING 过滤无效数据。