Chapter 2 一个完整示例

2.1 构造初始数据

我们可以很方便的借助管道符使用echarts4r绘制简单图表。首先构造一个简单的数据集，模拟某个APP在去年的月活用户数

library(echarts4r)
library(tidyverse)
library(DT)

mau_info = data.frame(
  year = c(rep(2019, 12), rep(2020, 12), rep(2021, 12)),
  month = rep(c(1:12), 3),
  mau = c(c(3.0, 3.2, 2.8, 2.5, 2.2, 2.3, 2.6, 3.0, 2.9, 2.7, 2.8, 2.9) * 8e+05 ,
          c(2.9, 3.15, 2.9, 2.4, 2.3, 2.35, 2.55, 3.05, 2.95, 2.66, 2.83, 2.80) * 1.1e+06, 
          c(2.8, 3.1, 2.9, 2.23, 2.4, 2.1, 2.5, 3.1, 2.7, 2.9, 2.95, 3.1) * 1.2e+06) + rnorm(36, mean = 1e+06, sd = 1e+05) |> round(0)
) |> 
  mutate(mt = paste0(year, "-", month))

datatable(mau_info, rownames = F)

2.2 最终的图表

希望得到的最终样式：

接下来我们从零开始一步一步达成这个效果

2.3 绘制基本图表

现在我们在图中把这个数据用折线图的方式画出：
1. 将横轴坐标传给e_chart()函数，这一步是使用e_chart()画图的首要步骤。这个例子中我们的横坐标是mt
2. 将要展示的指标传给e_line()函数。在这个例子里，我们的指标是mau

data_plot = mau_info

data_plot |> 
  e_chart(mt) |> 
  e_line(mau)

2.4 分组

我们希望把三年的数据拉到同一个位置进行比较，因此比较简单的办法是根据year列分组，横坐标是月份，而不是上面的年月

data_plot = mau_info

data_plot |> 
  group_by(year) |> 
  e_chart(month) |> 
  e_line(mau)

2.5 数据标签

2.5.1 基本数据标签

e_line()中有label参数，接收一个list，通过这个list中的各个参数规定数据标签的样式。默认不展示数据标签，通过更改label的list参数中的show为T使数据标签展示出来

data_plot |> 
  group_by(year) |> 
  e_chart(month) |> 
  e_line(mau, label = list(show = T))

2.5.2 美化标签

label参数列表中的formatter参数允许我们通过更改数据标签的来源，默认是 {a}：系列名。 {b}：数据名。 {c}：数据值。 {(xxx?)}：数据中名为 ‘xxx’ 的维度的值，如 {(product?)} 表示名为 ‘product’ 的维度的值。 {@[n]}：数据中维度 n 的值，如 {@[3]} 表示维度 3 的值，从 0 开始计数。

data_plot |> 
  group_by(year) |> 
  e_chart(month) |> 
  e_line(mau, label = list(show = T, formatter = "{a}"))

data_plot |> 
  group_by(year) |> 
  e_chart(month) |> 
  e_line(mau, label = list(show = T, formatter = "{b}"))

我们可以利用formatter = "{b}"实现一些trick的功能，例如数据标签没有办法制定数据的格式，但是我们可以通过事先生成一个符合要求格式的列来实现

data_plot = mau_info |> 
  mutate(mau_label = paste0(round(mau / 1e6, 2) |> as.character(), "M"))

datatable(data_plot, rownames = F)

通过bind参数，将mau_label列与绘制的指标列mau关联起来，这时候制定数据标签的formatter = "{b}"，数据标签就是关联的列的值

data_plot |> 
  group_by(year) |> 
  e_chart(month) |> 
  e_line(mau, bind = mau_label, label = list(show = T, formatter = "{b}"))

2.6 添加图表标题

通过e_title()指定图表主标题和副标题，并且通过left参数设定标题位置偏移度

data_plot |> 
  group_by(year) |> 
  e_chart(month) |> 
  e_line(mau, bind = mau_label, label = list(show = T, formatter = "{b}")) |> 
  e_title("交友APP MAU趋势", "年份：2019～2021", left = 0)

2.7 添加横纵坐标轴名称

使用e_x_axis e_y_axis分别设定横纵坐标轴的名称和格式。由于如果纵轴为百分比的形式，可以通过formatter = e_axis_formatter("percent", digits = 2)来把纵坐标设制成百分比

