折线图有多条线，如何设置右侧坐标轴，期望其中某条线是根据右侧坐标轴绘制?-灵析社区

## 解决方案 VChart图表已经提供了对应的功能。VChart支持： * 在series上配置 dataId维护 data 与 series 的一对一关系。 * 在axis上配置 seriesId 维护 axis 与 series 的一对多关系。 参考：[折线图系列配置文档](https://link.segmentfault.com/?enc=x%2BI3CT9oe%2FHTFAp8fmcZBA%3D%3D.9YHR1CNncfwjEQXPI1kq3Icfj4IZvwNikLMIj9DdrTS%2FIOv9HN7mvVnXh3rBFGf9TqvO2ExRW6saxEk%2Fr1bRMA%3D%3D) ## 代码示例 import { useEffect, useRef } from "react"; import VChart from "@visactor/vchart"; const Chart = () => { const containerRef = useRef(null); useEffect(() => { const spec = { type: "common", data: [ { id: "profit", values: [ { time: "2019", value: 100000 }, { time: "2020", value: 200000 }, { time: "2021", value: 300000 }, { time: "2022", value: 400000 }, { time: "2023", value: 500000 }, ], }, { id: "saleDiscount", values: [ { time: "2019", value: 0.2 }, { time: "2020", value: 0.35 }, { time: "2021", value: 0.25 }, { time: "2022", value: 0.2 }, { time: "2023", value: 0.1 }, ], }, ], axes: [ { orient: "left", seriesId: ["profit"], id: "left", }, { sync: { axisId: "left", tickAlign: true, zeroAlign: true, }, id: "right", label: { formatMethod: (v) => parseFloat(v).toFixed(2), }, orient: "right", seriesId: ["saleDiscount"], }, { orient: "bottom", seriesId: ["saleDiscount", "profit"], }, ], series: [ { id: "profit", type: "line", xField: "time", yField: "value", dataId: "profit", }, { id: "saleDiscount", type: "line", xField: "time", yField: "value", dataId: "saleDiscount", }, ], }; const vchart = new VChart(spec, { dom: "chart" }); vchart.renderAsync(); return () => vchart.release(); }, []); return ( ); }; export { Chart }; ## 结果展示 在线效果参考: [https://codesandbox.io/p/sandbox/hopeful-cartwright-zdd95v?file=/src/Chart.tsx:1,1](https://link.segmentfault.com/?enc=dj%2Ftowao91mU8AxCNHkBfw%3D%3D.CNg%2FAbTnfqANuzC1COcW%2F56KvS7ZXnQQuYzqfjqRHC3Qa2K70CTd2WuJ9HDRyF4DPpXU5FBirwei8%2BJwR5lLne4IgRo%2BJZ%2BCFaMQDzhyQGNjmab%2F2gKaPX1j4kws4qz0) ## 相关文档 [VChart Github ](https://link.segmentfault.com/?enc=9%2BxrdlkdunECr56litEQFA%3D%3D.4YoJLoyyLs%2BodmF44e0Ve0dTG%2BqT3vcHDLk7CGB8VKFRmM2hZMg%2BJOG8R%2FnsdxOs) [坐标轴 教程](https://link.segmentfault.com/?enc=p9MnYntQXGiGEWPCJj99Ag%3D%3D.Tvf%2F1Wbl4ybI5o3dQaRz3VcTZY1f9O%2F8FSlJPBgC1JcL%2Br2g1KO7NELdnvgq4aZi9%2Bun0pKDLw2KJ0XkPqA72eAdc%2Fvxkx8gMLTaWwKH0qA%3D) [组合图教程](https://link.segmentfault.com/?enc=aSu2UZEGXSn3OvYedQ5WHw%3D%3D.S8klKE18svbIbx%2BCz5AzBE%2BieAF4gYI6oPeXe%2FIc1XC2KaJDrjIuzDxyDNmfl20m%2BelmoqvnaVwO7opwZazVC1ZVyFPiNC6yroowIJgjfeo%3D) [折线图配置文档](https://link.segmentfault.com/?enc=XeC0SXaLGzOVyqipKVc5XQ%3D%3D.EA7sh71c2X02VW48F4t4yi1bOKbHJ27SbyOVHMAMIUmacPBFge3GEFkeJ%2FgAn5nA66oaiqsurGR4EZNfTecFOg%3D%3D) [双轴图示例Demo](https://link.segmentfault.com/?enc=c6skZ3HpiN6frpkHRVFINw%3D%3D.XZhVqyQKBLnYf2eugK9tf48NYVA3cfNBZ1noJLn1OxEQ1KOV7F6wqWXsk%2FTmtUo%2BPbyMibVmGDivwX8MJboiaQ%3D%3D)