echarts-bot[bot] commented on issue #20504:
URL: https://github.com/apache/echarts/issues/20504#issuecomment-2470026083
@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. 🤗
<details><summary><b>TRANSLATED</b></summary><br>
**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',
},
}
```
</details>
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
