1.6.1. 数值的堆叠

若是想把两个并列的柱子堆到一起展示，只需在引入两个变量的e_bar()函数中加上一样的stack = "group1"即可，这里的"group1"可以是任意内容。

data |>
  e_charts(month) |>
  e_bar(Evaporation, stack = "group1") |> # 堆第一堆
  e_bar(Precipitation, stack = "group1") |> # 堆第一堆
  e_line(Temperature, stack = "group2") # 堆第二堆

1.6.2. 比例的堆叠

按比例堆叠和按数值堆叠的方式是一样的，只是需要先计算占比。

# 计算占比
data.new <- transform(data,
  Evaporation_rate = round(Evaporation / (Evaporation + Precipitation), 2)
) |>
  transform(
    Precipitation_rate = round(Precipitation / (Evaporation + Precipitation), 2)
  )

data.new |>
  e_charts(month) |> # 横轴
  e_bar(Evaporation_rate, stack = "group1") |> # 堆一堆
  e_bar(Precipitation_rate, stack = "group1") |> # 堆一堆
  # 设定纵轴的轴标签为百分比
  e_y_axis(
    max = 1,
    interval = 0.5,
    formatter = e_axis_formatter("percent", digits = 1)
  ) |>
  # 设定悬浮提示框的内容为百分比
  e_tooltip(formatter = e_tooltip_item_formatter("percent"))

1.6.3. 阶梯瀑布图

将代表正数、负数及总和的三个变量堆叠在一起，并且把总和的柱子设为透明就可以巧妙地画出阶梯瀑布图。

data.waterfall <- data.frame(
  date = paste0("Nov", c(1:11)),
  transparent = c(0, 900, 1245, 1530, 1376, 1376, 1511, 1689, 1856, 1495, 1292), # 总和
  positive = c(900, 345, 393, "-", "-", 135, 178, 286, "-", "-", "-"), # 正数
  negative = c("-", "-", "-", 108, 154, "-", "-", "-", 119, 361, 203)
) # 负数

data.waterfall |>
  e_charts(date) |>
  e_bar(
    transparent,
    stack = "total",
    name = "总和",
    itemStyle = list(borderColor = "transparent", color = "transparent"), # 将柱子和描边的颜色都设为透明
    legend = list(show = FALSE), # 去掉总和的图例
    tooltip = list(show = FALSE)
  ) |>
  e_bar(positive, stack = "total", name = "收入") |>
  e_bar(negative, stack = "total", name = "支出") |>
  e_x_axis(type = "category", axisLabel = list(interval = 0)) |>
  e_tooltip(
    trigger = "axis",
    axisPointer = list(type = "shadow")
  )

1.8.1. 纵轴反向

在e_y_axis()中针对某个纵轴设置inverse = TRUE，这个轴上的所有变量就会反过来显示（垂直旋转180度）。

data |>
  e_charts(month) |> # 横轴
  e_area(Evaporation) |> # 纵轴
  e_area(Precipitation, x_index = 1, y_index = 1) |>
  e_y_axis(index = 0, min = 0, max = 200) |>
  e_y_axis(
    index = 1,
    inverse = TRUE, # 反向
    min = 0,
    max = 200
  )

1.8.2. 横轴反向

在e_x_axis()中针对某个轴设置inverse = TRUE，这个轴上的所有变量就会反过来显示（水平旋转180度）。

data |>
  e_charts(month) |> # 横轴
  e_area(Evaporation) |> # 纵轴
  e_area(Precipitation, x_index = 1, y_index = 1) |>
  e_x_axis(
    index = 1,
    inverse = TRUE
  ) # 反向

1.8.3. 负数反向

对某个变量取负数，也可以得到反向的效果。举个例子。

data.inverse <- transform(data, Evaporation_i = -Evaporation)
data.inverse |>
  e_charts(month) |>
  e_bar(Precipitation, stack = "group1", name = "男") |>
  e_bar(Evaporation_i, stack = "group1", name = "女") |>
  e_y_axis(show = FALSE) |>
  e_flip_coords()

1.10.1. 标题随时间轴变动

echarts4r 包提供e_timeline_serie()函数来设定可以随时间轴变动的参数，比如随时间轴变动的标题。需要注意的是，作为时间轴的变量中的每一项数据对应的主、副标题，都需要在e_timeline_serie(title = list())里面用list(text = '主标题', subtext = '副标题')从头到尾写一遍。

