如何在折线图上倾斜某些 y 轴值？

Question

我正在 ECharts 中构建折线图，但我想对 y 轴的特定范围进行倾斜/加权，使其大于线性范围。例如，我希望值 0-70 占据图表大小的 1/3，其余 70-100 占据图表大小的 2/3。我在图表方面没有太多经验，所以我对最佳方法有点迷失。

这里是我用来创建折线图的 ECharts 选项，也可在 此 Codesandbox 中找到：

import { format } from "date-fns";
import { createFakeValues } from "../utils";

const dataValues = createFakeValues({
  yValues: [29, 32, 35, 40, 47, 49, 50, 49, 48, 45, 43, 39, 35, 30, 27, 25, 24],
  startDate: new Date("2024-12-01T18:27:08.199Z"),
  dateDeltaMs: 1800000,
});

const eChartsDataValues = dataValues.map((dv) => [dv.date, dv.value]);

export const eChartsOptions = {
  dataset: [
    {
      source: eChartsDataValues,
      dimensions: ["timestamp", "value"],
    },
  ],
  xAxis: {
    type: "time",
  },
  yAxis: {
    min: 0,
    max: 50,
  },
  series: [
    {
      name: "Y Level",
      type: "line",
      smooth: true,
      datasetIndex: 0,
      showSymbol: false,
      encode: {
        x: "timestamp",
        y: "value",
      },
      markArea: {
        silent: true,
        emphasis: {
          disabled: true,
        },
        label: {
          fontSize: 12,
          textBorderColor: "transparent",
          position: "insideBottomLeft",
        },
        data: [
          [
            {
              name: "This is mathematically a shorter range (40-50), but it should take up the majority of space on the graph",
              yAxis: 40,
              itemStyle: {
                color: "red",
              },
            },
            {
              yAxis: 50,
            },
          ],
          [
            {
              name: "This is mathematically a bigger range (0-40) but should take up a smaller section of the graph",
              yAxis: 0,
              itemStyle: {
                color: "green",
              },
            },
            {
              yAxis: 40,
            },
          ],
        ],
      },
    },
  ],
};

Answer 1

据我所知，没有开箱即用的功能。我想到的唯一解决方案是在将数据传递到系列之前倾斜数据，并在显示实际值时恢复数据倾斜（axisLabel、工具提示等）。

示例：

const data = [10,20,30,40,50,60,70,80,90,100];

function skew(dataPoint) {
  if (dataPoint >= 0 && dataPoint <= 70) {
    return dataPoint * (100/70);
  } else if (dataPoint > 70 && dataPoint <= 100) {
    return 100 + (dataPoint - 70) * (200 / 30);
  } else {
    return 'NA';
  }
}

function unskew(dataPoint) {
  if (dataPoint >= 0 && dataPoint <= 100) {
    return dataPoint * (70/100);
  } else if (dataPoint > 100 && dataPoint <= 300) {
    return 70 + (dataPoint - 100) * (30/200);
  } else {
    return 'NA';
  }
}

option = {
  xAxis: {
    type: 'category',
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: (value) => unskew(value)
    }
  },
  series: [
    {
      type: 'line',
      data: data.map(dataPoint => skew(dataPoint))
    },
  ]
};

---

您还可以为 axisLabel 和 axisTick 添加自定义值。请参阅此示例。