ECharts 堆叠条形图：仅在最上面的条形上设置 BorderRadius

Question

我正在使用 Apache eCharts 并且我创建了一个 堆叠条形图。

它有效，但现在我想在顶部堆叠栏上放置一个边框半径。

我不希望所有条形都是圆角的，只希望最顶部的条形是圆形的，无论它是什么。

我目前在名为

borderRadius

的栏上使用

rank1

，该栏通常位于顶部堆栈，但某些日期没有

rank1

，因此显示方形边框。

例如，在下图中，左侧的堆叠条形顶部有

rank1

堆叠，其已正确倒圆。但是右侧堆叠条的数据没有

rank1

，在这种情况下顶部堆叠条实际上是

rank2To5

，它没有应用

borderRadius

。

那么如何在顶部堆叠栏上应用边框半径，无论它是什么？

请看图片：

这是我当前的代码：

const options: ECOption = {
    xAxis: {
      type: "time",
    },
    yAxis: {
      type: "value",
      show: false,
    },
    dataset: {
      dimensions: [
        { name: "date", type: "time" },
        { name: "rank51Plus", type: "number" },
        { name: "rank21To50", type: "number" },
        { name: "rank11To20", type: "number" },
        { name: "rank6To10", type: "number" },
        { name: "rank2To5", type: "number" },
        { name: "rank1", type: "number" },
      ],
      source: rankChartPoints.value,
    },
    series: [
      {
        name: "#51+",
        type: "bar",
        stack: "ranks",
        color: mediumRedHex,
        emphasis: {
          focus: "series",
        },
        encode: {
          x: "date",
          y: "rank51Plus",
        },
      },
      {
        name: "#21-50",
        type: "bar",
        stack: "ranks",
        color: orange6Hex,
        encode: {
          x: "date",
          y: "rank21To50",
        },
      },
      {
        name: "#11-20",
        type: "bar",
        stack: "ranks",
        color: amber7Hex,
        encode: {
          x: "date",
          y: "rank11To20",
        },
      },
      {
        name: "#6-10",
        type: "bar",
        stack: "ranks",
        color: lime7Hex,
        encode: {
          x: "date",
          y: "rank6To10",
        },
      },
      {
        name: "#2-5",
        type: "bar",
        stack: "ranks",
        color: lightGreen7Hex,
        encode: {
          x: "date",
          y: "rank2To5",
        },
      },
      {
        name: "#1",
        type: "bar",
        stack: "ranks",
        color: "#00b0ff",
        encode: {
          x: "date",
          y: "rank1",
        },
        itemStyle: {
          borderRadius: [10, 10, 0, 0], // Adding border radius here
        },
      },
    ],
  };

Answer 1

我认为这是不可能的。我能想到的最好的解决方法是使用

barMinHeight

始终使顶部栏出现，但这会使可视化不正确。

这里是一个例子：

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category'
  },
  yAxis: {},
  series: [
    {
      name: 'Direct',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [320, 302, 301, 334, 390, 330, 320]
    },
    {
      name: 'Mail Ad',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Affiliate Ad',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ad',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [150, 212, 201, 154, 190, 330, 410]
    },
    {
      name: 'Search Engine',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [820, 832, 901, 934, 1290, 1330, 0],
      barMinHeight: 15,
      itemStyle: {
          borderRadius: [10, 10, 0, 0], // Adding border radius here
        },
    }
  ]
};