apache / apache/echarts

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

Open
#20,504 5 comments 0 reactions 0 assignees View on GitHub
new-feature pending
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### 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,
},
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?

类似这种配置:
```typescript
tooltip: {
trigger: 'item',
itemPointer: {
type: 'shadow',
},
}
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.