Echarts4r 挥发化飞花

编辑部按：本文以Rmarkdown格式制作，文中部分输出所用代码未进行显示，可以在github中查看源文件^[1]。

如同死生、枯荣是生物的一体两面，确定性与不确定性也是数据分析的一体两面。拿到一份数据后，真得能用各种分析手段探索得到百分百的确定性吗？如若分析的终点仍然是去面对一片未知，是不是只可以在路途中留下一份权衡取舍后的确定性结论呢？在大数据的时代，人们总是要用文字、用图形、用表格去描述隐藏在数据中的确定性。本（一）文（条）作（咸）者（鱼）在一次无穷无尽的数据探索过程中，日日盯着那些图形看，看着看着忽然开了一个脑洞，在人类创造出那么多概念和工具之前，自然界的花花草草早就已经存在，不妨试试把画图工具只是用来画一些花草。

在那么多图形类型里，与花草形状最接近的是饼状图。饼图有三种，像披萨一样的扇形饼图，像可以套在脖子上吃的饼一样的环形饼图，以及南丁格尔女士发明的玫瑰图。本文使用 echarts4r 包作为绘图工具，首先介绍一些将饼图改造成花草图案的基础要点，随后绘制几种花与草的图案作为示例。

注意1：本文部分代码较为冗长，为了方便对照观看，部分代码未做格式化处理。
注意2：有些人看到多重花瓣的图可能会出现头晕、眼花等不适症状，请谨慎观看。

基础要点1：花瓣弧度

在 echarts4r 包中用e_pie()函数画饼状图，改变扇区弧度就会形成花瓣。

radius，用于设置饼图中扇区的半径，可输入三种类型的数据：数值、百分比、含有两个百分比的数组。仅设定一个数值或百分比、或数组中第一个百分比为0%时，会画出来如下图中第一排的扇形饼图。形如radius = c("10%", "30%")，第一个百分比10%代表环形饼图的内圈半径，第二个百分比30%代表环形饼图的外圈半径。
roseType = "radius"，在e_pie中设置此参数后可以画出南丁格尔玫瑰图，如下图中第三排。当每个扇区数据项对应的数值完全一致时，等同于普通的扇形饼图。
center = c('20%', '20%')，用于设置饼图中心点在整个图形容器中的位置，数组中的两个百分比取值范围均为[0%,100%]。第一个值设定的是左右方位，最左边是0%，最右边是100%。第二个值设定的是上下方位，最上边是0%，最下边是100%。
color = '#FF6A6A'，用于设置饼图中扇区的颜色。整段代码中第一个e_pie()函数中设定的颜色为全局调色盘，若后续绘制的饼图中不对颜色做出新的设定，那么默认引入全局调色盘。
itemStyle = list( )中可设置饼状图扇区的弧度，即花瓣的弧度

borderRadius，当上面的radius仅设定一个数值或百分比，且此参数也仅设定一个数值或百分比时，改变的是扇形饼图的外圈弧度，参见下图中第一排左一至左二；当上面的radius设定的数组中有两个大于0%的值，且此参数仍然仅设定一个数值或百分比时，同时改变环形饼图内圈及外圈的弧度，参见下图中第二排左一至左二；设定borderRadius = c('0%','30%')时表示仅改变环形饼图外圈的弧度，参见下图中第二排的左一及左三。
borderColor，设定的是饼状图扇区的描边颜色，参见第二排左四。
borderWidth，设定的是饼状图扇区的描边距离，即花瓣之间的间距，参见第一排左二、左三、左四。

library(echarts4r)

df <-

  data.frame(

    name = rep(
'A', 
8),

    value = c(rep(
8, 
8)),

    value2 = c(rep(c(
4, 
5), 
4))

  )

df |>

  e_charts(name) |>

# 第一排 左一
  e_pie( value, radius = c(
"0%", 
"30%"), center = c(
'20%', 
'20%'), color = 
'#FF6A6A') |>

