要使用不同的 y 轴比例模拟多个系列,需要在 Apexcharts 中使用多个 y 轴。使用 chart
变量创建的图表对象具有 yaxis
数组属性,该属性定义了图表中的所有 y 轴。在其中每个对象中,你可以设置此轴的比例、标签和样式。 如果您需要使用两个以上的 y 轴,请在 yaxis
数组中定义适当数量的对象。
以下是一个示例,在其中创建了包含两个 y 轴的多个系列的折线图:
var options = {
series: [{
name: 'Sales',
type: 'line',
data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
}, {
name: 'Revenues',
type: 'line',
data: [35, 45, 55, 75, 82, 95, 110, 115, 125]
}, {
name: 'Expenses',
type: 'line',
data: [40, 50, 60, 80, 80, 100, 120, 130, 145]
}],
chart: {
height: 350,
type: 'line'
},
stroke: {
width: [3, 3, 3]
},
title: {
text: 'Multiple y-Axis Example'
},
yaxis: [
{
title: {
text: 'Sales'
},
min: 0,
max: 150,
},
{
opposite: true,
title: {
text: 'Revenues'
},
min: 0,
max: 150,
},
{
opposite: true,
title: {
text: 'Expenses'
},
min: 0,
max: 150,
},
],
}
var chart = new ApexCharts(document.querySelector("#chart"),