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

把代码提供一下给我？

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)

数据是这种： 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~

参考一下这个例子：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();

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

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

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

下面的图不满足需求吗？

<img width="884" alt="image" src="https://github.com/antvis/G2/assets/49330279/774878b1-99d6-4b40-a439-375fc5bb3220">

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

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

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