# 第一排 左二
  e_pie( value, radius = c(
"0%", 
"30%"), center = c(
'40%', 
'20%'), 

          itemStyle = list( borderRadius = 
30)) |>

# 第二排 左三
  e_pie( value, radius = c(
"0%", 
"30%"), center = c(
'60%', 
'20%'), 

    itemStyle = list( borderRadius = 
30, borderColor = 
'#fff', borderWidth = 
2 )) |>

# 第二排 左四
  e_pie( value, radius = c(
"0%", 
"30%"), center = c(
'80%', 
'20%'),

    itemStyle = list( borderRadius = 
30, borderColor = 
'#fff', borderWidth = 
10 )) |>       

# 第二排 左一
  e_pie( value, radius = c(
"10%", 
"30%"), center = c(
'20%', 
'50%') ) |>

# 第二排 左二
  e_pie( value, radius = c(
"10%", 
"30%"), center = c(
'40%', 
'50%'), 

    itemStyle = list( borderRadius = 
30 )) |>

# 第二排 左三
  e_pie( value, radius = c(
"10%", 
"30%"), center = c(
'60%', 
'50%'), 

    itemStyle = list( borderRadius = c(
'0%',
'30%'))) |>

# 第二排 左四
  e_pie( value, radius = c(
"10%", 
"30%"), center = c(
'80%', 
'50%'), 

    itemStyle = list( borderRadius = c(
'0%',
'30%'), borderColor = 
'#FFC1C1', borderWidth = 
10)) |>

# 第三排 左一
  e_pie( value2, roseType = 
"radius" ,radius=
'30%', center = c(
'20%', 
'80%')) |>

# 第三排 左二
  e_pie( value2, roseType = 
"radius" ,radius=c(
'10%',
'30%'), center = c(
'40%', 
'80%')) |>

# 第三排 左三
  e_pie( value2, roseType = 
"radius" ,radius=
'30%', center = c(
'60%', 
'80%'),

    itemStyle = list( borderRadius = 
30)) |>

# 第三排 左四
  e_pie( value2, roseType = 
"radius" ,radius=c(
'10%',
'30%'), center = c(
'80%', 
'80%'),

    itemStyle = list( borderRadius = c(
'10%',
'30%'), borderColor = 
'#FFC1C1', borderWidth = 
10 )) |>

  e_labels(show = 
FALSE) |> 
# 不显示数据标签
  e_legend(show = 
FALSE)  
# 不显示图例

基础要点2：花瓣颜色

设置花瓣颜色的基础要点有四点：渐变色、纹理填充、纯色，以及为不同的花瓣分配不同颜色。

渐变色

若要将花瓣的颜色设置为渐变色，可参考 Apache Echarts 官网提供的配置项手册^[2]，渐变色有两种渐变方式：

type = 'linear'，线性渐变，类似直角坐标系可以划分出四个象限，可通过设定x0、y0、x2、y2等左、下、右、上四个方位来改变渐变的方向，比如仅设定x0 = 0且其他三个参数都为0时，表示从右到左渐变，仅设定y0 = 1其他三个都为0时，表示从下到上渐变。
type = 'radial'，径向渐变，如同在水中投入一粒石子，水面形成的波纹一圈圈逐渐向外扩散，颜色也如此由内到外渐变。类似极坐标系需要设定半径和角度，可设定三个参数圆心 x、y 和半径 r 来改变渐变的起点位置、半径长度。

下图中的颜色设置得有点辣眼睛，请先做好心理准备。

