如何缩小ECharts BarChart柱状图数值后方的阴影宽度？

Hey there! I’ve dealt with this exact tweak before, so let’s break down how to fix it based on which shadow you’re working with:

Case 1: Shadow behind the value labels (above bars) #

If the shadow is attached to the numerical labels sitting on top of your bars, you’ll need to adjust the textStyle settings under the label section of your series configuration. The two key properties here are shadowBlur (controls the blur radius and overall size of the shadow) and shadowOffsetX (adjusts horizontal offset, which affects how "wide" the shadow appears relative to the text).

Here’s a practical code example:

option = {
  xAxis: {
    type: 'category',
    data: ['Product A', 'Product B', 'Product C']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'bar',
      data: [65, 82, 47],
      label: {
        show: true,
        position: 'top',
        textStyle: {
          // Tweak these values to shrink the shadow
          shadowBlur: 2, // Lower this number (default might be 10+) to reduce shadow spread
          shadowOffsetX: 1, // Reduce horizontal offset to keep shadow tight to the text
          shadowColor: 'rgba(0, 0, 0, 0.3)' // Optional: adjust opacity for a subtler effect
        }
      }
    }
  ]
};

• shadowBlur is the most impactful setting here: smaller values create a narrower, less diffused shadow. Set it to 0 if you want to remove the shadow entirely.

Case 2: Shadow behind the bar elements themselves #

If the shadow is part of the bars instead of the labels, you’ll use the same shadow properties but place them under itemStyle instead:

series: [
  {
    type: 'bar',
    data: [65, 82, 47],
    itemStyle: {
      shadowBlur: 3, // Shrink this value to narrow the bar's shadow
      shadowOffsetX: 2,
      shadowColor: 'rgba(0, 0, 0, 0.2)'
    }
  }
]

Play around with the shadowBlur and shadowOffsetX values incrementally—start with small numbers and adjust until you get the exact shadow width you want!

内容的提问来源于stack exchange，提问作者Muba