data_plot |> 
  group_by(year) |> 
  e_chart(month) |> 
  e_line(mau, bind = mau_label, label = list(show = T, formatter = "{b}")) |> 
  e_title("交友APP MAU趋势", "年份：2019～2021", left = 0) |> 
  e_x_axis(name = "月份",  nameLocation = "end") |>
  e_y_axis(name = "视频拉新回占比",  nameLocation = "middle", nameTextStyle = c(align = "left", lineHeight = 100))

## Input to asJSON(keep_vec_names=TRUE) is a named vector. In a future version of jsonlite, this option will not be supported, and named vectors will be translated into arrays instead of objects. If you want JSON object output, please use a named list instead. See ?toJSON.

2.8 添加特殊点标记

data_plot |> 
  group_by(year) |> 
  e_chart(month) |> 
  e_line(mau, bind = mau_label, label = list(show = T, formatter = "{b}")) |> 
  e_title("交友APP MAU趋势", "年份：2019～2021", left = 0) |> 
  e_x_axis(name = "月份",  nameLocation = "end") |>
  e_y_axis(name = "视频拉新回占比",  nameLocation = "middle", nameTextStyle = c(align = "left", lineHeight = 100)) |> 
  e_mark_line(data = list(xAxis = 2, lineStyle = list(width = 2)), title = "02/01 \n春节") |> 
  e_mark_area(
    name = "暑假",
    data = list(
      list(xAxis = 7),
      list(xAxis = 9, name = "暑假")
    ),
    label = list(show = T, name = "暑假", position = "insideTopRight"),
    itemStyle = list(color = "#FFFAF0")
  )

## Input to asJSON(keep_vec_names=TRUE) is a named vector. In a future version of jsonlite, this option will not be supported, and named vectors will be translated into arrays instead of objects. If you want JSON object output, please use a named list instead. See ?toJSON.

2.9 添加提示框

data_plot |> 
  group_by(year) |> 
  e_chart(month) |> 
  e_line(mau, bind = mau_label, label = list(show = T, formatter = "{b}")) |> 
  e_title("交友APP MAU趋势", "年份：2019～2021", left = 0) |> 
  e_x_axis(name = "月份",  nameLocation = "end") |>
  e_y_axis(name = "视频拉新回占比",  nameLocation = "middle", nameTextStyle = c(align = "left", lineHeight = 100)) |> 
  e_mark_line(data = list(xAxis = 2, lineStyle = list(width = 2)), title = "02/01 \n春节") |> 
  e_mark_area(
    name = "暑假",
    data = list(
      list(xAxis = 7),
      list(xAxis = 9, name = "暑假")
    ),
    label = list(show = T, name = "暑假", position = "insideTopRight"),
    itemStyle = list(color = "#FFFAF0")
  ) |> 
  e_tooltip("axis")

## Input to asJSON(keep_vec_names=TRUE) is a named vector. In a future version of jsonlite, this option will not be supported, and named vectors will be translated into arrays instead of objects. If you want JSON object output, please use a named list instead. See ?toJSON.

2.10 添加缩放拖拽条

data_plot |> 
  group_by(year) |> 
  e_chart(month) |> 
  e_line(mau, bind = mau_label, label = list(show = T, formatter = "{b}")) |> 
  e_title("交友APP MAU趋势", "年份：2019～2021", left = 0) |> 
  e_x_axis(name = "月份",  nameLocation = "end") |>
  e_y_axis(name = "视频拉新回占比",  nameLocation = "middle", nameTextStyle = c(align = "left", lineHeight = 100)) |> 
  e_mark_line(data = list(xAxis = 2, lineStyle = list(width = 2)), title = "02/01 \n春节") |> 
  e_mark_area(
    name = "暑假",
    data = list(
      list(xAxis = 7),
      list(xAxis = 9, name = "暑假")
    ),
    label = list(show = T, name = "暑假", position = "insideTopRight"),
    itemStyle = list(color = "#FFFAF0")
  ) |> 
  e_tooltip("axis") |> 
  e_datazoom()

## Input to asJSON(keep_vec_names=TRUE) is a named vector. In a future version of jsonlite, this option will not be supported, and named vectors will be translated into arrays instead of objects. If you want JSON object output, please use a named list instead. See ?toJSON.

bookdown::render_book()

bookdown::serve_book()
bookdown::publish_book(render = "local")