如何压缩y轴展示 - echarts

示例

将源数据执行立方操作,本质是放大大数区间,再将y轴取立方根获取源数值,但会导致数据偏差;和对数坐标刚好相反

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
const data = [0, 32, 31, 33, 31, 34, 33];

option = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
yAxis: {
axisLabel: {
formatter: function (value, index) {
return Math.cbrt(value).toFixed();
},
},
},
tooltip: {
valueFormatter: function (value, index) {
return Math.cbrt(value).toFixed();
},
},
visualMap: {
dimension: 0,
pieces: [
{
lte: 2,
color: "orange",
},
{
gt: 2,
lte: 4,
color: "red",
},
{
gt: 2,
color: "cyan",
},
],
},
series: [
{
data: data.map((d) => d * d * d),
type: "line",
smooth: true,
},
],
};

如何压缩y轴展示 - echarts
https://wanmeishijie.xyz/notes/echarts/如何压缩y轴下方坐标/
作者
发布于
2024年3月14日
许可协议