如何制作一个动态的时间序列趋势图

Cloud2016

参考 ECharts 示例动态排序折线图。想用 R 来实现类似的效果，下面是一份逐年的分省市的城镇化率数据。

china_province <- read.table(header = TRUE, check.names = F, sep = " ", , encoding = "UTF-8", text = "
地区 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023
全国 55.75 57.33 58.84 60.24 61.50 62.71 63.89 64.72 65.22 66.16
北京 86.50 86.71 86.76 86.93 87.09 87.35 87.55 87.50 87.57 87.83
天津 82.55 82.88 83.27 83.57 83.95 84.31 84.70 84.88 85.11 85.49
河北 49.36 51.67 53.87 55.74 57.33 58.77 60.07 61.14 61.65 62.77
山西 54.30 55.87 57.27 58.59 59.85 61.29 62.53 63.42 63.96 64.97
内蒙古 60.97 62.09 63.40 64.60 65.51 66.46 67.48 68.21 68.60 69.58
辽宁 67.05 68.05 68.87 69.49 70.26 71.21 72.14 72.81 73.00 73.51
吉林 56.81 57.64 58.75 59.71 60.85 61.63 62.64 63.36 63.72 64.73
黑龙江 59.22 60.47 61.09 61.90 63.46 64.62 65.61 65.69 66.21 67.11
上海 89.30 88.53 89.00 89.10 89.13 89.22 89.30 89.30 89.33 89.46
江苏 65.70 67.49 68.93 70.18 71.19 72.47 73.44 73.94 74.42 75.04
浙江 64.96 66.32 67.72 68.91 70.02 71.58 72.17 72.66 73.38 74.23
安徽 49.31 50.97 52.62 54.29 55.65 57.02 58.33 59.39 60.15 61.51
福建 61.99 63.22 64.39 65.78 66.98 67.87 68.75 69.70 70.11 71.04
江西 50.55 52.30 53.99 55.70 57.34 59.07 60.44 61.46 62.07 63.13
山东 54.77 56.97 59.13 60.79 61.46 61.86 63.05 63.94 64.54 65.53
河南 45.05 47.02 48.78 50.56 52.24 54.01 55.43 56.45 57.07 58.08
湖北 55.73 57.18 58.57 59.88 61.00 61.83 62.89 64.09 64.67 65.47
湖南 48.98 50.79 52.70 54.62 56.09 57.45 58.76 59.71 60.31 61.16
广东 68.62 69.51 70.15 70.74 71.81 72.65 74.15 74.63 74.79 75.42
广西 46.54 47.99 49.24 50.59 51.82 52.98 54.20 55.08 55.65 56.78
海南 53.30 54.91 56.70 58.04 59.13 59.37 60.27 60.97 61.49 62.46
重庆 59.74 61.47 63.33 65.00 66.61 68.24 69.46 70.32 70.96 71.67
四川 46.51 48.27 50.00 51.78 53.50 55.36 56.73 57.82 58.35 59.49
贵州 40.24 42.96 45.56 47.76 49.54 51.48 53.15 54.33 54.81 55.94
云南 41.21 42.93 44.64 46.29 47.44 48.67 50.05 51.05 51.72 52.92
西藏 26.23 28.87 31.57 33.38 33.80 34.51 35.73 36.61 37.39 38.88
陕西 53.01 54.74 56.39 58.07 59.65 61.28 62.66 63.63 64.02 65.16
甘肃 42.28 44.24 46.07 48.12 49.69 50.70 52.23 53.33 54.19 55.49
青海 50.84 51.67 53.55 55.45 57.27 58.78 60.08 61.02 61.43 62.80
宁夏 54.82 56.98 58.74 60.95 62.15 63.63 64.96 66.04 66.34 67.31
新疆 46.79 48.78 50.42 51.90 54.01 55.51 56.53 57.26 57.89 59.24
")

# 重塑数据
china_province_reshape2 <- reshape(
  data = china_province,
  varying = as.character(2014:2023),
  times = 2014:2023,
  v.names = "城镇化率",
  timevar = "年份", 
  idvar = "地区", 
  new.row.names = 1:(10 * 32),
  direction = "long"
)

我这有个半成品，还不好，问问大家看怎么做？

library(echarts4r)
china_province_reshape2$年份 <- as.factor(china_province_reshape2$年份)

china_province_reshape2 |>
  group_by(年份) |> 
  e_charts(年份, timeline = TRUE) |> 
  e_scatter(城镇化率, bind = 地区, symbol_size = 5) |> 
  e_tooltip()

tctcab

library(ggplot2)
library(plotly)

gg =
	china_province_reshape2 %>%
	mutate(年份 = as.numeric(年份)) %>%
	ggplot(aes(
		x = 年份,
		y = 城镇化率,
		color = 地区,
		group=地区,
		text = sprintf("%s %6.2f", 地区, 城镇化率)
	)) +
	geom_point() +
	geom_line()+
	theme_bw()
# gg

# plotly::ggplotly(gg)
plotly::ggplotly(gg,tooltip = "text") %>%
	layout(hovermode = 'x unified')

贡献个plotly版本, 缺点是悬浮的tooltip没有echart丝滑

tctcab

还有echarts 版

china_province_reshape2 %>%
  group_by(地区) %>% # 按产品分组绘制线条
  e_charts(x = 年份, timeline = FALSE) %>% # x轴为日期，不使用timeline组件
  e_line(serie = 城镇化率, smooth = TRUE) %>% # 绘制平滑折线
  e_animation(duration = 1000) %>% # 设置动画持续时间
  e_tooltip(trigger = "axis") %>%
  e_title(text = "城镇化率") %>% # 添加标题
  e_legend(show = FALSE) # 不显示图例

Cloud2016

@tctcab 上面两个方案，都没有动画呀，距离 ECharts 示例还相去甚远

tctcab

Cloud2016
上周网络抽了，点开没看到折线在动态变化 😉

shitao

GPT手搓了一个：

library(dplyr)
library(echarts4r)

# 1) 整理数据（改成英文维度名，避免模板取值问题）
dat <- china_province_reshape2 %>%
  mutate(
    year   = as.character(年份),
    value  = as.numeric(城镇化率),
    region = 地区
  ) %>%
  arrange(region, year) %>%
  select(year, value, region)

years  <- unique(dat$year)
regions <- unique(dat$region)

# 2) dataset：原始 + 按地区过滤后的视图（与官网同思路）
ds_raw <- list(
  id = "dataset_raw",
  dimensions = list("year", "value", "region"),
  source = lapply(seq_len(nrow(dat)), function(i) {
    list(dat$year[i], dat$value[i], dat$region[i])
  })
)

ds_filters <- lapply(regions, function(r) {
  list(
    id = paste0("dataset_", r),
    fromDatasetId = "dataset_raw",
    transform = list(
      type = "filter",
      config = list(and = list(list(dimension = "region", `=` = r)))
    )
  )
})

# 3) 每个地区一条折线；endLabel 在线更新
series_list <- lapply(regions, function(r) {
  list(
    type = "line",
    datasetId = paste0("dataset_", r),
    name = r,
    showSymbol = FALSE,
    smooth = TRUE,
    encode = list(
      x = "year",
      y = "value",
      itemName = "year",
      label = list("region", "value"),
      tooltip = list("value")
    ),
    endLabel = list(
      show = TRUE,
      # 模板法最稳：{@[1]} 就是 y 值
      formatter = "{a}：{@[1]}",
      valueAnimation = TRUE,
      distance = 12
    ),
    labelLayout = list(moveOverlap = "shiftY"),
    emphasis = list(focus = "series")
  )
})

# 4) 组装 option
e <- e_charts()
e$x$opts <- list(
  animationDuration = 10000,
  animationEasing   = "linear",
  dataset = c(list(ds_raw), ds_filters),
  title   = list(text = "各地区城镇化率（2014–2023）"),
  tooltip = list(trigger = "axis", order = "valueDesc"),
  legend  = list(show = FALSE),
  # grid    = list(right = 160),
  xAxis   = list(type = "category", boundaryGap = FALSE, data = years),
  yAxis   = list(name = "城镇化率"),
  series  = series_list
)
e

Cloud2016

shitao 好奇 GPT 怎么搓出来的？你是怎么问出来的？

Cloud2016

我想过用 gganimate 来做，增加重复数据，从 2014 年、2015 年一直到 2023 年，重复次数分别对应是 10 次，9 次，一直到 1 次。每次绘制的图形都是覆盖上一次的，且增加一个年份的。这种做法，不知道大家怎么看？

shitao

Cloud2016 这是全部的对话内容：https://chatgpt.com/share/68b3f13a-2dc0-800b-a7a3-fd43fa49b818，中途卡在了用 e_animation 绘制折线过程中数值的展示一直为空。最后准备放弃吐槽了一句，结果它就手搓出来了。

优化下 JS()，能支持绘制过程中数值的展示，或许用 e_animation 的方法也是可以的。GPT给的例子也就差一点了：

china_province_reshape2 %>%
  mutate(
    年份 = as.character(年份),      # x 轴用字符更稳
    城镇化率 = as.numeric(城镇化率)  # 确保是数值
  ) %>%
  arrange(地区, 年份) %>%
  group_by(地区) %>%
  e_charts(年份) %>%
  e_line(
    城镇化率,
    showSymbol = FALSE,
    smooth = TRUE,
    endLabel = list(
      show = TRUE,
      formatter = htmlwidgets::JS(
        "
        function(p){
          // 优先按维度名『城镇化率』取值；否则回退为 p.value 的最后一个元素
          var idx = (p.dimensionNames && Array.isArray(p.dimensionNames))
                      ? p.dimensionNames.indexOf('城镇化率') : -1;
          var v;
          if (Array.isArray(p.value)) {
            v = (idx >= 0 ? p.value[idx] : p.value[p.value.length - 1]);
          } else if (p.value && typeof p.value === 'object' && 'value' in p.value) {
            v = p.value.value;
          } else {
            v = p.value;
          }
          return p.seriesName + '：' + (v == null || isNaN(v) ? '' : Number(v).toFixed(2));
        }
        "
      ),
      distance = 12
    ),
    labelLayout = list(moveOverlap = "shiftY"),
    emphasis    = list(focus = "series")
  ) %>%
  e_legend(show = FALSE) %>%
  e_tooltip(trigger = "axis", order = "valueDesc") %>%
  e_x_axis(type = "category", boundaryGap = FALSE) %>%
  e_y_axis(name = "城镇化率") %>%
  e_grid(right = 150) %>%                     # 右侧给 endLabel 预留空间
  e_animation(duration = 10000, easing = "linear")

Cloud2016

@shitao 最新的方法已经非常好了，谢谢。我之前问的是百度自带的深度搜索，一直问不出来，看来免费的有差距。
@tctcab 哈哈😂，我这网络也是经常抽风，梯子也不好用。