Как я могу исказить определенные значения оси Y на линейном графике в ECharts? ⇐ Javascript

[Anonymous]

Я строю линейную диаграмму в ECharts, но хочу наклонить/взвесить определенный диапазон оси Y, чтобы он был больше, чем он был бы линейно. Например, я бы хотел, чтобы значения 0–70 занимали 1/3 размера диаграммы, а остальные 70–100 — 2/3. У меня нет большого опыта работы с диаграммами, поэтому я немного растерялся в выборе наилучшего подхода.


Вот параметры ECharts, которые я использую для создания линейный график, а также доступно в этой песочнице кодов:
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,
},
],
],
},
},
],
};



Подробнее здесь: https://stackoverflow.com/questions/793 ... in-echarts