df |>

  e_charts(name) |>

  e_pie(

    value, 
# 左侧花瓣
    radius = c(
"20%", 
"60%"),

    center = c(
'30%', 
'50%'),

    itemStyle = list(

      borderRadius = c(
"0%", 
"40%"),

      borderColor = 
'#fff',

      borderWidth = 
2,

      color = list(

        type = 
'linear',

        x = 
0,

        y = 
1,

        x2 = 
0,

        y2 = 
0,

        colorStops = list(list(offset = 
0, color = 
'#1E90FF'), 
# 0%处的颜色
                          list(offset = 
1, color = 
'#B22222') 
# 100%处的颜色
                          ) ) ) ) |> 

      e_pie(

        value, 
# 右侧花瓣
        radius = c(
"20%", 
"60%"),

        center = c(
'70%', 
'50%'),

        itemStyle = list(

          borderRadius = c(
"0%", 
"40%"),

          borderColor = 
'#fff',

          borderWidth = 
2,

          color = list(

            type = 
'radial',

            x = 
0.5,

            y = 
0.5,

            r = 
0.5,

            colorStops = list(list(offset = 
0, color = 
'#1E90FF'), 
# 0%处的颜色
                              list(offset = 
1, color = 
'#B22222') 
# 100%处的颜色
                              ) ) ) ) |>

          e_labels(show = 
FALSE) |>

          e_legend(show = 
FALSE)

纹理填充

若要给花瓣设置填充的纹理，可参考 Apache Echarts 官网提供的配置项手册^[3]。填充的纹理通常由一些常见形状如圆形、三角形等组成，在 echarts4r 包中的写法是e_aria(enabled = TRUE, decal = list(show = TRUE, decals = list( )))，其中可设定的参数有如下几点。

symbol，作为纹理填充的图形形状，共有'circle'、'rect'、'roundRect'、'triangle'、'diamond'、'pin'、'arrow'、'none'等图案。
color，作为纹理填充的图形颜色。
symbolSize，作为纹理填充的图形大小，设置为0时等同于没有填充纹理。
rotation，作为纹理填充的图形可以旋转的角度。

df |>

  e_charts(name) |>

  e_pie(

    value,

    radius = c(
"20%", 
"80%"), 
#花瓣内圈、外圈弧度
    color = 
'#FF6A6A', 
# 花瓣的颜色
    itemStyle = list(

      borderRadius = c(
'0%',
'50%'), 
#花瓣描边的弧度
      borderColor = 
'#fff', 
# 花瓣描边颜色
      borderWidth = 
2# 花瓣之间的距离
    )

  ) |>

  e_aria(enabled = 
TRUE,

         decal = list(

           show = 
TRUE,

           decals = list(

             symbol = 
'triangle',

             color = 
'#fff',

             symbolSize = 
1,

             rotation = 
30
           )

         )) |>

  e_labels(show = 
FALSE) |>

  e_legend(show = 
FALSE)

纯色

承袭 Apache Echarts 的设定，echarts4r 包中的饼状图默认给每个数据项分配不同的颜色，即e_charts中输入的数据项有几个不同的值，便默认为饼状图中的扇区分配几种颜色。

df1 <- data.frame(name = letters[
1:
8], value = rep(
8, 
8))

df1 |>

  e_charts(name) |>

  e_pie(value) |>

  e_labels(show = 
FALSE) |>

  e_legend(show = 
FALSE)

给花瓣分配颜色

除了可以通过改变数据项来改变饼状图的扇区配色以外，也可以直接在e_pie()中设定color = ''来改变整个饼状图的颜色，还可以通过e_add()函数来分配扇区的颜色，条件是需要引入一个为每个扇区分配好颜色的数组。具体的颜色设置可参考sojson网站^[4]。下图中从左至右三个图的代码基本一致，区别只是e_add('itemStyle', color = color1)这段中从左至右分别写入color = color1、color = color2、color = color3。

df2 <- data.frame(

  name = rep(
'A', 
8),

  value = c(rep(
8, 
8)),

  color1 = c(rep(
'#FF6A6A', 
4), rep(
'#FF3030', 
4)), 
# 左一：8瓣-2色-颜色分开
  color2 = c(rep(c(
'#FF6A6A', 
'#FF3030'), 
4)), 
# 左二：8瓣-2色-颜色交替
  color3 = c(
'#FF6A6A', rep(
'#FF3030', 
7)) 
# 左三：8瓣-2色-一瓣单色
)

