[Feature] 系列柱状图，悬浮单个柱子时的背景阴影

[nikojxie]

What problem does this feature solve?

在多个柱子为一组的柱状图中，设置了 tooltip.trigger: 'item'，希望能在悬浮在某一个柱子的时候，该柱子背景显示一个跟y轴等高的阴影，柱子不够高的时候，悬浮在柱子上面的区域也希望是一样的效果，就跟单柱子 trigger 为 axis 时效果一样

{
    tooltip: {
      trigger: 'item',
    },
    grid: {
      top: 40,
      left: 30,
      right: 40,
      bottom: 40,
      containLabel: true,
    },
    legend: {
      data: ['指标1', '指标2', '指标3', '指标4', '指标5'], 
      bottom: 0,
      left: 'center',
      icon: 'rect',
      itemWidth: 16,
      itemHeight: 16,
      itemGap: 40,
      textStyle: {
        color: '#666',
      },
    },
    xAxis: {
      type: 'category',
      data: ['1天', '2天', '3天', '4天', '5天', '6天', '7天', '7天以上'],
      axisLine: {
        lineStyle: {
          color: '#EBEEF4',
          shadowOffsetX: 40,
          shadowColor: '#EBEEF4',
        },
        // symbol: ['none', 'none'],
        // symbolOffset: [0, 20],
      },
      axisLabel: {
        color: '#9CA4B3',
        fontSize: 12,
      },
      axisTick: {
        alignWithLabel: true,
      },
    },
    yAxis: {
      type: 'value', // Y轴为数值轴
      axisLine: {
        show: true,
        lineStyle: {
          color: '#EBEEF4',
          shadowOffsetY: -30,
          shadowColor: '#EBEEF4',
        },
        symbol: ['none', 'none'],
        symbolOffset: [0, 30],
      },
      axisLabel: {
        color: '#9CA4B3',
        fontSize: 12,
      },
      splitLine: {
        lineStyle: {
          type: [2, 3], // 虚线
          color: '#E7E7E7', // 背景线颜色
        },
      },
      axisTick: {
        show: true,
      },
    },
    barGap: 0,
    series: [
      {
        name: '指标1',
        type: 'bar', // 柱状图
        data: [10, 20, 30, 40, 50, 60, 70, 80], // 对应每个类目的数据
        barWidth: 15, // 设置柱状图宽度
      },
      {
        name: '指标2',
        type: 'bar',
        data: [15, 25, 35, 45, 55, 65, 75, 85],
        barWidth: 15,
      },
      {
        name: '指标3',
        type: 'bar',
        data: [20, 30, 40, 50, 60, 70, 80, 90],
        barWidth: 15,
      },
      {
        name: '指标4',
        type: 'bar',
        data: [25, 35, 45, 55, 65, 75, 85, 95],
        barWidth: 15,
      },
      {
        name: '指标5',
        type: 'bar',
        data: [30, 40, 50, 60, 70, 80, 90, 100],
        barWidth: 15,
      },
    ],
  }

What does the proposed API look like?

类似这种配置：

    tooltip: {
      trigger: 'item',
      itemPointer: {
        type: 'shadow',
      },
    }

[echarts-bot[bot]]

I'm sorry to close this issue for it lacks the necessary title. Please provide a descriptive and as concise as possible title to describe your problems or requests and then the maintainers or I will reopen this issue.

Every good bug report or feature request starts with a title. Your issue title is a critical element as it's the first thing maintainers see.

A good issue title makes it easier for maintainers to understand what the issue is, easily locate it, and know what steps they'll need to take to fix it.

Moreover, it's better to include keywords, as this makes it easier to find the issue self and similar issues in searches.

[echarts-bot[bot]]

@nikojxie It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED

**TITLE** [Feature] series of histograms, the background shadow when a single bar is hovered **BODY** ### What problem does this feature solve? In a bar chart with multiple columns as a group, tooltip.trigger: 'item' is set. I hope that when hovering on a certain column, the background of the column will display a shadow with the same height as the y-axis. The column is not high enough. At this time, the area suspended above the pillar also hopes to have the same effect, just like when the trigger of a single pillar is axis. ```typescript { tooltip: { trigger: 'item', }, grid: { top: 40, left: 30, right: 40, bottom: 40, containLabel: true, }, graphic: { type: 'text', right: 0, bottom: 40, style: { text: 'Delay duration', fill: '#9CA4B3', }, }, legend: { data: ['Indicator 1', 'Indicator 2', 'Indicator 3', 'Indicator 4', 'Indicator 5'], bottom: 0, left: 'center', icon: 'rect', itemWidth: 16, itemHeight: 16, itemGap: 40, textStyle: { color: '#666', }, }, xAxis: { type: 'category', data: ['1 day', '2 days', '3 days', '4 days', '5 days', '6 days', '7 days', 'more than 7 days'], axisLine: { lineStyle: { color: '#EBEEF4', shadowOffsetX: 40, shadowColor: '#EBEEF4', }, // symbol: ['none', 'none'], // symbolOffset: [0, 20], }, axisLabel: { color: '#9CA4B3', fontSize: 12, }, axisTick: { alignWithLabel: true, }, }, yAxis: { type: 'value', //The Y-axis is the numerical axis name: 'Device proportion', nameTextStyle: { color: '#9CA4B3', padding: [0, 60, 0, 0], }, axisLine: { show: true, lineStyle: { color: '#EBEEF4', shadowOffsetY: -30, shadowColor: '#EBEEF4', }, symbol: ['none', 'none'], symbolOffset: [0, 30], }, axisLabel: { color: '#9CA4B3', fontSize: 12, }, splitLine: { lineStyle: { type: [2, 3], // dashed line color: '#E7E7E7', // background line color }, }, axisTick: { show: true, }, }, barGap: 0, series: [ { name: 'Indicator 1', type: 'bar', // Bar chart data: [10, 20, 30, 40, 50, 60, 70, 80], // data corresponding to each category barWidth: 15, //Set the width of the bar chart }, { name: 'Indicator 2', type: 'bar', data: [15, 25, 35, 45, 55, 65, 75, 85], barWidth: 15, }, { name: 'Indicator 3', type: 'bar', data: [20, 30, 40, 50, 60, 70, 80, 90], barWidth: 15, }, { name: 'Indicator 4', type: 'bar', data: [25, 35, 45, 55, 65, 75, 85, 95], barWidth: 15, }, { name: 'Indicator 5', type: 'bar', data: [30, 40, 50, 60, 70, 80, 90, 100], barWidth: 15, }, ], } ``` ### What does the proposed API look like? Similar to this configuration: ```typescript tooltip: { trigger: 'item', itemPointer: { type: 'shadow', }, } ```

[nikojxie]

大概是这种效果