如何配置坐标轴的范围？

Question

在双轴图里，右边的坐标轴表示的是百分比，这个百分比的范围可以手动配置吗？我用的是 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' }
  ],
}

Answer 1

解决方案 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

相关文档 Related Documentation

更多 demo：https://visactor.io/vchart/demo/combination/dual-axis

轴教程：https://visactor.io/vchart/guide/tutorial_docs/Chart_Concepts...

相关api：https://visactor.io/vchart/option/lineChart#axes-linear.min

github：https://github.com/VisActor/VChart

Answer 2

坐标轴的最大/最小值不是通过 series 属性配置，而是 yAxis.min 和 yAxis.max （或者是 xAxis.min / xAxis.max），然后在 series 上指定对应的 yAxisIndex (或者是 xAxisIndex)，示例如下：

const option = {
  yAxis: [{
    min: 0,
    max: 100
  }, {
    min: 20,
    max: 80
  }],
  series: [{
    yAxisIndex: 0
  }, {
    yAxisIndex: 1
  }]
  // 其他属性省略...
};