在CSDN问答区，碰到一个有意思的问题，解决思路在这里记录一下。
需求为：进行四等份展示，即中间价差值 = (最大值 - 最小值) / 4，左侧数据从上到下分别为：最大值、最大值 - (最大值 - 最小值) / 4、最大值 - (最大值 - 最小值) / 2、最小值 + (最大值 - 最小值) / 4、最小值
例如有一组数据
[260, 132, 232, 123, 69, 33, 134]，默认显示是如下效果。
Echarts y轴的value值，会根据series的值来自动计算得出，此时设置yAxis.data.value是无效的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#chart {
width: 800px;
height: 600px;
margin: 40px auto;
}
</style>
</head>
<body>
<div id="chart"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.min.js"></script>
<script>
const data = [260, 132, 232, 123, 69, 33, 134]
const chart = echarts.init(document.getElementById('chart'))
chart.setOption({
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value',
},
series: [
{
data: data,
type: 'line'
}
]
})
</script>
</body>
</html>
无法设置data的value值，想来想去只能通过axisLabel的formatter 来做手脚了~
先写个方法把 y 轴值计算出来
// 通过规则计算得出 y 轴值
function computedNum(maxNum, minNum) {
const num1 = Math.round(minNum + (maxNum - minNum) / 4)
const num2 = Math.round(maxNum - (maxNum - minNum) / 2)
const num3 = Math.round(maxNum - (maxNum - minNum) / 4)
return [minNum, num1, num2, num3, maxNum]
}
const maxNum = Math.max(...data)
const minNum = Math.min(...data)
const numArr = computedNum(maxNum, minNum)
通过 formatter 强制渲染计算出的值
yAxis: {
type: 'value',
max: maxNum,
min: minNum,
splitNumber: 4,
axisLabel: {
formatter: (val, index) => {
// 通过这里强制返现自己计算出的数值
return numArr[index]
}
}
}
就变成上图这个样子，好像不太对劲，splitNumber不好使啊，官方是这么说明的
如何显示指定段数呢，这里固定了最大、最小值，计算出x段的分割间隔，是不是就能按照自定义段数显示了？
// 计算间隔值
function getInterval(arr, splitNumber) {
// 排序 sort会改变原数组，这里slice浅拷贝一下
const tempArr = arr.slice().sort((a, b) => a - b)
// 最大和最小值的距离
const distance = tempArr[tempArr.length - 1] - tempArr[0]
// 计算等分间隔值
const interval = distance / splitNumber
return interval
}
const interval = getInterval(data, 4)
// yAxis 配置改为如下
yAxis: {
type: 'value',
max: maxNum,
min: minNum,
interval: interval,
axisLabel: {
formatter: (val, index) => {
// 通过这里强制返现自己计算出的数值
return numArr[index]
}
}
}
最终实现了需求要的效果
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#chart {
width: 800px;
height: 600px;
margin: 40px auto;
}
</style>
</head>
<body>
<div id="chart"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.min.js"></script>
<script>
const data = [260, 132, 232, 123, 69, 33, 134]
// 通过规则计算得出 y 轴值
function computedNum(maxNum, minNum) {
const num1 = Math.round(minNum + (maxNum - minNum) / 4)
const num2 = Math.round(maxNum - (maxNum - minNum) / 2)
const num3 = Math.round(maxNum - (maxNum - minNum) / 4)
return [minNum, num1, num2, num3, maxNum]
}
const maxNum = Math.max(...data)
const minNum = Math.min(...data)
const numArr = computedNum(maxNum, minNum)
// 计算间隔值
function getInterval(arr, splitNumber) {
// 排序 sort会改变原数组，这里slice浅拷贝一下
const tempArr = arr.slice().sort((a, b) => a - b)
// 最大和最小值的距离
const distance = tempArr[tempArr.length - 1] - tempArr[0]
// 计算等分间隔值
const interval = distance / splitNumber
return interval
}
const interval = getInterval(data, 4)
const chart = echarts.init(document.getElementById('chart'))
chart.setOption({
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value',
max: maxNum,
min: minNum,
interval: interval,
axisLabel: {
formatter: (val, index) => {
// 通过这里强制返现自己计算出的数值
return numArr[index]
}
}
},
series: [
{
data: data,
type: 'line'
}
]
})
</script>
</body>
</html>
