echarts4r 教程2：Advanced

写在前面
本文为 R 语言 echarts4r 包的学习笔记。本着自己学习、分享他人的态度，分享学习笔记，希望能对大家有所帮助。软件可能随时更新，建议配合官方文档一起阅读。推荐先按顺序阅读往期内容：\
1. echarts4r 教程1：Get Started

::: block-1

1 Common options

您可以使用 e_common 设置两个常用选项：

Font family
Theme

e_common(
  font_family = "Raleway",
  theme = NULL
)

此页面上的所有图表都将使用 Raleway 字体（源自 Google 字体的 CSS）。

2 Grouping

该包还理解 dplyr::group_by 以避免必须手动一层一层地添加许多层。echarts4r 本质上会为每一个 group 绘制一个 serie。

iris |> 
  group_by(Species) |> 
  e_charts(Sepal.Length) |> 
  e_line(Sepal.Width) |> 
  e_title("Grouped data")

上面为每个 group (group_by) 绘制了一条线 (e_line)。有一个例外，从 0.2.1 开始，当使用 e_charts 初始化图表时，timeline 设置为 TRUE。在后一种情况下，每个 group 都用作 timeline 的一个步骤。

iris |> 
  group_by(Species) |> 
  e_charts(Sepal.Length, timeline = TRUE) |> 
  e_line(Sepal.Width) |> 
  e_title("Timeline")

3 Stacked

df <- data.frame(
  x = LETTERS[1:10],
  a = runif(10),
  b = runif(10),
  c = runif(10),
  d = runif(10)
)

df |> 
  e_charts(x) |> 
  e_bar(a, stack = "grp") |> 
  e_bar(b, stack = "grp") |> 
  e_bar(c, stack = "grp2") |> 
  e_bar(d, stack = "grp2")

4 Scatter

从 0.2.0 开始，e_scatter 和 e_effect_scatter 函数采用不同的、经过大幅改进的 scale 参数，它是一个缩放函数。

iris |> 
    group_by(Species) |> 
    e_charts(Sepal.Length) |> 
    e_scatter(Petal.Length, Sepal.Width)

默认缩放函数是 e_scale，它从 1 重新缩放到 20，但您可以传递自己的缩放函数。缩放函数应采用 integer 或 numeric 向量并返回相同长度的相似向量。例如，要创建一个从 5 重新缩放到 30 的函数：

my_scale <- function(x){
  scales::rescale(x, to = c(5, 30))
}

iris |> 
    group_by(Species) |> 
    e_charts(Sepal.Length) |> 
    e_scatter(Petal.Length, Sepal.Width, scale = my_scale)

这也适用于 R 4.1.0 语法。

iris |>  
    group_by(Species) |> 
    e_charts(Sepal.Length) |> 
    e_scatter(
      Petal.Length, 
      Sepal.Width, 
      scale = \(x) scales::rescale(x, to = c(5, 30))
    )

当未传递 size 时，点的大小由 symbol_size 定义。

iris |> 
    group_by(Species) |> 
    e_charts(Sepal.Length) |> 
    e_scatter(Petal.Length, symbol_size = 15)

当 size 被传递时，symbol_size 成为在缩放函数运行后执行的乘数。例如 $log(1+x)*5$

iris |> 
    group_by(Species) |> 
    e_charts(Sepal.Length) |> 
    e_scatter(Petal.Length, Sepal.Width, scale = log1p, symbol_size = 10)

添加此行为是因为能够在合理的范围内缩放点非常重要，理想情况下点的大小在 1 到 30~40 之间。

请注意，重新缩放颜色意味着您还应该重新缩放 e_visual_map（如果使用）。

echart <- mtcars |> 
  e_charts(mpg) |> 
  e_scatter(qsec, wt, scale = e_scale) |> 
  e_legend(show = FALSE)

echart |> 
  e_visual_map(wt, scale = e_scale)
  
# or 
# echart |> 
#   e_visual_map(min = 1, max = 20)

如果您想保持原始大小，则可以使用 scale_js，因为您可能希望 e_visual_map 保持原始数据的真实性。

mtcars |> 
  e_charts(mpg) |> 
  e_scatter(qsec, wt, scale = NULL, scale_js = "function(data){ return data[3] * 3;}") |> 
  e_legend(show = FALSE) |> 
  e_visual_map(wt, scale = NULL)

