怎么让2个柱状图、折线图、点图能公用一个 y 轴，折线图和点图的位置在中间，柱状图分两边

[YY88Xu]

问题描述

现在的实现会有错位

重现链接

No response

重现步骤

No response

预期行为

No response

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[pearmini]

把代码提供一下给我？

[YY88Xu]

eeChart
  .interval()
  .encode('x', 'MonthlyDate')
  .encode('y', 'OnboardedNum')
  .encode('series', () => 'OnboardedNum')
  .encode('key', 'OnboardedNum')
  .encode('color', OnboardedNumMap.color)
  .encode('label', OnboardedNumMap.label)


eeChart
  .interval()
  .encode('x', 'MonthlyDate')
  .encode('y', 'DimissionNum')
  .encode('series', () => 'DimissionNum')
  .encode('key', 'DimissionNum')
  .encode('color', DimissionNumMap.color)
  .encode('label', DimissionNumMap.label)

eeChart
  .line()
  .encode('x', 'MonthlyDate')
  .encode('y', 'DimissionNum')
  .encode('color', AbsoluteFlowNumMap.color)


eeChart
  .point()
  .encode('x', 'MonthlyDate')
  .encode('y', 'DimissionNum')
  .encode('color', AbsoluteFlowNumMap.color)

[YY88Xu]

数据是这种：
const data = [{"MonthlyDate":"2023年1月","OnboardedNum":3,"DimissionNum":2,"AbsoluteFlowNum":150},{"MonthlyDate":"2023年2月","OnboardedNum":30,"DimissionNum":30,"AbsoluteFlowNum":100},{"MonthlyDate":"2023年3月","OnboardedNum":30,"DimissionNum":40,"AbsoluteFlowNum":75},{"MonthlyDate":"2023年4月","OnboardedNum":75,"DimissionNum":50,"AbsoluteFlowNum":150},{"MonthlyDate":"2023年5月","OnboardedNum":30,"DimissionNum":60,"AbsoluteFlowNum":50},{"MonthlyDate":"2023年6月","OnboardedNum":35,"DimissionNum":70,"AbsoluteFlowNum":50},{"MonthlyDate":"2023年7月","OnboardedNum":40,"DimissionNum":80,"AbsoluteFlowNum":50},{"MonthlyDate":"2023年8月","OnboardedNum":80,"DimissionNum":90,"AbsoluteFlowNum":89},{"MonthlyDate":"2023年9月","OnboardedNum":50,"DimissionNum":100,"AbsoluteFlowNum":50},{"MonthlyDate":"2023年10月","OnboardedNum":55,"DimissionNum":110,"AbsoluteFlowNum":50}]
两个柱状图 y 值分别取 OnboardedNum 和 DimissionNum，然后点图和现状图的取 DimissionNum~

[pearmini]

参考一下这个例子：https://g2.antv.antgroup.com/examples/general/dual/#dual-axis-line-bar， 把 line 和 point 的 encode('color', ...) 变成 style('color', ...)。

import { Chart } from '@antv/g2';

const eeChart = new Chart({
  container: 'container',
  autoFit: true,
});

const data = [{"MonthlyDate":"2023年1月","OnboardedNum":3,"DimissionNum":2,"AbsoluteFlowNum":150},{"MonthlyDate":"2023年2月","OnboardedNum":30,"DimissionNum":30,"AbsoluteFlowNum":100},{"MonthlyDate":"2023年3月","OnboardedNum":30,"DimissionNum":40,"AbsoluteFlowNum":75},{"MonthlyDate":"2023年4月","OnboardedNum":75,"DimissionNum":50,"AbsoluteFlowNum":150},{"MonthlyDate":"2023年5月","OnboardedNum":30,"DimissionNum":60,"AbsoluteFlowNum":50},{"MonthlyDate":"2023年6月","OnboardedNum":35,"DimissionNum":70,"AbsoluteFlowNum":50},{"MonthlyDate":"2023年7月","OnboardedNum":40,"DimissionNum":80,"AbsoluteFlowNum":50},{"MonthlyDate":"2023年8月","OnboardedNum":80,"DimissionNum":90,"AbsoluteFlowNum":89},{"MonthlyDate":"2023年9月","OnboardedNum":50,"DimissionNum":100,"AbsoluteFlowNum":50},{"MonthlyDate":"2023年10月","OnboardedNum":55,"DimissionNum":110,"AbsoluteFlowNum":50}]

eeChart.data(data);

eeChart
  .interval()
  .encode('x', 'MonthlyDate')
  .encode('y', 'OnboardedNum')
  .encode('series', () => 'OnboardedNum')
  .encode('key', 'OnboardedNum')
  .encode('color', 'orange')


eeChart
  .interval()
  .encode('x', 'MonthlyDate')
  .encode('y', 'DimissionNum')
  .encode('series', () => 'DimissionNum')
  .encode('key', 'DimissionNum')
  .encode('color', 'yellow')

eeChart
  .line()
  .encode('x', 'MonthlyDate')
  .encode('y', 'DimissionNum')
  .style('color', 'blue')


eeChart
  .point()
  .encode('x', 'MonthlyDate')
  .encode('y', 'DimissionNum')
  .style('color', 'blue')

eeChart.render();

[YY88Xu]

这个例子看过了，跟我要的不太一样呢。
我们只要一个 y 轴的

[pearmini]

不是设置两个 y 轴就行了，参考我上面给出的代码。

[YY88Xu]

设计给的图是只要一个 y 轴的，也就是两个柱状图，点图、折线图公用一个 y 轴，保证刻度比例尺一致。
设置两个 y 轴，数据刻度比例尺不一致，点的位置会不准的

[pearmini]

下面的图不满足需求吗？

[YY88Xu]

感谢感谢，可以了。
为什么 encode('color', 'blue') 这种不行呢

[pearmini]

为什么 encode('color', 'blue') 这种不行呢

这样会给 series 比例尺多增加一个 domain，所以导致每组会有三个条，看上去就偏移了。