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-unsubscr...@echarts.apache.org.apache.org For queries about this service, please contact Infrastructure at: us...@infra.apache.org --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org