data.ab |>
  group_by(type) |>
  e_charts(month, timeline = TRUE) |>
  e_line(Evaporation) |>
  e_title(left = "center", top = 10) |>
  e_legend(show = FALSE) |>
  e_timeline_serie(title = list(
    list(
      text = "各区域每月降水量",
      textStyle = list(
        fontWeight = "normal",
        fontSize = 20
      ),
      subtext = "A区域",
      subtextStyle = list(
        fontWeight = "bold",
        fontSize = 40
      )
    ),
    list(text = "各区域每月降水量", subtext = "B区域")
  ))

1.10.2. 时间轴与动态排序

绘制一个带有时间轴组件的图形，将时间轴设为自动播放且隐藏，再为柱状图开启实时排序效果，就能巧妙地得到动态排序柱状图。

data.sort <- data.frame(
  year = c(rep(2010, times = 5), rep(2015, times = 5), rep(2020, times = 5)),
  country = rep(c("India", "China", "Japan", "Canada", "American"), 3),
  value = sample(1:50, 15)
)

data.sort |>
  group_by(year) |>
  e_chart(country, timeline = TRUE) |>
  e_bar(value,
    realtimeSort = TRUE, # 开启实时排序效果
    seriesLayoutBy = "column"
  ) |>
  e_flip_coords() |>
  e_legend(show = FALSE) |>
  e_title(left = "center", top = 10) |>
  e_timeline_opts(autoPlay = TRUE, show = FALSE) |> # 自动播放且隐藏
  e_timeline_serie(title = list(
    list(
      text = "2010",
      textStyle = list(
        fontWeight = "bold",
        fontSize = 40
      )
    ),
    list(text = "2015"),
    list(text = "2020")
  ))

2.1.1. 组件的位置

Echarts 里面组件的位置通常用以下四个参数来组合设定，在 echarts4r 包里也是一致的：

• left：组件距离图形容器左侧的距离，可以是0到100间的任意数值，可以是0%到100%间的任意比例，也可以是left、center、right等会自动对齐的参数。

• top：组件距离图形容器上侧的距离，可以是0到100间的任意数值，可以是0%到100%间的任意比例，也可以是top、middle、bottom等会自动对齐的参数。

• right：组件距离图形容器右侧的距离，可以是0到100间的任意数值，可以是0%到100%间的任意比例。

• bottom：组件距离图形容器下侧的距离，可以是0到100间的任意数值，可以是0%到100%间的任意比例。

2.1.2. 格式化文本（formatter）

Echarts 里面图例、数据标签、提示框等组件，以及坐标轴的轴标签都支持设定格式化文本，且支持用字符串模板和回调函数两种形式来设定。

字符串模板中支持用以下模板变量，且可以组合任意字符：

• 支持\n换行。
• {name} 、{value}：分别表示各个变量的名称和数据值
• {a}、 {b}、{c}、{d}、{e}：分别表示系列名，数据名，数据值等。
• {@xxx}：数据中名为 ‘xxx’ 的变量的值，如 {@Evaporation} 表示名为 ‘Evaporation’ 的变量的值，echarts4r 包里会把横轴的月份数也带出来。
• {@[n]}：数据中维度 n 的值，如 {@[3]} 表示维度 3 的值，从 0 开始计数。

data |>
  e_charts(month) |>
  e_bar(Evaporation, name = "蒸发量") |>
  e_labels(formatter = "{@[1]}：标签") |> # 给数据标签设定格式化文本
  # e_labels(formatter = '{@Evaporation}：标签') |>
  e_legend(formatter = "{name} 图例") |> # 给图例设定格式化文本
  e_y_axis(formatter = "{value} Y轴") |> # 给Y轴轴标签设定格式化文本
  e_x_axis(formatter = "{value} X轴") # 给X轴轴标签设定格式化文本

下面举个简单例子介绍回调函数的写法，主要写法是引用htmlwidgets::JS()函数来直接调用JavaScript。

