# Echarts双Y轴优化

image.png

image.png

``````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">
<meta charset="UTF-8">
<title>Title</title>
<script src="echarts.main.js"></script>
<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>

``````