2021年11月20日

1.echarts4r是什么

Echarts for R

  • Echarts:开源、画图、JavaScript、Web页面

  • R:开源

echarts4r的特点

  • 语法简单、上手快

参考资料

2.echarts4r可以用来做什么

  • 交互可视化图形

目录

基本语法

自适应;横轴;纵轴–多个指标、双Y轴、堆叠、转置、反向、分组、时间轴

基本组件

标题、图例、数据标签(格式化文本、富文本)、提示框(格式化文本)、标注点、标注线、标注区域、数据区域缩放、工具栏、视觉映射、自定义图形、排列组合、连接、嵌套

坐标系

直角坐标系、极坐标系、单轴、日历、地理坐标系、平行坐标系

主题

选择主题;背景颜色;

线:坐标轴轴线、坐标轴刻度线、坐标轴分割线、数据标签的视觉引导线;

文字:坐标轴标题、坐标轴标签、图表标题、图例、数据标签、提示框

实践出真知

3.0.基本语法

  • 本次分享所使用R版本为4.1.1
  • echarts4r包的版本为0.4.2
  • 对应Echarts版本为v5
  • R4.1.0之前的版本应将所有的|>换成%>%
library(echarts4r)

data |>
  e_charts(month) |> #横轴
  e_bar(Evaporation) #纵轴
  
e_charts(data, month) |> #横轴
  e_bar(Evaporation) #纵轴  
##   month Evaporation
## 1   1月         2.0
## 2   2月         4.9
## 3   3月         7.0
## 4   4月        23.2
## 5   5月        25.6
## 6   6月        76.7

3.1.自适应

  • ehcarts4r画的图形是根据页面大小自适应的。
library(echarts4r)

data |>
  e_charts(month) |> #横轴
  e_bar(Evaporation) #纵轴
  
e_charts(data, month) |> #横轴
  e_bar(Evaporation) #纵轴  

3.2.横轴(e_x_axis)

  • 横轴的坐标轴标题
  • 默认间隔为1,可改为间隔0,可旋转角度
  • 可增加单位
data |>
  e_charts(month) |> #横轴
  e_bar(Evaporation) |> #纵轴
  e_x_axis(
    axisLabel = list(interval = 0, rotate = 30),
    name = "X轴", #X轴的名字
    formatter = '{value} 单位') #X轴标签的格式

3.3.纵轴(e_y_axis)

data |>
  e_charts(month) |>  #横轴
  e_bar(Evaporation) |>  #纵轴
  e_y_axis(
    min = 0,  #最小值
    max = 200,  #最大值
    interval = 50,  #间隔值
    name = "Y轴",  #轴名称
    formatter = '{value} 单位'  #轴标签
  )

3.3.纵轴

多个指标

data |>
  e_charts(month) |>  
  e_bar(Evaporation) |>  
  e_bar(Precipitation) |>
  e_line(Temperature) |>
  e_y_axis(
    min = 0,
    max = 200,
    interval = 50,
    name = "Y轴",
    formatter = '{value} 单位')

3.3.纵轴

双Y轴(y_index)

  • 一般默认左轴为主轴
  • y_index=0为主轴,y_index=1为副轴
data |>
  e_charts(month) |>  
  e_bar(Evaporation) |>  
  e_bar(Precipitation) |>
  e_line(Temperature, y_index = 1) |>
  e_y_axis(
    min = 0,
    max = 200,
    interval = 50,
    name = "主Y轴",
    formatter = '{value}ml') |>
  e_y_axis(
    index = 1,
    min = 0,
    max = 28,
    interval = 7,
    name = "副Y轴",
    formatter = '{value}°C')

3.3.纵轴

堆叠(stack)-数值

  • stack = “group1”
data |>
  e_charts(month) |> 
  e_bar(Evaporation, stack = "group1") |>  
  e_bar(Precipitation, stack = "group1") |>
  e_y_axis(
    min = 0,
    max = 400,
    interval = 50,
    name = "Y轴",
    formatter = '{value} 单位')

3.3.纵轴

堆叠(stack)-比例

  • 百分数(%)、小数点后几位数字
