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

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'
      }
    }
  ]
};