data |>
  e_charts(Evaporation) |>
  e_scatter(Precipitation, symbol_size = 10, symbol = "circle") |>
  e_x_axis(name = "蒸发量") |>
  e_y_axis(name = "降水量") |>
  e_labels(
    formatter = htmlwidgets::JS(
      "function(params){
        return('降水量: ' + params.value[0] +
               '蒸发量: ' + params.value[1])}"
    )
  ) |>
  e_tooltip(
    trigger = "item",
    formatter = htmlwidgets::JS(
      "function(params){
        return('变量:' +
               '<br />降水量: ' + params.value[0] +
               '<br />蒸发量: ' + params.value[1])}"
    )
  )

2.4.1. 多个变量的数据标签

图形中含有多个变量时，数据标签的属性可以在各个图形系列中单独设定。下图的例子中将柱形的数据标签设定为内部靠上，将折线的数据标签设定为线的上方。Echarts 里面一般的数据标签的位置选项很丰富，可选的有'top'、'left' 等，全部可选项见表1。

data |>
  e_charts(month) |>
  e_bar(Evaporation,
    name = "蒸发量",
    label = list(
      show = TRUE,
      position = "insideTop"
    )
  ) |>
  e_line(Precipitation,
    name = "降水量",
    label = list(
      show = TRUE,
      position = "top"
    )
  )

2.4.2. 富文本标签（rich）

Echarts 中但凡涉及文本的地方如标题、图例、数据标签或轴标签都可以自定义富文本。echarts4r 包的官网没有给出富文本相关的例子，笔者复现了一个Echarts 官网的例子，更多定义方式还是得去翻echarts官网对富文本的介绍。

df.outer <- data.frame(
  name = c(
    "Baidu", "Direct", "Email", "Google", "Union Ads", "Bing", "Video Ads", "Others"
  ),
  value = c(1048, 335, 310, 251, 234, 147, 135, 102)
)

df.outer |>
  e_chart(name) |>
  e_pie(value, radius = c("20%", "40%")) |>
  e_labels(
    position = "outside", # 显示数据标签的引导线
    labelLine = list(length = 30),
    formatter = "{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}",
    backgroundColor = "#F6F8FC",
    borderColor = "#8C8D8E",
    borderWidth = 1,
    borderRadius = 4,
    rich = list(
      a = list(
        color = "#6E7079",
        lineHeight = 22,
        align = "center"
      ),
      hr = list(
        borderColor = "#8C8D8E",
        width = "100%",
        borderWidth = 1,
        height = 0
      ),
      b = list(
        color = "#4C5058",
        fontSize = 14,
        fontWeight = "bold",
        lineHeight = 33
      ),
      per = list(
        color = "#fff",
        backgroundColor = "#4C5058",
        padding = c(3, 4),
        borderRadius = 4
      )
    )
  ) |>
  e_legend(type = "scroll", bottom = "bottom")

2.5.1. 两种触发类型

• 数据项触发

鼠标悬停在图形中时仅触发单个变量的提示内容，多应用在饼图、散点图上。

data |>
  e_charts(month) |>
  e_bar(Evaporation, name = "蒸发量") |>
  e_bar(Precipitation, name = "降水量") |>
  e_tooltip(trigger = "item")

• 坐标轴触发

鼠标悬停在图形中时会触发同一根轴上多个变量的提示内容，多应用在柱状图、折线图上。

data |>
  e_charts(month) |>
  e_bar(Evaporation, name = "蒸发量") |>
  e_bar(Precipitation, name = "降水量") |>
  e_tooltip(trigger = "axis")

2.5.2. echarts4r 的提示框

echarts4r 包为提示框组件的格式化文本单独提供了三个参数，设置单个变量时可用e_tooltip_item_formatter()，为饼图设置时可用e_tooltip_pie_formatter()，为散点图设置时可用e_tooltip_pointer_formatter()。

data |>
  e_charts(month) |>
  e_bar(Precipitation) |>
  # decimal 表示数值的类型为小数型，还可选 percent、currency
  # digits 表示小数点后位数
  e_tooltip(formatter = e_tooltip_item_formatter(style = "decimal", digits = 1))

data |>
  e_charts(Evaporation) |>
  e_scatter(Precipitation, symbol_size = 10) |>
  e_tooltip(
    formatter = e_tooltip_pointer_formatter(style = "decimal"),
    axisPointer = list(type = "cross")
  ) # 增加十字准星的坐标轴指示器

2.6.1. 标注点（MarkPoint）

点的标注可以针对单个变量单独标注，也可以对多个变量批量标注。

• 标记形状的类型(symbol)：可选’circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’。
• 标记形状的大小(symbolSize)：默认50。

