apache / apache/echarts

[Bug] The axes of the histogram and scatter plot do not align correctly

Open
#20,619 3 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

### Steps to Reproduce

I encountered an issue while trying to align the axes of a histogram and a scatter plot. The problem is that the x-axis and y-axis of the histogram do not correctly align with the corresponding axes of the scatter plot.

I created two histograms and one scatter plot, and all three use corresponding x-axis and y-axis ranges.
However, when rendering these three charts simultaneously, the axes of the histogram do not align correctly with those of the scatter plot. There is an offset or misalignment in the values on both the x-axis and y-axis.

Is there any way to ensure that the axes of these two charts align perfectly?

this is option: option.value = {
backgroundColor: '#FAFAFA',
dataset: [
{
source: chartData.value.actual_to_predicted
},
{
transform: {
type: 'ecStat:histogram',
config: {}
}
},
{
transform: {
type: 'ecStat:histogram', // 分箱 统计每个区间内的数据点数量
config: { dimensions: [1] }, // 表示将使用第二列来生成数据
}
}
],
tooltip: {},
grid: [
{ // 中间的散点图
top: '30%',
right: '30%'
},
{ // 上面的柱状图
bottom: '70%',
right: '30%'
},
{ // 右边的柱状图
top: '30%',
left: '70%'
}
],
xAxis: [
{
type: 'value',
scale: true,
gridIndex: 0,
min: xAxisMin,
max: xAxisMax,
},
{
type: 'category',
scale: true,
axisTick: { show: false },
axisLabel: { show: false },
axisLine: { show: false },
splitLine: { show: false },
gridIndex: 1,
},
{
scale: true,
axisTick: { show: false },
axisLabel: { show: false },
axisLine: { show: false },
splitLine: { show: false },
gridIndex: 2,
}
],
yAxis: [
{
scale: true,
type: 'value',
gridIndex: 0,
max: yAxisMax,
min: yAxisMin,
},
{
scale: true,
axisTick: { show: false },
axisLabel: { show: false },
axisLine: { show: false },
splitLine: { show: false },
gridIndex: 1,
},
{
scale: true,

type: 'category',
axisTick: { show: false },
axisLabel: { show: false },
axisLine: { show: false },
splitLine: { show: false },
gridIndex: 2,
}
],

### Current Behavior

![image](https://github.com/user-attachments/assets/d97555c5-4dc4-474e-9652-b701900270dc)

### Expected Behavior

one-to-one correspondence

### Environment

```markdown
OS: macOS Monterey
Browser: Chrome 96.0.4664.55
Framework Vue@3
```

### 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.