如何配置坐标轴的范围？

站长

2024年06月27日 09:12 · 阅读数 28

在双轴图里，右边的坐标轴表示的是百分比，这个百分比的范围可以手动配置吗？我用的是 vchart 的，我配置了min和 max 但是没有生效。如何配置坐标轴的范围？具体配置：

{
  type: 'common',
  seriesField: 'color',
  data: [
    {
      id: 'id0',
      values: [
        { x: '2021-10-22', type: 'A', y: 10 },
        { x: '2021-10-23', type: 'B', y: 22 },
      ]
    },
    {
      id: 'id1',
      values: [
        { x: '2021-10-22', type: 'TA', y: 0.5 },
        { x: '2021-10-22', type: 'TB', y: 1.1 },
        { x: '2021-10-23', type: 'TA', y: 1 },
        { x: '2021-10-23', type: 'TB', y: 1.5 },

      ]
    }
  ],
  series: [
    {
      type: 'bar',
      id: 'bar',
      dataIndex: 0,
      label: { visible: true ,position:'inside'},
      seriesField: 'type',
      xField: 'x',
      yField: 'y',
      max: 100 
    },
    {
      type: 'line',
      id: 'line',
      dataIndex: 1,
      label: { visible: true },
      seriesField: 'type',
      xField: 'x',
      yField: 'y',
      min: 0, 
      max: 2,
      stack: false
    }
  ],
  axes: [
    { orient: 'left', seriesIndex: [0] },
    { orient: 'right', seriesId: ['line'], gird: { visible: false }},
    { orient: 'bottom', label: { visible: true }, type: 'band' }
  ],
}

1个回答

test

2024-06-27

解决方案 Solution

轴范围的配置在 axes 配置项里，并不是在 series 上。你可以根据需要配置最小值（min）和最大值（max）, 例如：

  axes: [
    { orient: 'left', max: 100 },
    { orient: 'right', min:0, max:2 },
  ],

代码示例 Code Example

代码参考 Code Example

const spec = {
  type: 'common',
  seriesField: 'color',
  data: [
    {
      id: 'id0',
      values: [
        { x: '2021-10-22', type: 'A', y: 10 },
        { x: '2021-10-23', type: 'B', y: 22 },
      ]
    },
    {
      id: 'id1',
      values: [
        { x: '2021-10-22', type: 'TA', y: 0.5 },
        { x: '2021-10-22', type: 'TB', y: 1.1 },
        { x: '2021-10-23', type: 'TA', y: 1 },
        { x: '2021-10-23', type: 'TB', y: 1.6 },

      ]
    }
  ],
  series: [
    {
      type: 'bar',
      id: 'bar',
      dataIndex: 0,
      label: { visible: true ,position:'inside'},
      seriesField: 'type',
      xField: 'x',
      yField: 'y'
    },
    {
      type: 'line',
      id: 'line',
      dataIndex: 1,
      label: { visible: true },
      seriesField: 'type',
      xField: 'x',
      yField: 'y',
      stack: false
    }
  ],
  axes: [
    { orient: 'left', seriesIndex: [0], max: 100 },
    { orient: 'right', seriesId: ['line'], gird: { visible: false }, min:0, max:2 },
    { orient: 'bottom', label: { visible: true }, type: 'band' }
  ],
};

结果展示 Results

在线效果参考：https://codesandbox.io/s/dual-axis-custom-range-9r93h9

answer image

如何配置坐标轴的范围？

解决方案 Solution

代码示例 Code Example

结果展示 Results

相关文档 Related Documentation