bizcharts 分面图

Question

我是用bizchart

我想实现这个效果

注意看Y轴

相同距离下的值不一样，我希望y轴下方的刻度间居也是一个 200，然后占更大的地方，该怎么处理 怎么处理

源码

import React from "react";
import {
  Chart,
  Line,
  Point,
  Tooltip,
  Axis,
  Interaction,
  Legend,
  Interval,
  Annotation,
  Facet,
} from "bizcharts";
import DataSet from "@antv/data-set";

export default function FlowBar() {
  const tmp = [];
  const dates = [];

  const ds = new DataSet();
  const dv = ds
    .createView()
    .source(tmp)
    .transform({
      type: "filter",

      callback(row) {
        // 判断某一行是否保留，默认返回true
        return (
          new Date(row.date * 1000).getFullYear() ===
          new Date(dates[0] * 1000).getFullYear()
        );
      },
    });

  const dataT = [
    {
      direction: "up",
      data: 200,
      type: "ipv4",
    },
    {
      direction: "down",
      data: 300,
      type: "ipv4",
    },
    {
      direction: "up",
      data: 500,
      type: "ipv6",
    },
    {
      direction: "down",
      data: 2500,
      type: "ipv6",
    },
  ];
  const scale = {
    type: {
      sync: true,
      tickCount: 11,
    },
    data: {
      range: [0, 0.8],
      // formatter(v) {
      //   return `${v}%`;
      // },
    },
    direction: {
      sync: true,
    },
  };

  return (
    <Chart height={600} data={dataT} scale={scale} autoFit padding={50}>
      <Tooltip />
      <Facet
        type="mirror"
        fields={["direction"]}
        // showTitle={false}
        // transpose
        padding={0}
        eachView={(view, facet) => {
          console.log(view, facet);
          view
            .interval()
            .position("type*data")
            .color("type", (type) => {
   

            if (type === "ipv4") {
              return "red"
            }

            })
            .label("data", { textAlign: "end" });
        }}
      />
    </Chart>
  );
}

Answer 1

解决思路应该是 同个Chart用的应该是一个刻度尺
我在文档 Scale 度量 里找到了一个log类型，大概可以实现

// 新增type和base属性
const scale = {
    data: {
      type: 'log',
      base: 200,
    },
};

不过我觉得不太完美 你可以再去文档里看一下