nikojxie opened a new issue, #20504:
URL: https://github.com/apache/echarts/issues/20504
### What problem does this feature solve?
在多个柱子为一组的柱状图中,设置了 tooltip.trigger:
'item',希望能在悬浮在某一个柱子的时候,该柱子背景显示一个跟y轴等高的阴影,柱子不够高的时候,悬浮在柱子上面的区域也希望是一样的效果,就跟单柱子
trigger 为 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: '延迟时长',
fill: '#9CA4B3',
},
},
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轴为数值轴
name: '设备占比',
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], // 虚线
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?
类似这种配置:
```typescript
tooltip: {
trigger: 'item',
itemPointer: {
type: 'shadow',
},
}
```
--
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]