学习使用echats实现双刻度echarts双Y轴，左右Y轴数据的方法
代码
DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
<meta charset="utf-8">
head>
<body style="height: 100%; margin: 0">
<div id="qipa_container" style="height: 100%">div>
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.4.3/files/dist/echarts.min.js">script>
<script type="text/javascript">
function calMax(arr) {
let max = 0;
arr.forEach((el) => {
el.forEach((el1) => {
if (!(el1 === undefined || el1 === '')) {
if (max < el1) {
max = el1;
}
}
})
})
let maxint = Math.ceil(max / 9.5);
let maxval = maxint * 10;
return maxval;
}
function calMin(arr) {
let min = 0;
arr.forEach((el) => {
el.forEach((el1) => {
if (!(el1 === undefined || el1 === '')) {
if (min > el1) {
min = el1;
}
}
})
})
let minint = Math.floor(min / 10);
let minval = minint * 10;
return minval;
}
var data1 = [59357.9, 52789.77, 24837.98, 14345.02, 2291.93],
data2 = [12108.81, 701.43, 1280.75, 2109.83, 18693.95],
data3 = [10, 20, 52.95, 42.25, 84.02],
data4 = [30, 105.79, 82.59, 264.73, 786.04]
var Min1 = calMin([data1, data2]), Min2 = calMin([data3, data4]),
Max1 = calMax([data1, data2]), Max2 = calMax([data3, data4]);
var dom = document.getElementById('qipa_container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {};
let option = {
grid: {left: '100', right: '100', bottom: '100', top: '100'},
color: ['#0698d6', '#fd8246', '#d773b4', '#41ac7c', '#e86367', '#aada9c'],
tooltip: {trigger: 'axis', axisPointer: {type: 'cross', crossStyle: {color: '#999'}}},
legend: {data: ['营业收入', '净利润', '营业收入同比增长率', '净利润同比增长率']},
xAxis: [{
type: 'category',
show: false,
lineWidth: 0,
axisPointer: {
type: 'shadow'
},
data: ["2013-12-31", "2014-12-31", "2015-12-31", "2016-12-31", "2017-12-31"]
}],
yAxis: [{
name: '单位：万元',
nameTextStyle: {color: '#999999'},
type: "value",
axisLine: {show: false},
axisTick: {show: false},
axisLabel: {verticalAlign: "bottom", color: "#999999"},
min: Min1,
max: Max1,
splitNumber: 5,
interval: (Max1 - Min1) / 5
}, {
name: '单位：%',
type: 'value',
nameTextStyle: {color: '#999999'},
axisLine: {show: false},
axisTick: {show: false},
axisLabel: {verticalAlign: "bottom", color: "#999999"},
min: Min2,
max: Max2,
splitNumber: 5,
interval: (Max2 - Min2) / 5
}],
series: [{name: '营业收入', type: 'line', data: data1},
{name: '净利润', type: 'line', data: data2},
{name: '营业收入同比增长率', type: 'line', yAxisIndex: 1, data: data3},
{name: '净利润同比增长率', type: 'line', yAxisIndex: 1, data: data4}
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);
script>
body>
html>
效果图
