如何用echarts4r创建带时间轴的气泡图？问题排查与需求实现

问题分析 #

你的代码无法显示内容的核心原因是变量映射混乱：

• 错误地将population设为x轴，随后e_scatter又重复使用population作为x轴参数，导致数据逻辑冲突
• 未指定气泡大小与population的绑定关系
• 未按siteid区分气泡颜色，也未固定坐标轴范围

修正代码 #

以下代码实现了你的需求：气泡大小由population决定、颜色按siteid区分、坐标轴固定，且时间轴切换时能清晰观察变化：

library(echarts4r)
library(tidyverse)

df <- data.frame(
  siteid = c(rep(1,3), rep(2,3), rep(3,3)),
  year = rep(c(2001,2005,2010),3),
  population = c(10,30,40,15,35,50,12,40,60),
  dis = c(2,5,10,2,0,0,0,5,10)
)

# 计算全局坐标轴极值，用于固定范围
x_range <- range(df$dis)
y_range <- range(df$population)

df |>
  group_by(year) |>
  e_charts(dis, timeline = TRUE) |> # 将dis设为x轴
  # 映射y轴为population，气泡大小绑定population，颜色区分siteid
  e_scatter(population, symbol_size = ~population, color = ~factor(siteid)) |>
  e_x_axis(min = x_range[1], max = x_range[2]) |> # 固定x轴范围
  e_y_axis(min = y_range[1], max = y_range[2]) |> # 固定y轴范围
  e_legend(title = list(text = "站点ID")) |> # 显示颜色图例
  # 自定义tooltip，展示详细信息
  e_tooltip(formatter = htmlwidgets::JS("
    function(params) {
      return '<strong>站点ID:</strong> ' + params.name + '<br/>' +
             '<strong>距离:</strong> ' + params.value[0] + '<br/>' +
             '<strong>人口:</strong> ' + params.value[1];
    }
  "))

关键修改说明 #

1. 变量映射修正：将x轴设为dis，y轴设为population，明确数据维度
2. 气泡大小绑定：通过symbol_size = ~population让气泡大小随population值动态变化
3. 颜色区分：用color = ~factor(siteid)将不同siteid的气泡映射为不同颜色，并添加图例
4. 固定坐标轴：提前计算整个数据集的dis和population极值，通过e_x_axis和e_y_axis锁定范围，避免切换时间轴时坐标轴缩放
5. 优化交互：添加自定义tooltip，方便查看每个气泡的具体数据

可选：分类y轴版本 #

如果希望将siteid作为y轴（固定每个站点的纵向位置，更直观观察变化），可以使用以下代码：

df |>
  group_by(year) |>
  e_charts(dis, timeline = TRUE) |>
  e_scatter(factor(siteid), symbol_size = ~population, color = ~factor(siteid)) |>
  e_x_axis(min = x_range[1], max = x_range[2]) |>
  e_y_axis(type = "category") |> # 设置y轴为分类轴
  e_legend(title = list(text = "站点ID")) |>
  e_tooltip(formatter = htmlwidgets::JS("
    function(params) {
      return '<strong>站点ID:</strong> ' + params.value[1] + '<br/>' +
             '<strong>距离:</strong> ' + params.value[0] + '<br/>' +
             '<strong>人口:</strong> ' + params.symbolSize;
    }
  "))

内容的提问来源于stack exchange，提问作者Robin