data |>
  e_charts(month) |>
  e_bar(Evaporation, name = "蒸发量") |>
  e_bar(Precipitation, name = "降水量") |>
  e_mark_point(c("蒸发量", "降水量"), data = list(type = "average")) |> # 批量标注平均值
  e_mark_point("蒸发量", data = list(type = "min")) |> # 标记最小值
  e_mark_point("蒸发量", data = list(type = "max")) |> # 标记最大值
  e_mark_point("蒸发量", data = list(type = "median")) |> # 标记中位数
  e_mark_point("降水量",
    data = list(type = "min", symbol = "triangle")
  ) |> # 修改标记形状的类型
  e_mark_point("降水量",
    data = list(type = "max", symbolSize = 80)
  ) # 修改标记形状的大小

2.6.2. 标注线（MarkLine）

线的标注与点的标注方式相似，但并不仅限于标注最大值、最小值、平均值等统计学专有名词，还可以指定具体数值，以及给标注的线命名。

data |>
  e_charts(month) |>
  e_bar(Evaporation, name = "蒸发量") |>
  e_bar(Precipitation, name = "降水量") |>
  e_mark_line(c("蒸发量", "降水量"), data = list(type = "max"), title = "最大值") |> # 批量标注最大值
  e_mark_line("蒸发量", data = list(yAxis = 30)) |> # 标注Y轴的具体值
  e_mark_line("降水量", data = list(type = "average"), precision = 1) # 标注平均值

2.6.3. 标注区域（MarkArea）

区域的标注与线的标注相似，区域的范围可以填X轴、Y轴的具体数据值，也可以填最大值、最小值等。

data |>
  e_charts(month) |>
  e_bar(Evaporation, name = "蒸发量") |>
  e_bar(Precipitation, name = "降水量") |>
  e_mark_area(
    serie = "蒸发量", # 指定变量单独标注
    data = list(
      list(xAxis = "8月", yAxis = 150),
      list(xAxis = "12月", yAxis = 200)
    ),
    itemStyle = list(color = "lightblue")
  ) |>
  e_mark_area(
    serie = c("蒸发量", "降水量"), # 多个变量批量标注
    data = list(
      list(xAxis = "min", yAxis = "min"),
      list(xAxis = "average", yAxis = "average")
    ),
    itemStyle = list(color = "lightgrey")
  )

2.6.4. 分组时的数据标注方式

在分组展示的情况下，数据标注会对分组后的每组数据起作用，而不再对单个或多个变量起作用。若不具体指定，数据标注会对每组数据都起作用。

data.ab |>
  group_by(type) |> # 指定分组变量
  e_charts(Evaporation, name = "n") |>
  e_scatter(serie = Precipitation, symbol_size = 10) |>
  e_mark_area(
    silent = TRUE,
    itemStyle = list(
      color = "transparent",
      borderWidth = 1, # 线宽
      borderType = "dashed"
    ), # 线的类型
    data = list(
      list(xAxis = "min", yAxis = "min"),
      list(xAxis = "max", yAxis = "max")
    )
  ) |>
  e_mark_point(data = list(type = "average")) |>
  e_mark_line(
    serie = "A区域", # 指定标注A区域
    data = list(xAxis = 160)
  ) |>
  e_mark_line(
    serie = "B区域", # 指定标注B区域
    data = list(yAxis = 170)
  )

2.7.1. 两种缩放类型

滑动条型：可以左右拖动或拉长拖拽条以改变数据展示范围。

data |>
  e_charts(month) |>
  e_line(Evaporation, name = "蒸发量") |>
  e_line(Precipitation, name = "降水量") |>
  e_datazoom(type = "slider")

内置型：可以在图形上通过滑动鼠标滚轮的方式来改变数据展示范围。

data |>
  e_charts(month) |>
  e_line(Evaporation, name = "蒸发量") |>
  e_line(Precipitation, name = "降水量") |>
  e_datazoom(type = "inside")

2.7.2. 指定缩放的坐标轴

数据区域缩放组件默认对横轴起作用，也可以对不同的轴单独指定。

data |>
  e_charts(month) |>
  e_line(Evaporation, name = "蒸发量") |>
  e_line(Precipitation, name = "降水量") |>
  e_datazoom(
    x_index = 0, # 指定主X轴
    start = 80, # 指定缩放组件的起点
    end = 100
  ) |> # 指定缩放组件的终点
  e_datazoom(y_index = 0) # 指定主Y轴

