[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]

@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.

{
    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:

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

[nikojxie]

大概是这种效果