You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by "nikojxie (via GitHub)" <gi...@apache.org> on 2024/11/12 09:28:37 UTC
[I] [Feature] [echarts]
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: commits-unsubscribe@echarts.apache.org.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] [Feature] [echarts]
Posted by "echarts-bot[bot] (via GitHub)" <gi...@apache.org>.
echarts-bot[bot] closed issue #20504: [Feature]
URL: https://github.com/apache/echarts/issues/20504
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] [Feature] 系列柱状图，悬浮单个柱子时的背景阴影 [echarts]
Posted by "nikojxie (via GitHub)" <gi...@apache.org>.
nikojxie commented on issue #20504:
URL: https://github.com/apache/echarts/issues/20504#issuecomment-2550136893
> similar with this  u can use this `graphic` https://echarts.apache.org/zh/option.html#graphic.id
thanks, in the end, I add another hidden x-axis and transparent bar that filled the y-axis
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] [Feature] 系列柱状图，悬浮单个柱子时的背景阴影 [echarts]
Posted by "nikojxie (via GitHub)" <gi...@apache.org>.
nikojxie commented on issue #20504:
URL: https://github.com/apache/echarts/issues/20504#issuecomment-2472295841
大概是这种效果
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] [Feature] 系列柱状图，悬浮单个柱子时的背景阴影 [echarts]
Posted by "echarts-bot[bot] (via GitHub)" <gi...@apache.org>.
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] [Feature] 系列柱状图，悬浮单个柱子时的背景阴影 [echarts]
Posted by "fnlearner (via GitHub)" <gi...@apache.org>.
fnlearner commented on issue #20504:
URL: https://github.com/apache/echarts/issues/20504#issuecomment-2522028819
similar with this
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
Re: [I] [Feature] [echarts]
Posted by "echarts-bot[bot] (via GitHub)" <gi...@apache.org>.
echarts-bot[bot] commented on issue #20504:
URL: https://github.com/apache/echarts/issues/20504#issuecomment-2470024176
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.
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org