echarts4r实现ggplot2中aes色彩映射及图例匹配方案问询

问题说明 #

使用echarts4r绘制单条时间序列时，已通过代码实现数据点的颜色映射，但图例无法同步匹配该颜色映射；而ggplot2中通过aes色彩映射可实现图例与点颜色的对应效果，需寻求echarts4r下的解决办法。

源数据及预处理代码 #

library(dplyr)
library(echarts4r)

ptd_data <- data.frame(
  x = seq.Date(from = as.Date("2021-01-01"), by = "month", length.out = 12),
  y = c(105.5, 97.2, 102.3, 99.8, 98.6, 101.0, 96.2, 103.1, 99.5, 98.3, 97.1, 100.4),
  upl = c(115.2, 110.1, 111.7, 108.6, 107.9, 113.0, 106.8, 112.5, 109.3, 108.1, 107.4, 110.8),
  lpl = c(89.8, 87.5, 92.0, 88.3, 87.0, 91.2, 85.9, 93.0, 88.5, 87.2, 86.1, 89.7),
  point_type = c("point_type_1", "point_type_2", "point_type_3", "point_type_4",
                 "point_type_1", "point_type_2", "point_type_3", "point_type_4",
                 "point_type_1", "point_type_2", "point_type_3", "point_type_4")
)
colours <- list("point_type_1" = "grey90","point_type_2" = "#361475","point_type_3" = "#fab428","point_type_4" = "#289de0")

ptd_data <- ptd_data %>% mutate(point_colour = sapply(point_type, function(pt) colours[[pt]]))

当前echarts4r实现（图例未匹配颜色） #

ptd_data %>%
  e_charts(x) %>%
  e_line(
    serie = y,
    symbol = "emptycircle",
    symbolSize = 4, emphasis = list(scale = 2)
  ) %>%
  e_add_nested("itemStyle", color = point_colour) %>%
  e_tooltip(trigger = "axis")

参考的ggplot2实现（图例与颜色对应） #

library(ggplot2)

ggplot() +
  geom_line(data = ptd_data, aes(x = x, y = y), color = "black") +
  geom_point(data = ptd_data, aes(x = x, y = y, color = point_type), shape = "circle", size = 4) +
  scale_color_manual(values = colours) +
  theme_minimal()

echarts4r解决方案 #

echarts4r中直接通过e_add_nested设置单个点颜色时，图例只会关联整个线条系列，无法识别单个点的分组颜色。要实现图例与点颜色对应，可将每个point_type作为独立的点系列添加，同时保留主时间序列线条：

# 初始化图表，添加主线条
chart <- ptd_data %>%
  e_charts(x) %>%
  e_line(
    serie = y,
    symbol = "none",  # 主线条关闭默认点显示
    lineStyle = list(color = "black")
  ) %>%
  e_tooltip(trigger = "axis")

# 遍历每个point_type，添加对应颜色的点系列
for (pt in names(colours)) {
  subset_data <- ptd_data %>% filter(point_type == pt)
  chart <- chart %>%
    e_scatter(
      serie = y,
      data = subset_data,
      symbol = "emptycircle",
      symbolSize = 4,
      emphasis = list(scale = 2),
      itemStyle = list(color = colours[[pt]]),
      name = pt  # 设置系列名称，对应图例显示
    )
}

chart

说明 #

• 主线条通过e_line绘制，关闭默认点显示以保持单条时间序列的视觉效果。
• 按point_type分组添加散点系列，每个系列对应一种颜色，并设置系列名称为point_type的值，图例将自动关联每个系列的颜色。
• 鼠标悬停时，e_tooltip会显示对应点的信息，保持交互性。

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