3.2.1. 设定角度轴

将echarts()中的数据放入角度轴时，相当于把直角坐标系中的横轴卷起来。

data |>
  e_charts(month) |>
  e_polar() |>
  e_angle_axis(month) |>
  e_radius_axis() |>
  e_bar(Evaporation, name = "蒸发量", coord_system = "polar") |>
  e_line(Precipitation, name = "降水量", coord_system = "polar")

3.2.2. 设定径向轴

将echarts()中的数据放入径向轴时，相当于把直角坐标系中的纵轴卷起来。

data |>
  e_charts(month) |>
  e_polar() |>
  e_angle_axis() |>
  e_radius_axis(month, axisLabel = list(interval = 0)) |>
  e_bar(Evaporation,
    name = "蒸发量",
    coord_system = "polar",
    stack = "堆一堆"
  ) |>
  e_bar(
    Precipitation,
    name = "降水量",
    coord_system = "polar",
    stack = "堆一堆"
  )

3.5.1. 世界地图

cns <- countrycode::codelist$country.name.en
cns <- data.frame(
  country = cns,
  value = runif(length(cns), 1, 100)
)

cns |>
  e_charts(country) |> # 国家
  e_map(value) |>
  e_visual_map(value)

3.5.2. 中国地图

本节需要先额外安装一个存放在 Github 上的 R 包 echarts4r.maps (Coene 2019)

# install.packages("remotes")
remotes::install_github('JohnCoene/echarts4r.maps')

library(echarts4r.maps)

df <- data.frame(
  region = c("湖北", "浙江", "北京", "广东"),
  value = c(1, 2, 3, 4)
)

df |>
  e_charts(region) |> # 区域
  em_map("China") |>
  e_map(value, map = "China") |>
  e_visual_map(value)

不难发现，echarts4r.maps 内置的中国地图是不完整的，缺少南海诸岛及九段线等内容。因此，需要获取完整正确的地图，高德和百度都是具有甲级测绘资质的单位。下面采用阿里 DataV 数据可视化平台开放出来的地图数据，它来自高德开放平台。地图数据包含行政唯一编码、行政单位名称和行政级别（省、市和县三级），先将数据集保存到本地，数据映射到地图时，需要保证数据集中的行政单位名称和背景地图中的行政单位名称是一一对应的。

# 准备数据集
df <- data.frame(
  region = c("湖北省", "浙江省", "北京市", "广东省"),
  value = c(1, 2, 3, 4)
)
# 从本地加载新的正确的中国地图数据
china_map <- jsonlite::read_json("data/中华人民共和国.json")
# 开始绘图
df |>
  e_charts(region) |>
  # 注册中国地图
  e_map_register("China2", china_map) |>
  # 将数据映射到地图上
  e_map(value, map = "China2") |>
  e_visual_map(value)

3.5.3. 区域地图

用 echarts4r 包绘制省份和城市级别的地图时均需要导入一份可用的地图文件，本小节均是从阿里 DataV 数据可视化平台下载地图 json 文件。

json.province <- jsonlite::read_json('data/湖北省.json')

df.province <- data.frame(
  city = c(
    '武汉市',
    '黄石市',
    '十堰市',
    '宜昌市',
    '襄阳市',
    '鄂州市',
    '荆门市',
    '孝感市',
    '荆州市',
    '黄冈市',
    '咸宁市',
    '随州市',
    '恩施土家族苗族自治州',
    '仙桃市',
    '潜江市',
    '天门市',
    '神农架林区'
  ),
  value = sample(1:10, 17, replace = TRUE)
)

df.province |>
  e_charts(city) |>
  # 注册地图
  e_map_register("湖北省", json.province) |>
  # 调用注册的地图
  e_map(value, map = "湖北省") |>
  e_visual_map(value)

json.city <- jsonlite::read_json("data/武汉市.json")

df.city <- data.frame(
  city = c("江岸区", "江汉区", "汉阳区", "武昌区", "洪山区"),
  value = sample(1:10, 5)
)

df.city |>
  e_charts(city) |>
  e_map_register("武汉市", json.city) |>
  e_map(value, map = "武汉市") |>
  e_visual_map(value)