Wie kann ich bestimmte Y-Achsenwerte in einem Liniendiagramm in ECharts verzerren? ⇐ JavaScript

[Guest]

Ich erstelle ein Liniendiagramm in ECharts, möchte aber einen bestimmten Bereich der Y-Achse verzerren/gewichten, damit er größer ist, als er linear wäre. Beispielsweise möchte ich, dass die Werte 0–70 1/3 der Diagrammgröße einnehmen und die restlichen 70–100 2/3. Ich habe nicht viel Erfahrung mit der Erstellung von Diagrammen und weiß daher nicht, welcher Ansatz am besten geeignet ist.


Hier sind die ECharts-Optionen, die ich zum Erstellen verwende das Liniendiagramm, auch hier verfügbar Codesandbox:

Code: Select all

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,
},
],
],
},
},
],
};