df2 |>

  e_charts(name) |>

  e_pie(

    value,

    radius = c(
"20%", 
"80%"),

    itemStyle = list(

      borderRadius = c(
'0%', 
'50%'),

      borderColor = 
'#fff',

      borderWidth = 
2
    )

  ) |>

  e_add(
'itemStyle', color = color1) |> 
# 引入分配的颜色
  e_labels(show = 
FALSE) |>

  e_legend(show = 
FALSE)

基础要点3：多重花瓣

掌握了以上两个基础要点后就可以用 echarts4r 包来绘制简单的单瓣花，而绘制重瓣花需要掌握嵌套和堆叠这两种方法。

改变花瓣边缘的形状

在 echarts4r 包中可使用e_data()引入新数据来嵌套绘制出多个饼状图。需要注意的是，倘若在第一层的radius中设置的外圈半径大于第二层的内圈半径，两层饼状图的图案会重叠。

下图中一共嵌套了三层饼图，参照第一小节中的说明，当第二层饼图的内外圈半径设置为radius = c("20%", "80%")，第三层的内外圈半径设置为radius = c("70%", "90%")时，相当于第二层和第三层在图形容器中的70%至80%处会重叠，第三层会覆盖第二层的部分区域，若同时将第三层的扇区颜色设置为白色，便可达到改变第一层花瓣边缘形状的效果。

flower1 <- data.frame(name = 
'A', value1 = 
1)

flower2 <- data.frame(name2 = rep(
'B', 
8),  value2 = rep(
3, 
8))

flower3 <- data.frame(name3 = rep(
'B', 
24), value3 = rep(
3, 
24))

flower1 |>

  e_charts(name) |>

  e_pie(value1, 
# 第一层 花蕊
        radius = c(
"0%", 
"20%"),

        color = 
'#FF3030') |>

  e_data(flower2, value2) |> 
# 引入第二层数据
  e_pie(

    value2, 
# 第二层 花瓣
    radius = c(
"20%", 
"80%"),

    color = 
'#FF6A6A',

    itemStyle = list(

      borderRadius = c(
'0%', 
'50%'),

      borderColor = 
'#fff',

      borderWidth = 
5
    )

  ) |>

  e_data(flower3, value3) |> 
# 引入第三层数据
  e_pie(

    value3, 
# 第三层 花瓣
    radius = c(
"70%", 
"90%"),

#color = 'white', # 花瓣颜色设置为白色时不起作用
    itemStyle = list(

      color = 
'white', 
# 花瓣颜色设置为白色
      borderRadius = 
40,

      borderColor = 
'#fff',

      borderWidth = 
5
    )

  ) |>

  e_labels(show = 
FALSE) |>

  e_legend(show = 
FALSE)

嵌套多层--各层颜色不同

根据嵌套饼状图多层覆盖的特性，将第一、二、三层按照下层花瓣、上层花瓣、花蕊的顺序进行设置，如此便可以得到有多重花瓣的花。为了不使各层花瓣的不同颜色重叠，可将上层花瓣的扇区进行旋转，即在e_pie()中添加startAngle参数来设定起始角度，可填入数值的范围为[0, 360]。

flower1 <- data.frame(name = rep(
'A', 
16), value = rep(
1, 
16))

flower2 <- data.frame(name = rep(
'B', 
16), value2 = rep(
2, 
16))

flower3 <- data.frame(name = 
'A', value3 = 
1)

flower1 |>

  e_charts(name) |>

  e_pie(

    value,  
# 第一层 下层花瓣
    radius = c(
'10%', 
'90%'),

    color = 
'#FF6A6A',

    itemStyle = list(

      borderRadius = c(
'0%', 
'30%'),

      borderColor = 
'#fff',

      borderWidth = 
12
    )

  ) |>

  e_data(flower2, value2) |> 
