You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2022/04/17 02:46:49 UTC
[GitHub] [echarts] GrilledRobin opened a new issue, #16900: [Bug] [emphasis.itemStyle.color] cannot take function definition with parameter: (params)
GrilledRobin opened a new issue, #16900:
URL: https://github.com/apache/echarts/issues/16900
### Version
5.3.2
### Link to Minimal Reproduction
https://echarts.apache.org/examples/en/editor.html?c=bar-gradient
### Steps to Reproduce
#### `echarts ver=5.3.2`
- Setup the [option] as below (from the official link: [`here`](https://echarts.apache.org/examples/en/editor.html?c=bar-gradient)), the hover on bars will change the gradient color as expected:
```{javascript}
option = {
title: {
text: '特性示例：渐变色 阴影 点击缩放',
subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
},
xAxis: {
data: dataAxis,
axisLabel: {
inside: true,
color: '#fff'
},
axisTick: {
show: false
},
axisLine: {
show: false
},
z: 10
},
yAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: '#999'
}
},
dataZoom: [
{
type: 'inside'
}
],
series: [
{
type: 'bar',
showBackground: true,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#83bff6' },
{ offset: 0.5, color: '#188df0' },
{ offset: 1, color: '#188df0' }
])
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#2378f7' },
{ offset: 0.7, color: '#2378f7' },
{ offset: 1, color: '#83bff6' }
])
}
},
data: data
}
]
};
```
- Change the parts starting with `new echarts.graphic.LinearGradient(...)` into `function definition` as below, the chart be drawn but the emphasis won't work:
- Assumption 1: `itemStyle.color` can take `function definition` as input, although it is not stated in the official document [`here`](https://echarts.apache.org/en/option.html#series-bar.itemStyle.color) (is it a lack in the official document, or it isn't designed to be supported?)
- Assumption 2: `emphasis.itemStyle.color` cannot take `function definition` as input
```{javascript}
option = {
...
series: [
{
type: 'bar',
showBackground: true,
itemStyle: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#83bff6' },
{ offset: 0.5, color: '#188df0' },
{ offset: 1, color: '#188df0' }
]);
}
},
emphasis: {
itemStyle: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#2378f7' },
{ offset: 0.7, color: '#2378f7' },
{ offset: 1, color: '#83bff6' }
]);
}
}
},
data: data
}
]
};
```
- When we append a pair of parentheses `()` to `emphasis.itemStyle.color: function(params){}`, the hover works again (the color changes as expected on mouse over the bars)
- Assumption 1: `emphasis.itemStyle.color` takes a `function call` instead of a `function definition` as input, which is a different behavior against `itemStyle.color`. Is it the dedicated design?
```{javascript}
option = {
...
series: [
{
type: 'bar',
showBackground: true,
itemStyle: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#83bff6' },
{ offset: 0.5, color: '#188df0' },
{ offset: 1, color: '#188df0' }
]);
}
},
emphasis: {
itemStyle: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#2378f7' },
{ offset: 0.7, color: '#2378f7' },
{ offset: 1, color: '#83bff6' }
]);
}() // <- See right here
}
},
data: data
}
]
};
```
- When we write `emphasis.itemStyle.color: function(params){}(params)` for the call, the chart cannot be drawn again. It is logged in the console that `params` in the function call does not exist in current scope
- Assumption 1: `itemStyle.color` takes a `function definition` with parameter `params` that can be captured on the run
- Assumption 2: `emphasis.itemStyle.color` takes a `function call` with no parameter, but cannot take a `function call` with input parameter `params`, as it cannot recognize `params` in its scope
```{javascript}
option = {
...
series: [
{
type: 'bar',
showBackground: true,
itemStyle: {
color: function (params) {
console.log(params.dataIndex); // <- See right here
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#83bff6' },
{ offset: 0.5, color: '#188df0' },
{ offset: 1, color: '#188df0' }
]);
}
},
emphasis: {
itemStyle: {
color: (function (params) {
console.log(params.dataIndex); // <- See right here
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#2378f7' },
{ offset: 0.7, color: '#2378f7' },
{ offset: 1, color: '#83bff6' }
]);
})(params) // <- See right here
}
},
data: data
}
]
};
```
### Current Behavior
- `itemStyle.color` takes a `function definition` with parameter `params` that can be captured on the run
- `emphasis.itemStyle.color` takes a `function call` with no parameter, but cannot take a `function call` with input parameter `params`, as it cannot recognize `params` in its scope
### Expected Behavior
- `emphasis.itemStyle.color` takes a `function definition` with parameter `params` that can be captured on the run (which is exactly the same as the design for `itemStyle.color`, although it actually may be different from the infrastructure)
- The support of `itemStyle.color` for `function definition` can be stated in the official document [`here`](https://echarts.apache.org/en/option.html#series-bar.itemStyle.color) and other pages with configuration for `itemStyle.color`
### Environment
```markdown
- OS: `Windows 10 Pro 21H1`
- Browser: `Chrome 96.0.4664.110`
- Framework:
```
### Any additional comments?
- The design for different coloring of bars is crucial for some scenarios, hence the design for different coloring when mouse hovering over the bars is identically crucial
--
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] [Bug] [emphasis.itemStyle.color] cannot take function definition with parameter: (params) [echarts]
Posted by "github-actions[bot] (via GitHub)" <gi...@apache.org>.
github-actions[bot] commented on issue #16900:
URL: https://github.com/apache/echarts/issues/16900#issuecomment-2073441823
This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!
--
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] [Bug] [emphasis.itemStyle.color] cannot take function definition with parameter: (params) [echarts]
Posted by "github-actions[bot] (via GitHub)" <gi...@apache.org>.
github-actions[bot] closed issue #16900: [Bug] [emphasis.itemStyle.color] cannot take function definition with parameter: (params)
URL: https://github.com/apache/echarts/issues/16900
--
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] [Bug] [emphasis.itemStyle.color] cannot take function definition with parameter: (params) [echarts]
Posted by "github-actions[bot] (via GitHub)" <gi...@apache.org>.
github-actions[bot] commented on issue #16900:
URL: https://github.com/apache/echarts/issues/16900#issuecomment-2059920725
This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.
--
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