这样，气泡的大小适当，但视觉图的范围保持不变。

5 Jitter

从 0.2.1 版本开始，您可以使用 e_scatter 创建 jitter points。

mtcars |> 
  e_charts(cyl) |> 
  e_scatter(drat, symbol_size = 4) |> 
  e_scatter(
    drat, jitter_factor = 2, symbol_size = 6,
    name = "noisy"
  )

6 coord_system

图表类型不仅适用于标准 2D 笛卡尔坐标系，尽管大多数图表将默认为 cartesian2d 坐标系，但它们也可能适用于其他坐标系。

我们来看看热图。首先是常规热图。

v <- LETTERS[1:10]
matrix <- data.frame(
  x = sample(v, 300, replace = TRUE), 
  y = sample(v, 300, replace = TRUE), 
  z = rnorm(300, 10, 1),
  stringsAsFactors = FALSE
) |> 
  dplyr::group_by(x, y) |> 
  dplyr::summarise(z = sum(z)) |> 
  dplyr::ungroup()

matrix |> 
  e_charts(x) |> 
  e_heatmap(y, z) |> 
  e_visual_map(z)

人们还可以在不同的坐标上绘制热图，例如通过首先使用 e_calendar 添加日历，然后指定 coord_system = "calendar" 来绘制日历。

dates <- seq.Date(as.Date("2018-01-01"), as.Date("2018-12-31"), by = "day")
values <- rnorm(length(dates), 20, 6)

year <- data.frame(date = dates, values = values)

year |> 
  e_charts(date) |> 
  e_calendar(range = "2018") |> 
  e_heatmap(values, coord_system = "calendar") |> 
  e_visual_map(max = 30)

另一个示例，使用极坐标，在二维笛卡尔坐标上绘制一条线，然后更改为极坐标。

df <- data.frame(x = 1:10, y = seq(1, 20, by = 2))

df |> 
  e_charts(x) |> 
  e_line(y)

df |> 
  e_charts(x) |> 
  e_polar() |> 
  e_angle_axis() |> 
  e_radius_axis() |> 
  e_line(y, coord_system = "polar", smooth = TRUE)

echarts4r 中有多种可用的坐标系；举几例来说，有 globe、cartesian3d 和 polar。请注意，当有多个 coord_system 可用时，后者会在各自函数的手册页中记录示例。

7 Customise the Axis

通过指定轴的索引来使用多个轴。请注意，JavaScript 从 0 开始，而不是 1，因此 y_index = 1 是第二个轴，y_index = 0 是第一个轴（默认）

USArrests |> 
  e_charts(Assault) |> 
  e_line(Murder, smooth = TRUE) |> 
  e_line(Rape, y_index = 1) |>  # add secondary axis
  e_y_axis(splitLine = list(show = FALSE)) # hide split lines on first Y axis

8 Flip coordinates

您可以使用 e_flip_coords 翻转坐标，请注意，如果您有多个 y 轴，则它将不起作用。

data.frame(
  x = LETTERS[1:5],
  y = runif(5, 1, 15)
) |> 
  e_charts(x) |> 
  e_bar(y, name = "flipped") |> 
  e_flip_coords() # flip axis

9 Mark Points and Lines

使用 e_mark 系列函数突出显示绘图上的点和线。

USArrests |> 
  tibble::rownames_to_column("State") |> 
  dplyr::mutate(
    Rape = -Rape
  ) |> 
  e_charts(State) |> 
  e_area(Murder) |>
  e_bar(Rape, name = "Sick basterd", x_index = 1) |> # second y axis 
  e_mark_line("Sick basterd", data = list(type = "average")) |> 
  e_mark_point("Murder", data = list(type = "min"))

10 Look for arguments

寻找更多参数，使用 echarts4r，您通常距离您想要的只差一个参数。

library(dplyr)
df <- tibble(
  name = "earth",        # 1st level
  children = list(
    tibble(name = c("land", "ocean"),             # 2nd level
       children = list(
         tibble(name = c("forest", "river")),   # 3rd level 
         tibble(name = c("fish", "kelp"),
            children = list(
               tibble(name = c("shark", "tuna"),  # 4th level 
               NULL  # kelp
            ))
         )
       ))
  )
)

