#如何设置双y轴，每个轴都对应多条曲线，并且曲线的legend可以正常控制对应的曲线指标#

[Dana0915]

[weepy3641]

@Dana0915
可以的，参考 双周图表
https://bizcharts.net/products/bizCharts/demo/detail?id=g2-double-axes&selectedKey=%E6%A6%82%E8%A7%88

geom type 改为 line，然后设置下 type 属性。多line类似 demo：
https://bizcharts.net/products/bizCharts/demo/detail?id=line-curved&selectedKey=%E6%8A%98%E7%BA%BF%E5%9B%BE

[weepy3641]

可以参考demo
https://codepen.io/anon/pen/JmwgRQ?editors=1010

[Dana0915]

@weepy3641 你好：

谢谢解释，图表的合并我已经实现了，但是我遇到的问题是下面legend我使用的自定义的，但是因为投资人数和投资笔数合成一个value字段了，所以点击没有反应应为找不到对应的key。

附上代码如下：
`import React from 'react';
import { Chart, Tooltip, Geom, Legend, Axis } from 'bizcharts';
import DataSet from '@antv/data-set';
import autoHeight from '../autoHeight';
import styles from '../LineChart/index.less';
import { markSize } from '../../../constants/chartConstants';
@autoHeight()
export default class SimpleLineChart extends React.Component {

render() {
const {
height = 500,
padding = [60, 60, 60, 80],
// titleMap = ['y1'],
borderWidth = 2,
data = [
{
x: 0,
y1: 0,
y2: 0,
y3: 0,
y4: 0,
},
],
titleTip,
} = this.props;

const ds = new DataSet();
const dv = ds.createView();
dv
  .source(data)
  .transform({
    type: 'map',
    callback(row) {
      return row;
    },
  })
  .transform({
    type: 'fold',
    fields:['投资笔数','投资人数'], // 展开字段集
    key: 'key', // key字段
    value: 'value', // value字段
  });

const cols = {
  x: {
    range: [0, 1],
  },
  value: {
    // max: 100,
    min: 0,
  },
  投资金额:{
    min:0,
  },
};
let chartIns = null;
return (
  <div className={styles.lineChart} style={{ height }}>
    <div>
      <h3 style={{ marginLeft: 20, marginBottom: -32 }}>趋势图</h3>
      <Chart
        height={height}
        padding={padding}
        data={dv}
        scale={cols}
        forceFit
        onGetG2Instance={chart => {
          chartIns = chart;
        }}
      >
        <Axis name="x" />
        <Tooltip crosshairs={{ type: 'y' }} />
        <Legend
          custom
          allowAllCanceled
          items={[
            {
              value:'投资笔数',
              marker: {
                symbol: "circle",
                fill: "#66BCFF",
                radius: 5,
              },
            },
            {
              value:'投资人数',
              marker: {
                symbol: "circle",
                fill: "#19D5B2",
                radius: 5,
              },
            },
            {
              value: "投资金额",
              marker: {
                symbol: "circle",
                fill: "#FF8463",
                radius: 5,
              },
            },
          ]}
          onClick={ev => {
            const {item} = ev;
            const {value} = item;
            const {checked} = ev;
            const geoms =chartIns?chartIns.getAllGeoms():[];
            for (let i = 0; i < geoms.length; i+=1) {
              const geom = geoms[i];
              if (geom.getYScale().field === value) {
                if (checked) {
                  geom.show();
                } else {
                  geom.hide();
                }
              }
            }
          }}
        />
        <Geom
          type="line"
          position="x*value"
          size={borderWidth}
          color='key'
          tooltip={[
            'key*value',
            (key, value) => {
              return {
                title: `${titleTip}`,
                name: key,
                value:`${value.toLocaleString()}${key==='投资人数'?'人':'笔'}`,
              };
            },
          ]}
        />
        <Geom
          type="line"
          position="x*投资金额"
          size={borderWidth}
          color='#FF8463'
          tooltip={[
            'key*投资金额',
            (key, 投资金额) => {
              return {
                title: `${titleTip}`,
                name: '投资金额',
                value: (投资金额>10000? `${(投资金额/10000).toLocaleString()}万元`:`${投资金额.toLocaleString()}元`),
              };
            },
          ]}
        />
        <Geom
          type="point"
          position="x*value"
          size={markSize}
          shape="circle"
          color='key'
          style={{ stroke: '#fff', lineWidth: 1 }}
          tooltip={[
            'key*value',
            (key, value) => {
              return {
                title: `${titleTip}`,
                name: key,
                value: value.toLocaleString(),
              };
            },
          ]}
        />
        <Geom
          type="point"
          position="x*投资金额"
          size={markSize}
          shape="circle"
          color='#FF8463'
          style={{ stroke: '#fff', lineWidth: 1 }}
          tooltip={[
            'key*投资金额',
            (key, 投资金额) => {
              return {
                title: `${titleTip}`,
                name: '投资金额',
                value: (投资金额>10000? `${(投资金额/10000).toLocaleString()}万元`:`${投资金额.toLocaleString()}元`),
              };
            },
          ]}
        />
        <Axis
          name="value"
          title
          label={{
            formatter(text) {
              if (text && typeof text === 'string') {
                const val = parseInt(text, 10);
                return val.toLocaleString();
              }
              return text;
            },
          }}
        />
        <Axis
          key="投资金额"
          name="投资金额"
          title
          label={{
          formatter(text) {
              if (text && typeof text === 'string') {
                const val = parseInt(text, 10)>10000?parseInt(text, 10)/10000:parseInt(text, 10);
                return val.toLocaleString();
              }
              return text;
            },
          }}
        />
      </Chart>
    </div>
  </div>
);

}
}
`

[weepy3641]

@Dana0915
参考demo
https://codepen.io/anon/pen/MPRmqR

[Dana0915]

@weepy3641 谢谢大神，已完美解决。。。。 。。

[shufangu]

双周曲线https://bizcharts.net/products/bizCharts/demo/detail?id=g2-double-axes&selectedKey=%E6%A6%82%E8%A7%88， legend点击的时候能实现动画效果吗

[weepy3641]

@shufangu
暂时不能哦。