echarts
echarts copied to clipboard
apache
[Feature] 系列柱状图，悬浮单个柱子时的背景阴影
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',
},
}
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.
![echarts-bot[bot] avatar](https://avatars.githubusercontent.com/in/20872?v=4 "Published by a pub.dev verified publisher"){kind=small}
@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',
},
}
similar with this
u can use this
graphic https://echarts.apache.org/zh/option.html#graphic.id
similar with this
u can use this
graphichttps://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