scale属性

ticks是固定的值，如果值域有上限，就用 ticks
max-min是区间值，不固定，如果值的上限不确定，就用 max-min

ticks

ticks是固定的值

  1. // 双 Y轴，左侧百分比，右侧动态适应
  2. const ticks = [0, 8, 16, 24, 32];
  3. const scale = {
  4.   percent: {
  5.     alias: '百分比',
  6.     type: 'linear',
  7.     formatter: val => `${val} %`,
  8.     tickCount: 5,
  9.     ticks: [0, 25, 50, 75, 100],
  10.   },
  11.   total: {
  12.     alias: '总量',
  13.     type: 'linear',
  14.     formatter: val => `${val} GB`,
  15.     tickCount: 5,
  16.     ticks,
  17.   },
  18.   free: {
  19.     alias: '空闲',
  20.     type: 'linear',
  21.     formatter: val => `${val} GB`,
  22.     tickCount: 5,
  23.     ticks,
  24.   },
  25.   used: {
  26.     alias: '已使用',
  27.     type: 'linear',
  28.     formatter: val => `${val} GB`,
  29.     tickCount: 5,
  30.     ticks,
  31.   },
  32.   time: {
  33.     alias: '时间',
  34.     type: timeCat ? 'timeCat' : 'time',
  35.     formatter: val => formatDate(val),
  36.     tickCount: 6,
  37.     nice: false,
  38.   },
  39. };
  41. <Chart
  42.   forceFit
  43.   data={data}
  44.   padding={padding}
  45.   scale={scale}
  46.   height={320}
  47. />

max-min自适应

  1. // 获取最大值
  2. function getMaxValue(data) {
  3.   if (!Array.isArray(data)) return 100;
  4.   const total = data.map(it => it.total);
  5.   return Math.max(...total);
  6. }
  8. const scale = {
  9.   percent: {
  10.     alias: '百分比',
  11.     type: 'linear',
  12.     formatter: val => `${val} %`,
  13.     tickCount: 5,
  14.     ticks: [0, 25, 50, 75, 100], // 百分比
  15.   },
  16.   total: {
  17.     alias: '总量',
  18.     type: 'linear',
  19.     formatter: val => `${val} GB`,
  20.     tickCount: 5,
  21.     min: 0,
  22.     max,
  23.   },
  24.   used: {
  25.     alias: '已使用',
  26.     type: 'linear',
  27.     formatter: val => `${val} GB`,
  28.     tickCount: 5,
  29.     min: 0,
  30.     max,
  31.   },
  32.   time: {
  33.     alias: '时间',
  34.     type: timeCat ? 'timeCat' : 'time',
  35.     formatter: val => formatDate(val),
  36.     tickCount: 6,
  37.     nice: false,
  38.   },
  39. };
  41. <Chart
  42.   forceFit
  43.   data={data}
  44.   padding={padding}
  45.   scale={scale}
  46.   height={320}
  47. />