效果图：
1694584449872.jpg
let option = {
title: {
// text: 'Stacked Line'
},
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' }
},
legend: {
data: ['应收', '应付', '毛利']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
axisTick: {
alignWithLabel: true
},
data: this.synthesizeList.date
},
yAxis: [
{// 第一种方式
type: 'value',
name: '应收/应付',
min: 0,
max: this.max,
position: 'left',
axisLabel: {
formatter: '{value}'
},
},
{//第二种方式
type: 'value',
name: '毛利',
min: 0,
max: 100,
position: 'right',
axisLabel: {
formatter: '{value} %'
}
}
],
series: [
{
name: '应收',
type: 'line',
yAxisIndex: 0, //使用上面yAxis配置得第一种，数组的第一个
data: this.synthesizeList.shippingNum
},
{
name: '应付',
type: 'line',
yAxisIndex: 0,//使用上面配置得第一种，数组的第一个
data: this.synthesizeList.waybillNum
},
{
name: '毛利',
type: 'line',
position: 'right',
yAxisIndex: 1,//使用上面yAxis配置得第一种，数组的第二个
// smooth: true,
data: this.synthesizeList.grossMargin,
},
]
};
