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

Question

折线图有多条线, 如何让其中跟随在左轴, 其中一些跟随右轴?

Answer 1

解决方案

VChart图表已经提供了对应的功能。VChart支持：

• 在series上配置 dataId维护 data 与 series 的一对一关系。
• 在axis上配置 seriesId 维护 axis 与 series 的一对多关系。
  参考：折线图系列配置文档

代码示例

import { useEffect, useRef } from "react";import VChart from "@visactor/vchart";const Chart = () => {  const containerRef = useRef<HTMLDivElement>(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 (    <div      id="chart"      ref={containerRef}      style={{        width: 520,        height: 520,        border: "1px solid #ccc",      }}    ></div>  );};export { Chart };

结果展示

在线效果参考: https://codesandbox.io/p/sandbox/hopeful-cartwright-zdd95v?file=/src/Chart.tsx:1,1

相关文档

VChart Github
坐标轴 教程
组合图教程
折线图配置文档
双轴图示例Demo

Answer 2

yAxis改为数组就行, series 使用yAxisIndex属性指示使用哪个y轴

https://echarts.apache.org/examples/zh/editor.html?c=line-mar...

option = {  legend: {    data: ['销量（支）', '营业额（万元）']  },  dataset: {    source: [      ['2020年12月', 13700, 287],      ['2021年1月', 44820, 941],      ['2021年2月', 92850, 1950],      ['2021年3月', 1775800, 37291],      ['2021年4月', 3620600, 75825],      ['2021年5月', 6020600, 139000]    ]  },  tooltip: {    show: true  },  xAxis: {    type: 'category',    splitLine: {      show: false    }  },  yAxis: [    {      type: 'value',      name: '销量（支）',      splitLine: {        show: false      },      nameLocation: 'middle',      nameGap: 70    },    {      type: 'value',      name: '营业额（万元）',      splitLine: {        show: false      },      nameLocation: 'middle',      nameGap: 50    }  ],  series: [    {      name: '销量（支）',      type: 'line',      color: '#5470C6'    },    {      name: '营业额（万元）',      type: 'line',      yAxisIndex: 1,      color: '#FC8452',      label: {        position: [-35, -20],        show: true,        fontSize: 14,        color: '#FC8452'      }    }  ]};