data.new <- data |> dplyr::mutate(
  Evaporation_rate = 
    round(Evaporation / (Evaporation + Precipitation), 2),
  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"))

3.3.纵轴

转置(e_flip_coords)

  • 转置:交换横轴和纵轴

  • 一般先按数值排序,也可按数据本身含义排序如人口金字塔

data.flip <- data[order(data$Evaporation), ]

data.flip |>
  e_charts(month) |>  
  e_bar(Evaporation) |>  
  e_bar(Precipitation) |> 
  e_flip_coords()  #转置

3.3.纵轴

反向(inverse)

data |>
  e_charts(month) |>  
  e_bar(Evaporation) |>  
  e_bar(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)

3.3.纵轴

反向

  • 正数变负数
data.inverse <- data |>
  dplyr::mutate(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()

3.3.纵轴

分组(group_by)

##     type month Evaporation Precipitation Temperature
## 1  A区域   1月         2.0           2.6         2.0
## 2  A区域   2月         4.9           5.9         2.2
## 13 B区域   1月         2.6           2.0         2.0
## 14 B区域   2月         5.9           4.9         2.2
data.ab |>
  group_by(type) |>
  e_charts(month) |>
  e_line(Evaporation) |>
  e_toolbox_feature(feature = "dataView") |>
  e_toolbox_feature(feature="dataZoom")

3.3.纵轴

时间轴(timeline)

  • axis_type:time, value, category.
  • 通常默认在图形下方显示
data.ab |>
  group_by(type) |>
  e_charts(month, height=400, timeline = TRUE) |>
  e_bar(Evaporation, name = "蒸发量") |>
  e_bar(Precipitation, name = "降水量") |>
  e_timeline_opts(axis_type = "category",
                  top = 5) |>
  e_legend(bottom = 'bottom', orient = 'horizontal') |>
  e_toolbox_feature(feature = "dataView")
##     type month Evaporation Precipitation Temperature
## 1  A区域   1月         2.0           2.6         2.0
## 2  A区域   2月         4.9           5.9         2.2
## 13 B区域   1月         2.6           2.0         2.0
## 14 B区域   2月         5.9           4.9         2.2

3.3.纵轴 - 随时间轴变动的标题

life.2 |>
  group_by(Year) |>
  e_charts(Income, timeline = TRUE) |>
  e_scatter(
    serie=Life_Expectancy,size = Population,bind = Country,
    itemStyle = list(opacity = 0.8),)|>
  e_timeline_opts(
    autoPlay = TRUE,orient = 'vertical',inverse = TRUE,
    right=0,top=20,bottom=20,width=55,symbol = 'none',
    checkpointStyle = list(borderWidth = 2),
    controlStyle = list(showNextBtn = FALSE,
                        showPrevBtn = FALSE)) |>
  e_timeline_serie(
    title = list(
      list(
        text = '各国人均寿命与GDP关系演变',
        textStyle = list(fontWeight = 'normal',
                           fontSize = 20),
        subtext = '1800',
        subtextStyle = list(fontWeight = 'bold',
                            fontSize = 40)), 
      list(text='各国人均寿命与GDP关系演变',subtext = '1840'),
#省略部分     
      list(text='各国人均寿命与GDP关系演变',subtext = '2015'))) 

组件

4.1.标题(Title)&图例(Legend)

  • 类型(type)):‘plain’/‘scroll’(可滚动翻页的图例)
  • 位置: 左(left)、右(right)、上(top)、下(bottom)
  • 布局:vertical(横向)、horizontal(纵向)
data |>
  e_charts(month) |>
  e_bar(Evaporation, name = "蒸发量") |>
  e_bar(Precipitation, name = "降水量") |>
  e_title("图表的主标题", "图表的副标题\n换行", left='center') |>
  e_legend(right = 'right', orient = 'vertical') #右边,竖着
  
#上方正中间,竖着
#e_legend(top = 'top', orient = 'vertical')

#下方中间,横着
#e_legend(bottom = 'bottom', orient = 'horizontal')

#不显示图例
e_legend(show = FALSE) 

4.2.数据标签(Label)

  • fontSize/verticalAlign:字母S/A区分大小写
data |>
  e_charts(month) |>
  e_bar(Evaporation, name = "蒸发量") |>
  e_bar(Precipitation, name = "降水量") |>
  e_labels(
    fontSize = 9,#标签字体大小
    fontWeight = "bold",#字体粗细normal/bold/bolder/lighter
    fontStyle = "normal", #字体风格normal/italic/oblique
    fontFamily = "serif", #字体
    position = "top", #标签位置
    rotate = 30, #旋转角度
    align = "middle", #水平对齐:left/middle/right
    verticalAlign = "bottom", #垂直对齐:top/middle/bottom
    color = "orange") #标签颜色

#字体:'sans-serif','monospace','Arial','Microsoft YaHei' ...        
#'top'/'left'/'right'/'bottom'
#'inside'/'insideLeft'/'insideRight'
#'insideTop'/'insideBottom'
#'insideTopLeft'/'insideBottomLeft'
#'insideTopRight'/'insideBottomRight'

4.2.数据标签(Label) - 格式化文本(formatter)

  • 支持\n换行
  • {a}:系列名。
  • {b}:数据名。
  • {c}:数据值。
  • {@xxx}:数据中名为 ‘xxx’ 的维度的值,如 {@product} 表示名为 ‘product’ 的维度的值。
  • {@[n]}:数据中维度 n 的值,如 {@[3]} 表示维度 3 的值,从 0 开始计数。
data |>
  e_charts(month) |>
  e_bar(Evaporation, name = "蒸发量") |>
  e_labels(formatter='{@[1]}:a')
##    type month Evaporation Precipitation Temperature
## 1 A区域   1月         2.0           2.6         2.0
## 2 A区域   2月         4.9           5.9         2.2
## 3 A区域   3月         7.0           9.0         3.3
## 4 A区域   4月        23.2          26.4         4.5
## 5 A区域   5月        25.6          28.7         6.3
## 6 A区域   6月        76.7          70.7        10.2

4.2.数据标签(Label) - 富文本(rich)

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_toolbox_feature(feature = "dataView")|>
      e_legend(type = 'scroll', bottom = 'bottom')

4.3.提示框(Tooltip)

  • e_tooltip(trigger = "item") #数据项触发
  • e_tooltip(trigger = "axis") #坐标轴触发

4.3.提示框(Tooltip)

格式化文本(formatter)

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

4.4.标注点(MarkPoint)

  • 标记形状类型(symbol)
  • 标记形状大小(symbolSize):默认50,S区分大小写
data |>
  e_charts(month) |>
  e_bar(Evaporation, name = "蒸发量") |>
  e_bar(Precipitation, name = "降水量") |>
  e_mark_point("蒸发量", data = list(type = "min")) |>
  e_mark_point("蒸发量", data = list(type = "max")) |>
  e_mark_point("降水量", 
               data = list(type = "min",
               symbol = "triangle")) |>
  e_mark_point("降水量", 
               data = list(type = "max",
               symbolSize = 80)) 
# 'circle', 'rect', 'roundRect', 'triangle', 
# 'diamond', 'pin', 'arrow', 'none'

4.5.标注线(MarkLine)

  • type:minmaxaverage
  • precision:小数点后位数
data |>
  e_charts(month) |>
  e_bar(Evaporation, name = "蒸发量") |>
  e_bar(Precipitation, name = "降水量") |>
  e_mark_line("蒸发量", data = list(type = "average")) |>
  e_mark_line("降水量", 
    data = list(type = "average"), precision = 1) |>
  e_mark_line("蒸发量", data = list(type = "max")) |>
  e_tooltip(trigger = "axis")

4.6.标注区域(MarkArea)

  • 区域范围可以填X轴、Y轴的具体数据值,也可以填min、max、average
data |>
  e_charts(month) |>
  e_bar(Evaporation, name = "蒸发量") |>
  e_bar(Precipitation, name = "降水量") |>
  e_mark_area(
    serie = "蒸发量",
    data = list(list(xAxis = "6月", yAxis = 100),
                list(xAxis = "9月", yAxis = 180)),
    itemStyle = list(color = "lightblue")) |>
  e_mark_area(
    serie = "降水量",
    data = list(
      list(xAxis = "min", yAxis = "min"),
      list(xAxis = "max", yAxis = "average")),
    itemStyle = list(color = "lightgreen"))  |>
  e_tooltip(trigger = "axis")

4.6.group_by情况下的标注点-线-区域

##    height weight   type
## 1:  161.2   51.6 Female
## 2:  174.0   65.6   Male
hw|>
  group_by(type)|>
  e_charts(height )|>
  e_scatter(serie = weight,symbol_size = 10)|>
  e_mark_area(
    silent = TRUE,
    itemStyle = list(
      color = 'transparent',
      borderWidth = 1, borderType = 'dashed'),
    #serie = "Female",
    data = list(
      list(xAxis = "min", yAxis = "min"),
      list(xAxis = "max", yAxis = "max"))) |> 
  e_mark_point(data = list(type = 'min')) |>
  e_mark_point(data = list(type = 'max')) |>
  e_mark_line(data = list(type = 'average'),
              lineStyle = list(type = 'solid')) |>
  e_mark_line(serie = 'Female',
              data = list(xAxis = 160)) |>
  e_mark_line(serie = 'Male',
              data = list(xAxis = 170))

4.7.数据区域缩放(DataZoom)

  • 设置缩放组件时需要指定具体哪条坐标轴
data |>
  e_charts(month) |>
  e_line(Evaporation, name = "蒸发量") |>
  e_line(Precipitation, name = "降水量")|>
  e_datazoom(x_index = 0,
             start = 80,
             end = 100) |> 
  e_datazoom(y_index = 0)

4.7.数据区域缩放(DataZoom)

  • e_datazoom(y_index = 0, type = 'slider')
  • e_datazoom(y_index = 0, type = 'inside')

4.8.刷选(Brush)&工具栏(Toolbox)

saveAsImagebrushrestoredataViewdataZoommagicType

  • e_brush()
  • e_toolbox_feature(feature = "dataView")

4.9.视觉映射(VisualMap)

  • dimension: 0 = x, y = 1, z = 2, size = 3,color=4
iris |>
  e_charts(Sepal.Length) |>
  e_scatter(Petal.Length, Sepal.Width) |>
  e_visual_map(Sepal.Width,
               scale = e_scale,
               dimension=3) |>
  e_tooltip(trigger = "axis")

4.10.自定义图形(Graphic)

  • 增加自定义的文字
  • 增加水印、图片,但不能一起加
data |>
  e_charts(month) |>
  e_bar(Evaporation, name = "蒸发量") |>
  e_bar(Precipitation, name = "降水量") |>
  e_text_g(
    left = "center",
    top = 40,
    z = -1000,
    style = list(text = "自定义的文字\n自定义的文字\n自定义的文字",
                 fontSize = 12))
 # e_draft(text="水印")

 # e_image_g(
 #    right = 20,
 #    top = 20,
 #    z = -999,
 #    style = list(
 #      image = "https://www.r-project.org/logo/Rlogo.png",
 #      width = 150,
 #      height = 150,
 #      opacity = .6 ))

4.11.排列组合(Arrange)

e1 <- data |>
  e_charts(month,height = 250) |>
  e_bar(Evaporation, name = "蒸发量")

e2 <- data |>
  e_charts(month,height = 250) |>
  e_line(Precipitation, name = "降水量")

liquid <- data.frame(val = c(0.6, 0.5, 0.4))
e3 <- liquid |>
  e_charts(height = 250) |>
  e_liquid(val)

funnel <-
  data.frame(stage = c("View", "Click", "Purchase"),
             value = c(80, 30, 20))
e4 <- funnel |>
  e_charts(height = 250) |>
  e_funnel(value, stage) |>
  e_legend(show = FALSE)

e_arrange(e1, e2, e3, e4, cols = 2, rows = 2)

4.12.连接(Connect)

  • 使用e_connect函数时需要在要连接的图中设定参数elementId
e1 <- data |>
  e_charts(month,
           height = 200 , elementId = "图1") |>
  e_bar(Evaporation, name = "蒸发量")

e2 <- data |>
  e_charts(month,
           height = 200 , elementId = "图2") |>
  e_bar(Precipitation, name = "降水量")

e3 <- data |> 
  e_charts(month,
           height = 200) |>
  e_line(Temperature, name = "平均温度") |>
  e_connect(c("图1", "图2"))

e_arrange(e1, e2, e3)

4.13.嵌套(add)

  • 漏斗图可以采用嵌套的方式来增加图形属性
funnel <- data.frame(
  stage = c("View", "Click", "Purchase"),
  value = c(80, 30, 20),
  color = c("blue", "red", "green"))

funnel |>
  dplyr::mutate(show = TRUE, fontSize = c(15, 10, 5)) |>
  e_charts() |>
  e_funnel(value, stage) |>
  e_add("label", show, fontSize) |>
  e_add("itemStyle", color) |>
  e_labels(position = "outside",
           formatter = "{b} : {c}") |>
  e_tooltip()
  
#e_add_nested/e_add_unnested  

坐标系

5.1.直角坐标系(Grid)&轴(Axis)

data |>
  e_charts(month) |>
  e_line(Evaporation, name = "蒸发量") |>
  e_line(Precipitation,
         name = "降水量",
         x_index = 1,
         y_index = 1) |> 
  e_grid(height = "35%") |>
  e_grid(height = "35%", top = "60%") |>
  e_y_axis(
    gridIndex = 1,
    name = "主Y轴", #坐标轴名称
    nameLocation = "center", #坐标轴名称的位置
    nameGap = 30) |>
  e_x_axis(gridIndex = 1,
           name = "主X轴",
           nameLocation = "end") |>
  e_y_axis(
    index = 1,
    name = '次Y轴',
    nameLocation = "center",
    nameGap = 15) |> #坐标轴名称与轴线之间的距离
  e_x_axis(index = 1,
           name = "次X轴",
           nameLocation = "end")

5.1.直角坐标系(Grid)&轴(Axis)

data |>
  e_charts(month) |>
  e_line(Evaporation, name = "蒸发量") |>
  e_line(Precipitation,
         name = "降水量",
         x_index = 1 ,
         y_index = 1)  |>
  e_grid(width = "30%")  |>
  e_grid(width = "30%", left = "50%")  |>
  e_y_axis(gridIndex = 1)  |>
  e_x_axis(gridIndex = 1)

5.2.极坐标系(Polar)

把横轴折起来

  • 极坐标系中e_angle_axis为角度轴,即被折起来的轴,e_radius_axis为径向(半径)轴
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")

5.2.极坐标系(Polar)

把纵轴折起来

  • 极坐标系中e_angle_axis为角度轴,即被折起来的轴,e_radius_axis为径向(半径)轴
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 = "堆一堆") 

