折线图有多条线，如何设置右侧坐标轴，期望其中某条线是根据右侧坐标轴绘制?-灵析社区
你可以的拿捏了折线图有多条线, 如何让其中跟随在左轴, 其中一些跟随右轴?
我买了30万的鞋子解决方案
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)"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250110/3ea2495ca93a48cae281b1856cbefd4d.png)
相关文档
"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)