具体实现步骤:
配置双y轴
yAxis: [
{
type: 'value',
axisLabel: {
formatter: '{value}'
},
axisTick: {
show: false// 刻度
}
},
{
type: 'value',
axisLabel: {
formatter: '{value}%'
},
axisLine: {
show: false // 轴线
},
splitLine: {
show: false // 网格线
},
axisTick: {
show: false// 刻度
}
}
]
配置series
this.option.series = [
{
name: '平均金额',
type: 'line',
// smooth: true,
yAxisIndex: 0,//这里注意:0为第一轴;1为第二轴
data: [140, 232, 101, 264, 90]
},
{
name: '同比',
type: 'line',
// smooth: true,
yAxisIndex: 1,
lineStyle: {
type: 'dashed'
},
data: [100, 66, 88, 22, 77]
},
{
name: '环比',
type: 'line',
// smooth: true,
yAxisIndex: 1,
lineStyle: {
type: 'dashed'
},
data: [22, 55, 47, 38, 87]
}
]
配置好这两项后来看效果图
这里未选取第二轴折线情况下,去掉了x、y轴刻度线及第二y轴网格线、轴线,看起来简洁了不少
选取第二轴折线情况下只会出现第二轴轴线值