是否可以更改 echarts4r 中区域带（e_band2）的边框颜色？

Question

目标：
在我的图中，我希望边界和区域带的面积具有不同的颜色。该图是echarts4r使用该e_band2()函数创建的。

问题：
在文档中，我读到可以通过itemStyle函数的参数自定义区域带。borderWidth这对于我测试的所有其他选项（ 、borderType、shadowBlur、 ）都适用shadowColor，但不适用于borderColor. 但是，该borderColor选项似乎至少部分有效，因为图例中的符号具有所需的边框颜色，但绘图中的区域带没有。

有谁知道是否有其他方法可以更改边框颜色或者这是一个错误？



代表：

library(echarts4r)
library(dplyr)

data(EuStockMarkets)

as.data.frame(EuStockMarkets) |>
  dplyr::slice_head(n = 200) |>
  dplyr::mutate(day = 1:dplyr::n()) |>
  e_charts(day) |>
  e_band2(DAX, SMI, itemStyle = list(
    borderWidth = 1,
    color = "green",
    borderColor = "red"
  )) |>
  e_y_axis(scale = TRUE)

Answer 1

由于某种原因，它被硬编码为忽略颜色的样式设置stroke（在 SVG 中，即线条）echarts4r。

但是，您可以将其改回来。

echarts4r我从JS 函数的包中获取了代码renderBand，并将其修改为使用绘图调用中定义的设置（这是您想要和期望的）。

请注意，我已将其设为字符串。

renderBands2 <- "
  function renderBands2(params, api) {
    if (params.context.rendered) return;
    params.context.rendered = true;
    
    /* set polygon vertices */
    let points = [];
    let i = 0;
    while (typeof api.value(0,i) != 'undefined' && !isNaN(api.value(0,i))) {
      points.push(api.coord([api.value(0,i), api.value(1,i)]));  /* lo */
      i++;
    }
    for (var k = i-1; k > -1 ; k--) {
      points.push(api.coord([api.value(0,k), api.value(2,k)]));  /* up */
    }
    return {
      type: 'polygon',
      shape: {
        points: echarts.graphic.clipPointsByRect(points, {
          x: params.coordSys.x, y: params.coordSys.y,
          width: params.coordSys.width, height: params.coordSys.height
        })}, style: api.style()
    };
  }"

将其应用到您的绘图中htmlwidgets::onRender。这要求使用数据系列的这个新函数重新渲染绘图。

as.data.frame(EuStockMarkets) |>
  dplyr::slice_head(n = 200) |>
  dplyr::mutate(day = 1:dplyr::n()) |>
  e_charts(day) |>
  e_band2(DAX, SMI, itemStyle = list(
    borderWidth = 1, color = "green", borderColor = "red")) |>
  e_y_axis(scale = TRUE) %>% 
  htmlwidgets::onRender(paste0(
    "function(el, data) {
    ", renderBands2,
    "
    chart = get_e_charts(el.id);
    opts = chart.getOption();
    opts.series[0].renderItem = renderBands2;
    chart.setOption(opts, true); /* all better! */
    }"))