在 eCharts4r 图中自定义图例边框颜色

Question

我正在制作一个

echarts4r

绘图，其中有自定义符号，我希望图例能够匹配这些符号以及特定的边框颜色。该图基于以下示例数据：

library(echarts4r)
library(dplyr)

the_data <- data.frame(
  key = c("a", "b", "c", "d", "e", "f"), 
  group = c("A", "B", "C", "D", "E", "F"), 
  x = c(0.495, -0.466, 0.85, 1.06, -0.441, 0.395), 
  y = c(1.06, 0.82, 3.76,3.17, 0.49, 2.67), 
  color = c("#FFFF00", "#FFA500", "#FFFF00", "#FFA500", "#FFFF00", "#FFA500"), 
  symbolSize = c(15, 15, 15, 15, 15, 15), 
  borderColor = c("#FF0000", "#0000FF", "#FF0000", "#0000FF", "#FF0000", "#0000FF"), 
  symbol = c("rect", "rect", "circle", "circle", "diamond", "path://M27,34.44 L29.87,29.47 L24.13,29.47 Z"
))

如果我在没有配置图例的情况下生成绘图，则绘图和图例中的元素之间存在差异。

the_data %>%
  dplyr::group_by(group) %>%
  echarts4r::e_chart(x) %>%
  echarts4r::e_scatter(y,
                       itemStyle = list(borderWidth = 2)) %>%
  echarts4r::e_add_unnested("symbol", symbol) %>%
  echarts4r::e_add_unnested("symbolSize", symbolSize) %>%
  echarts4r::e_add_nested("itemStyle", color, borderColor)

随后，我尝试配置图例。虽然我成功地定义了图例的形状和颜色，但在专门为图例项设置

borderColor

时遇到了挑战。当前的方法涉及在

borderColor

内利用

itemStyle

。探索的另一种方法是使用

echarts4r::e_add_nested("itemStyle", color, borderColor)

，它已被用于在

borderColor

中实现

echarts4r::e_scatter()

。然而，在图例定制的背景下，它似乎没有明显的效果。

legend_data <- the_data %>% 
  dplyr::distinct(group, color, borderColor, symbol) %>% 
  dplyr::arrange(group)

the_data %>%
  dplyr::group_by(group) %>%
  echarts4r::e_chart(x) %>%
  echarts4r::e_scatter(y,
                       itemStyle = list(borderWidth = 2)) %>%
  echarts4r::e_add_unnested("symbol", symbol) %>%
  echarts4r::e_add_unnested("symbolSize", symbolSize) %>%
  echarts4r::e_add_nested("itemStyle", color, borderColor) %>%
  echarts4r::e_color(color = legend_data$color) %>%
  echarts4r::e_legend(
    itemWidth = 15,
    itemStyle = list(
      borderColor = legend_data$borderColor,
      borderWidth = 2,
      itemWidth = 15
    ),
    icons = legend_data$symbol
  )

非常感谢任何帮助！

Answer 1

我没有使用 echarts4r 的经验，但在 echarts 本身中，系列中配置的符号会自动用作legend。请注意，您必须指定系列名称。

示例：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  legend: {},
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'scatter',
      name: '1',
      data: [150, 230, 224, 218, 135, 147, 260],
      symbol: 'triangle',
      symbolSize: 14,
      itemStyle: {color: 'blue', borderColor: 'red', borderWidth: 2}
    },
    {
      type: 'scatter',
      name: '2',
      data: [200, 150, 230, 224, 218, 135, 147],
      symbol: 'square',
      symbolSize: 14,
      itemStyle: {color: 'yellow', borderColor: 'red', borderWidth: 2}
    },
    {
      type: 'scatter',
      name: '3',
      data: [90, 180,150, 230, 224, 218, 135],
      symbolSize: 14,
      itemStyle: {color: 'orange', borderColor: 'blue', borderWidth: 2}
    }
  ]
};