5.2.极坐标系(Polar)

雷达图(radar)

data |>
  e_charts(month) |>
  e_radar(Evaporation,
          max = 200, #最大值
          name = "蒸发量") |>
  e_radar(Precipitation,
          max = 200, #最大值
          name = "降水量") |>
  e_radar_opts(splitNumber = 4,
               #指示器轴的分割段数
               shape = "polygon",
               #类型,还可以是circle
               radius = "60%") |> #半径
  e_tooltip(trigger = "item")

5.3.单轴(SingleAxis)

data |>
  e_charts(month, height=100) |>
  e_single_axis(bottom = 20) |>
  e_scatter(Evaporation,
            name = "蒸发量",
            Temperature,
            coord_system = "singleAxis")

  #e_scatter(value,size,coord_system = "singleAxis")

5.3.单轴(SingleAxis)

e1 <- data.2 |>
  #`height = 100`用来设置图形高度
  e_charts(hours, height = 100) |> #横轴
  #`bottom = 20`用来设置single组件距离容器下侧的距离
  #`left=150`用来设置single组件距离容器左侧的距离
  #`axisLabel=list(interval=2)`用来限定single组件单轴的显示间隔
  e_single_axis(bottom = 20, left=100, 
    axisLabel=list(interval=2)) |>
  e_scatter(Saturday_value, #纵轴
            Saturday_size, #气泡大小
            #写入JavaScript语言的缩放函数
            scale_js = 'function (dataItem)
                       {return dataItem[2] * 4;}',
            color = "#5470c6", #气泡颜色
            coord_system = "singleAxis") |>
  e_legend(show = FALSE) |>
  e_title("Saturday", left = "left", top='middle')

