前面写过双Y轴的处理，方法并不好，项目中又使用到了，不能潦草完事。对双Y轴又做了优化处理，但是并不是最终想要的结果。
现在主要实现了双Y轴的均分，但是每份的刻度还是可以优化的。暂时不折腾了
效果图：
image.png
image.png
核心就是取数组中的最大值，最小值，然后进行均分，限制是均分5等份。
假如最大值不能被5整除，那就向上取值。
如何向上取，下面适配了，最多三位小数的数据。
比如：
数组中最大值0.4，则向上取值，为0.5，最大值0.6时，则向上取值为1
数组中最大值16，则向上取值，为20，最大值73时，则向上取值为75
数组中最大值135，则向上取值，为185，最大值826时，则向上取值为880
核心方法：
function getMaxMin (v) {
v = v < 0 ? -v : v
return v < 1 ? getDecimalValue(v) : getIntegerValue(v)
}
小数时向上取整
function getDecimalValue (v) {
let result = 0
if (v < 1 && v * 10 >= 1) {
v = v * 10
result = 5 - v % 5 + v
result = result / 10
}
if (v * 10 < 1 && v * 100 >= 1) {
v = v * 100
result = 5 - v % 5 + v
result = result / 100
}
if (v * 100 < 1 && v * 1000 >= 1) {
v = v * 1000
result = 5 - v % 5 + v
result = result / 1000
}
return result
}
正数时向上取整
function getIntegerValue (v) {
let result = 0
result = 5 - v % 5 + v
if ((String(parseInt(v)).length > 2)) {
result = result + 5 * 10 ** (String(parseInt(v)).length - 2)
}
return result
}
栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="echarts.main.js"></script>
</head>
<body>
<div id="echart" style="width: 500px;height: 500px;"></div>
<script>
// let arr = [0.004, 0.0012, 0.0011, -0.02, 0.001,0.005,-0.04,0.0089]
// let arr = [0.04, 0.012, 0.011, -0.013, 0.01, 0.05, -0.06, 0.089]
// let arr2 = [0.24, 0.12, 0.11, 0.13, 0.1,0.54,0.66,0.42,0.88,0.97]
// let arr = [4.2, -3.5, 8.9, -9.7, 1.5, -0.25, 6, 10]
// let arr2 = [4, 8, 3, 4, 1, 3, 2, 12, 24, 37, 55, 40, 55, 12, 45, 20, -0.5, -0.6, -0.8, -0.10, -0.24, -0.35, -0.41]
// let arr = [-210, -158, 0, 48, 468, 125, 388, 56, 751, 849, 922]
let arr = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 943.11, 1926.04, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 687.29, 1288.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 77.02, 22.57, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1953.49, 987.19]
let arr2 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 11.21, 1.75, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8.17, 1.17, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3.94, 2.29, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 207.13, 51.25, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 137, 149]
let max = Math.max.apply(null, arr)
let min = Math.min.apply(null, arr)
let rMax = getMaxMin(max)
let rMin = min < 0 ? getMaxMin(min) : 0
let max2 = Math.max.apply(null, arr2)
let min2 = Math.min.apply(null, arr2)
let rMax2 = getMaxMin(max2)
let rMin2 = min < 0 ? getMaxMin(min2) : 0
function getMaxMin (v) {
v = v < 0 ? -v : v
return v < 1 ? getDecimalValue(v) : getIntegerValue(v)
}
function getDecimalValue (v) {
let result = 0
if (v < 1 && v * 10 >= 1) {
v = v * 10
result = 5 - v % 5 + v
result = result / 10
}
if (v * 10 < 1 && v * 100 >= 1) {
v = v * 100
result = 5 - v % 5 + v
result = result / 100
}
if (v * 100 < 1 && v * 1000 >= 1) {
v = v * 1000
result = 5 - v % 5 + v
result = result / 1000
}
return result
}
function getIntegerValue (v) {
let result = 0
result = 5 - v % 5 + v
if ((String(parseInt(v)).length > 2)) {
result = result + 5 * 10 ** (String(parseInt(v)).length - 2)
}
return result
}
var myChart = echarts.init(document.getElementById('echart'))
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: []
},
yAxis: [
{
min: -rMin,
max: rMax,
interval: (rMax + rMin) / 5
},
{
min: -rMin2,
max: rMax2,
interval: (rMax2 + rMin2) / 5
}
],
series: [{
name: '销量',
type: 'bar',
data: arr
},
{
type: 'line',
yAxisIndex: 1,
data: arr2
}
]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
</script>
</body>
</html>
网友评论