VUE之Echarts可视化图表双Y轴配置详解

具体实现步骤：
配置双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轴网格线、轴线，看起来简洁了不少

选取第二轴折线情况下只会出现第二轴轴线值