apache / apache/echarts

Visual Map Not respecting with Funnel Chart When Data is in Both series and dataset.

Open
#20,640 2 comments 0 reactions 0 assignees View on GitHub
bug en pending
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### Version

5.5.1

### Link to Minimal Reproduction

https://codepen.io/Srikanth-Sangana/pen/GgKMbXP

### Steps to Reproduce

Below is a minimal reproducible example of the option configuration:

option = {
textStyle: {
fontFamily: "OpenSans-Regular",
},
backgroundColor: "#ffffff",
labelLayout: {
hideOverlap: true,
},
aria: {
enabled: true,
decal: {
show: false,
},
},
series: [
{
type: "funnel",
z: 0,
name: "Sample_Funnel_1",
maxSize: 600,
sort: "none",
right: 150,
left: 10,
height: 200,
top: 50,
data: [
{
name: "Sample Company A",
value: 0,
itemStyle: {
height: 200,
color: "#007BFF",
},
},
],
overflow: "break",
labelLine: {
length: 20,
},
label: {
show: true,
fontSize: 10,
color: "#000000",
fontStyle: "normal",
fontWeight: "normal",
position: "outside",
distance: 5,
rich: {
title: {
color: "#007dd1",
fontSize: 10,
},
},
},
tooltip: {
trigger: "item",
textStyle: {
fontSize: 9,
},
},
},
{
type: "funnel",
z: 0,
name: "Sample_Funnel_2",
maxSize: 400,
sort: "none",
right: 150,
left: 10,
height: 200,
top: 250,
data: [
{
name: "Sample Company B",
value: 0,
itemStyle: {
height: 200,
color: "#28A745",
},
},
],
overflow: "break",
labelLine: {
length: 20,
},
label: {
show: true,
fontSize: 10,
color: "#000000",
fontStyle: "normal",
fontWeight: "normal",
position: "outside",
distance: 5,
rich: {
title: {
color: "#007dd1",
fontSize: 10,
},
},
},
tooltip: {
trigger: "item",
textStyle: {
fontSize: 9,
},
},
},
],
visualMap: [
{
type: "piecewise",
show: true,
position: "bottom",
bottom: 0,
left: "center",
orient: "horizontal",
pieces: [
{
gt: 41,
color: "#008000",
label: "> 41",
},
{
lt: 35,
color: "#ff0000",
label: "< 35",
},
],
outOfRange: {
color: "#007BFF",
},
calculable: true,
textStyle: {
fontSize: 10,
color: "#000000",
},
itemWidth: 20,
itemHeight: 16,
},
],
dataset: [
{
dimensions: [
"name",
"value",
],
source: [
{
name: "Sample Company A",
value: 50,
},
{
name: "Sample Company B",
value: 30,
},
],
},
],
legend: {
type: "scroll",
show: false,
itemWidth: 10,
itemHeight: 10,
pageIconSize: 10,
textStyle: {
fontSize: 10,
color: "#000000",
},
left: "center",
orient: "horizontal",
},
};

### Current Behavior

The visual map does not apply the appropriate colors or range behavior to the funnel chart when both series.data and dataset.source contain data.
![funnel Chart Current ](https://github.com/user-attachments/assets/186fdc66-362b-4cd7-9be8-055b7ca41c79)

### Expected Behavior

The visual map should apply to the funnel chart in the above configuration. It’s a **funnel chart** with a **funnel shape** instead of a pyramid, which is why we created the series this way.

### Environment

```markdown
- OS:
- Browser:
- Framework:
```

### Any additional comments?

_No response_

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.