df |> 
  e_charts() |> 
  e_tree()

变为径向：

df |> 
  e_charts() |> 
  e_tree(layout = "radial")

11 Show labels

对于大多数 series，您可以像这样显示标签：

USArrests |> 
  tibble::rownames_to_column("State") |> 
  dplyr::slice(1:10) |> 
  e_charts(State) |> 
  e_area(Murder, label = list(normal = list(show = TRUE)))

还有一个辅助函数 e_labels() 可以提供更简单的 API：

USArrests |> 
  tibble::rownames_to_column("State") |> 
  dplyr::slice(1:10) |> 
  e_charts(State) |> 
  e_area(Murder) |> 
  e_labels()

12 Nested data

您可能会在官方文档中观察到，某些 series 可以获取比 x 和 y 点更多的数据点，例如 e_bar；在官方文档中，转到 "serie"，选择您感兴趣的（即：bar），然后选择 "data"。

e_bar 允许您传递与原始库中的值相对应的 serie （来自初始 data.frame）。然而，后者也采用 label、itemStyle 和 tooltip，但它们是 JSON 数组，它们会转换为 R 中的列表，并且处理嵌套的 data.frames 并不理想。e_add_nested 对此的补救措施。它允许添加这些嵌套数据点。

让我们向 iris 数据集添加一些列，我们将在 e_add_nested 中使用这些列来自定义标签的外观。

# add columns to iris
iris_dat <- iris |> 
  dplyr::mutate(
    show = TRUE, # to show the labels
    fontSize = exp(Sepal.Length) / 10, # font size will correspond to Sepal.Length
    color = sample(c("red", "black", "blue"), dplyr::n(), replace = TRUE) # assign a random color to the label
  )

iris_dat |> 
  dplyr::slice(1:10) |> # simplify the graph. 
  e_charts(Sepal.Width) |> 
  e_line(Sepal.Length) |> 
  e_add_nested("label", show, fontSize, color) |> # add our columns to "label"
  e_x_axis(min = 2.5)

e_funnel 的另一个例子。

funnel <- data.frame(
  stage = c("View", "Click", "Purchase"), 
  value = c(80, 30, 20),
  color = c("blue", "red", "green")
)

funnel |> 
  e_charts() |> 
  e_funnel(value, stage) |> 
  e_add_nested("itemStyle", color)

13 List

从版本 0.2.1 开始，您可以传递原始选项列表。

N <- 20 # data points

opts <- list(
  xAxis = list(
    type = "category",
    data = LETTERS[1:N]
  ),
  yAxis = list(
    type = "value"
  ),
  series = list(
    list(
      type = "line",
      data = round(runif(N, 5, 20))
    )
  )
)

e_charts() |> 
  e_list(opts)

e_list 也可用于附加选项。

<center>--------------- 结束 ---------------</center>

<p style="color: gray; font-size: 10px;">注：本文为个人学习笔记，仅供大家参考学习，不得用于任何商业目的。如有侵权，请联系作者删除。</p>

本文由mdnice多平台发布

echarts4r 教程2：Advanced

写在前面

目录

1 Common options

2 Grouping

3 Stacked

4 Scatter

5 Jitter

6 coord_system

7 Customise the Axis

8 Flip coordinates

9 Mark Points and Lines

10 Look for arguments

11 Show labels

12 Nested data

13 List

<p style="color: gray; font-size: 10px;">注：本文为个人学习笔记，仅供大家参考学习，不得用于任何商业目的。如有侵权，请联系作者删除。</p>

TigerZ知识宝库

引用和评论

文献阅读 | Nature | 小鼠大脑皮层细胞多样化的分子逻辑

【2025年2月最新】Axure RP9无法免费使用Axure Cloud的解决方案

2025年夸克网盘免费扩容大法，最高可扩容20T，亲测有效

大模型时代，后端程序员如何避免被AI卷死？

AI编程神器巅峰对决！Cursor、Windsurf、Trae谁将取代Copilot？实测结果颠覆认知！

国内版的AI编程工具Trea，真的来了！免费使用DeepSeek！

揭秘Chrome DevTools：从原理到自定义调试工具