e_arrange(e1, e2, e3, e4, e5, cols = 1)  

5.4.日历(Calendar)

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

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

#左图
year |>
  e_charts(date) |>
  e_calendar(range = "2021-09", 
             orient = 'vertical') |>
  e_heatmap(values, coord_system = "calendar") |>
  e_visual_map(max = 30)

#右图
year |>
  e_charts(date) |>
  e_calendar(range = c("2021-09", "2021-11"), 
             orient = 'horizontal') |>
  e_heatmap(values, coord_system = "calendar") |>
  e_visual_map(max = 30)   

5.5.地理坐标系(Geo)

# 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) |>
  e_theme("infographic")

5.5.地理坐标系(Geo)

# data("cities")
# cc <- cities |> filter(country == "CN")
lines |>
  e_charts() |>
  e_geo(map = "China") |>
  e_lines(
    source_lon, source_lat, target_lon, target_lat,
    source_name, target_name, cnt,
    coord_system = "geo", #地理坐标系
    name = "线的名字",
    lineStyle = list(normal = list(
      curveness = 0.3, #线的弯曲度
      color = "red",
      width = 2))) |>
  e_tooltip(
    trigger = "item",
    formatter = htmlwidgets::JS(
      "function(params){
        return(
          params.seriesName +'<br />' +
          params.data.source_name + ' -> ' +
          params.data.target_name + ':'+ params.value)}"))|>
  e_toolbox_feature(feature = c("dataView", "saveAsImage"))

5.6.平行坐标系(parallel)

  • group_by(type)没起作用
parallel |>
  group_by(type) |>
  e_charts() |>
  e_parallel(date,
             AQIindex,
             PM25,
             PM10,
             CO,
             NO2,
             SO2 ,
             level,
             opts = list(smooth = FALSE)) |>
  e_legend(show = TRUE)|>
  e_toolbox_feature(feature = "dataView")

主题

大坑,慎入

6.1.选择主题(theme)

  • e_theme(“inspired”)
  • e_theme(“dark-fresh-cut”)

6.2.背景颜色

  • e_color(background = “black”) #指定背景颜色,标签与网格线会自动改变
  • e_color(“orange”, “lightgrey”) #第一个引号里指定的是图形的颜色,第二个引号里指定的是背景的颜色

6.3.线 - 坐标轴轴线

  • symbol = c("none", "arrow")表示只在轴线末端显示箭头,默认symbol=“none”即不显示箭头,symbol=“arrow”即两端都显示箭头
  • symbolSize = c(20, 15)箭头的大小,第一个数字表示宽度(垂直坐标轴方向),第二个数字表示高度(平行坐标轴方向)
data |> e_charts(month) |>
  e_bar(Evaporation, name = "蒸发量") |>
  e_y_axis(name = "Y轴",
           axisLine = list(
             show = TRUE, # 显示坐标轴轴线
             symbol = c("none", "arrow") ,
             symbolSize = c(20, 15),
             lineStyle = list(
               color = "red", #轴线的颜色
               width = 2, #轴线的线宽
          type = "dashed", #solid实线,dashed虚线,dotted点线
               opacity = 0.5))) #轴线的透明度

6.3.线 - 坐标轴刻度线

  • alignWithLabel = TRUE 使刻度线和标签对齐,在boundaryGap=true 的时候有效
data |>
  e_charts(month) |>
  e_bar(Evaporation, name = "蒸发量") |>
  e_y_axis(
    name = "Y轴",
    axisLine = list(show = TRUE),
    axisTick = list(
      show = TRUE, #显示坐标轴刻度
      inside = TRUE, #刻度朝内,默认朝外
      length = 10,  #刻度的长度
      lineStyle = list(
        color = "red", #刻度线的颜色
        width = 5, #刻度线的线宽
        type = "solid", #刻度线的类型
        opacity = 0.5 #刻度线的透明度
      ))) |>
  e_x_axis(boundaryGap = TRUE,
           axisTick = list(alignWithLabel = TRUE))

6.3.线 - 坐标轴分割线

data |>
  e_charts(month) |>
  e_bar(Evaporation, name = "蒸发量") |>
  e_bar(Precipitation, name = "降水量") |>
  e_y_axis(
    name = "Y轴",
    axisLine = list(show = TRUE),
    splitLine = list(
      show = TRUE, #显示坐标轴分割线
      lineStyle = list(
        color = "red",  #分割线的颜色
        width = 2, #分割线的线宽
        type = "dashed", #分割线的类型
        opacity = 0.5 #分割线的透明度
      ))) |>
  e_x_axis(
      splitLine = list(
      show = TRUE, #显示坐标轴分割线
      interval = 1, #坐标轴分隔线的显示间隔
      lineStyle = list(
        color = "red",  #分割线的颜色
        width = 2, #分割线的线宽
        type = "dashed", #分割线的类型
        opacity = 0.5))) #分割线的透明度
      

6.3.线 - 数据标签的引导线(LabelLine)

  • maxSurfaceAngle设置为小于 90 度的值保证引导线不会和扇区交叉。
  • 也可以在labelLine()通过设置lineStyle=list()改变引导线的颜色、线宽、类型、透明度等等属性。
data |>
  e_charts(month) |>
  e_pie(Evaporation,
        name = "蒸发量",
        radius = "40%") |>
  e_labels(
    position = "outside", #显示视觉引导线
    fontSize = 9,
    alignTo = "edge",
    formatter = "名称:{b} \n 值:{c} 单位",
    minMargin = 5,
    edgeDistance = 10, #文字边距
    lineHeight = 15, #行高
    distanceToLabelLine = 5, #文字与引导线之间的距离
    labelLine = list(
      length = 20, #引导线第一段的长度
      length2 = 0, #引导线第二段的长度
      maxSurfaceAngle = 80)) |>
  e_legend(type = "scroll")

6.4.文字

坐标轴标题;坐标轴标签;图表标题;图例;数据标签;提示框

data |>
  e_charts(month, height = 400) |>
  e_bar(Evaporation, name = "蒸发量") |>
  e_line(Precipitation, name = "降水量", color="red") |>
  e_x_axis(
    name = "X轴的名称", nameLocation="center",
    nameTextStyle = list(color = "red"), #修改坐标轴标题的文字属性
    axisLabel = list(color = "orange")) |> #修改坐标轴标签的文字属性
  e_y_axis(
    name = "Y轴的名称",
    nameTextStyle = list(color = "red"), #修改坐标轴标题的文字属性
    axisLabel = list(color = "orange")) |> #修改坐标轴标签的文字属性
  e_title(text = "主标题", 
          textStyle = list(color = "lightblue")) |> #修改图表标题的文字属性
  e_legend(
    textStyle = list(color = "lightgreen"), #修改图例的文字属性
    itemStyle = list(color = "grey"), #修改图例的图形属性
    lineStyle = list(color = "red"))|>  #修改图例的图形中线的属性
  e_labels(show = TRUE, position = "top",
           color = "green") |>  #修改数据标签的文字属性
  e_tooltip(show = TRUE, trigger = "axis",
    textStyle = list(color = "pink")) #修改提示框中的文字属性

6.4.文字

以坐标轴标题为例

data |>
  e_charts(month, height = 400) |>
  e_bar(Evaporation, name = "蒸发量") |>
  e_x_axis(
    name = "X轴\n的名称", #支持`\n`换行
    nameLocation = "center",
    nameGap = 45,
    nameTextStyle = list(
      color = "red", #颜色
      fontStyle = "normal", #字体风格,还有italic/oblique
      fontWeight = "bolder", #字体粗细,还有normal/bold/lighter
      fontFamily = "Microsoft YaHei", #字体系列
      fontSize = 12, #字体大小
      align = "center", #字体水平对齐方式,还有left/right
      verticalAlign = "middle", #字体垂直对齐方式,还有top/bottom
      lineHeight = 20, #字体行高,默认56
      backgroundColor = "grey", #字块背景颜色
      borderColor = "blue", #文字块边框颜色
      borderWidth = 2, #文字块边框宽度
      borderType = "dashed" #文字块边框描边类型
    ))

6.4.文字

以坐标轴标题为例

data |>
  e_charts(month, height = 400) |>
  e_bar(Evaporation, name = "蒸发量") |>
  e_x_axis(
    name = "X轴的名称", nameLocation = "center", nameGap = 45,
    nameTextStyle = list(
      backgroundColor = "lightgrey", #字块背景颜色
      borderRadius = 20, #文字块的圆角
      padding = c(1, 2, 3, 6), #文字块的内边距,(上,右,下,左)
      shadowColor = "red", #文字块背景阴影颜色
      shadowBlur = 2, #文字块背景阴影长度
      shadowOffsetX = 1, #文字块背景阴影X偏移
      shadowOffsetY = 1, #文字块背景阴影Y偏移
      width = 20, #文字本身的显示宽度
      height = 10, #文字本身的显示高度
      textBorderColor = "blue", #文字本身的描边颜色
      textBorderWidth = 0.2, #文字本身的描边宽度
      textBorderType = "solid", #文字本身的描边类型
      textBorderDahOffset = 0)) #文字本身虚线描边时的偏移量
#textShadowColor文字本身的阴影颜色/textShadowBlur文字本身的阴影长度
#testShadowOffsetX文字本身的阴影X偏移/testShadowOffsetY文字本身的阴影Y偏移
#文字超出宽度是否截断或换行:overflow
https://echarts.apache.org/zh/option.html#xAxis.nameTextStyle.overflow

示例

例子

e_charts(data, month) |>
  e_bar(Evaporation, name = "蒸发量") |>
  e_bar(Precipitation, name = "降水量") |>
  e_line(Temperature, name = "平均温度", y_index = 1) |>
  e_x_axis(axisLabel = list(interval = 0))|>
  e_y_axis(
    min = 0, max = 250, interval = 50,
    name = "水量", formatter = '{value} ml',
    axisLine = list(show = TRUE),
    axisTick = list(show = TRUE, inside = TRUE)) |>
  e_y_axis(
    index = 1, min = 0, max = 25, interval = 5,
    name = "温度", formatter = '{value} °C') |>
  e_title('图表的主标题') |>
  e_tooltip(trigger = "axis") |>
  e_legend(bottom = 'bottom', orient = 'horizontal') |>
  e_labels(fontSize = 9, position = "top") |>
  e_datazoom(y_index = 1, type = "inside") |>
  e_mark_point("平均温度", data = list(type = "min")) |>
  e_mark_point("平均温度", data = list(type = "max")) |>
  e_mark_line("平均温度", data = list(type = "average")) |>
  e_mark_area(
    serie = "蒸发量",
    data = list(list(xAxis = "6月", yAxis = 100),
                list(xAxis = "9月", yAxis = 180)),
    itemStyle = list(color = "lightblue")) |>
  e_toolbox_feature(feature = c("dataView", "brush")) 

完结·撒花

To be continued···

Echarts中的JS<–>echarts4r中的R

举个栗子

xAxis: [
    {
      type: 'category',
      axisTick: { show: false },
      nameTextStyle: { padding: [3, 4, 5, 6] }
    }
  ]
 
visualMap: [
        {
          show: false,
          dimension: 3,
          categories: data.counties,
          inRange: {
            color: (function () {
              // prettier-ignore
              var colors = ['#51689b', '#ce5c5c'];
              return colors.concat(colors);
            })()
          }
        }
      ]  
  
e_x_axis(
  type = "category",
  axisTick = list(show = TRUE),
  nameTextStyle = list(
    padding = c(1, 1, 5, 6)
    )
)

e_visual_map(
    show = FALSE,
    dimension = 3,
    categories = c(
      'Australia','Canada','China','Cuba','Finland','France',
      ···
      'United States'),
    inRange = list(
      color = htmlwidgets::JS(
        "(function () {
              // prettier-ignore
              var colors = ['#51689b', '#ce5c5c'];
              return colors.concat(colors);
            })()"
      )
      ))