# 引入第二层数据
  e_pie(

    value2,  
# 第二层 上层花瓣
    startAngle = 
15, 
# 设定起始角度，旋转这层饼图
    radius = c(
'10%', 
'80%'),

    color = 
'#FF3030',

    itemStyle = list(

      borderRadius = c(
'0%', 
'30%')

    )

  ) |>

  e_data(flower3, value3) |> 
# 引入第三层数据
  e_pie(value3,  
# 第三层 花蕊
        radius = 
'9%', 

        color = 
'#FFA500') |>

  e_labels(show = 
FALSE) |>

  e_legend(show = 
FALSE)

嵌套多层--各层颜色相同

在嵌套多层时，若每一层花瓣的颜色要设置成同一种颜色，那么最好同时设置每一层花瓣间距大于0，并且每隔一层设置一次该层花瓣旋转的起始角度。

flower1 <- data.frame(name = rep(
'A', 
8), value1 = rep(
8, 
8))

flower2 <- data.frame(name = rep(
'A', 
8), value2 = rep(
8, 
8))

flower3 <- data.frame(name = rep(
'A', 
8), value3 = rep(
8, 
8))

flower4 <- data.frame(name = rep(
'A', 
8), value4 = rep(
8, 
8))

flower5 <- data.frame(name = 
'A', value5 = 
8)

flower1 |>

  e_charts(name) |>

  e_pie(

    value1, 
# 第一层
    radius = c(
'10%', 
'90%'),

    color = 
'#FF6A6A',

    itemStyle = list(

      borderRadius = c(
'0%', 
'30%'),

      borderColor = 
'#fff',

      borderWidth = 
20# 花瓣间距
    )

  ) |>

  e_data(flower2, value2) |>

  e_pie(

    value2, 
# 第二层
    radius = c(
'10%', 
'80%'),

    startAngle = 
25, 
# 设定本层起始角度
    color = 
'#FF6A6A',

    itemStyle = list(

      borderRadius = c(
'0%', 
'30%'),

      borderColor = 
'#fff',

      borderWidth = 
5# 花瓣间距
    )

  ) |>

  e_data(flower3, value3) |>

  e_pie(

    value3, 
# 第三层
    radius = c(
'10%', 
'70%'),

    color = 
'#FF6A6A',

    itemStyle = list(

      borderRadius = c(
'0%', 
'30%'),

      borderColor = 
'#fff',

      borderWidth = 
5# 花瓣间距
    )

  ) |>

  e_data(flower4, value4) |>

  e_pie(

    value4, 
#第四层
    radius = c(
'10%', 
'60%'),

    startAngle = 
25, 
# 设定本层起始角度
    color = 
'#FF6A6A',

    itemStyle = list(

      borderRadius = c(
'0%', 
'30%'),

      borderColor = 
'#fff',

      borderWidth = 
5# 花瓣间距
    )

  ) |>

  e_data(flower5, value5) |>

  e_pie(value5, 
# 第五层
#这里直接在e_pie里面写color不生效，但是挪到itemStyle()里面去就可以了
        radius = 
'10%',

        itemStyle = list(color = 
'#FFA500')) |>

  e_labels(show = 
FALSE) |>

  e_legend(show = 
FALSE)

堆叠多层

如下图，也可使用极坐标系下的堆叠柱状图来达到重瓣花的效果。

data4 <- data.frame(

  name = rep(letters[
1:
24], 
1),

  value1 = rep(
4, 
24),

  value2 = rep(
4, 
24)

)

data4 |>

  e_charts(name) |>

  e_polar() |>

  e_angle_axis(name, show = 
FALSE) |> 
# 相当于把卷起来的x轴不展示
  e_radius_axis(show = 
FALSE) |> 
# 相当于把卷起来的y轴不展示
  e_bar(value1, 
# 第一层
        color = 
'#FF6A6A',

        stack = 
'grp',

        coord_system = 
"polar") |>

  e_bar(value2, 
# 第二层
        color = 
'#FF3030',

        stack = 
'grp',

        coord_system = 
"polar") |>

  e_legend(show = 
FALSE) |>

  e_labels(show = 
FALSE)