v-charts 3个Y轴

首先 :yAxis, :extend

<ve-line
  :data="chartData"
  :settings="quantityChartSettings"
  :extend="chartExtend"
  :yAxis="yAxis"
  width="1740px"
  height="570px"
  style="margin-left: 50px">
</ve-line>

通过yAxis设置多个y轴

data() {
	this.yAxis = [
          {
            type: 'value',
            name: '总价(元)',
            position: 'left', // Y轴在图表中的左侧还是右侧
            show: true,
            nameTextStyle: {
              padding: [0, 0, 0, 20] // 上 右 下 左
            },
            axisLine: {
              lineStyle: {
                color: '#675bba'
              }
            },
            scale: 'true'
          },
          {
            type: 'value',
            name: '数量(个)',
            position: 'left',
            show: true,
            nameTextStyle: {
              padding: [0, 0, 0, 0]
            },
            offset: -80,    // 轴的偏移量
            axisLine: {
              lineStyle: {
                color: '#5793f3'
              }
            },
            scale: 'true'
          },
          {
            type: 'value',
            name: '订单量(张)',
            position: 'left',
            show: true,
            nameTextStyle: {
              padding: [0, 0, 0, 0]
            },
            offset: -160,
            axisLine: {
              lineStyle: {
                color: '#d14a01'
              }
            },
            scale: 'true'
          }
      ]

	return {
		chartData: {
        	columns: ['日期', '总价', '数量', '订单量'],
        	rows: []
      	}
	}
}

然后通过chartExtend中的series()为各Y轴传入数据

this.chartExtend = {
  xAxis: {
    axisLabel: {
      interval: 0, rotate: 45, margin: 20
    }
  },

// 必须在这里通过series() 为各个轴传入数据
// 自己打印一下item看看, item为一个数组
// 通过.yAxisIndex指定该组数据所属于的y轴, 编号顺序与yAxis设置的y轴顺序一致
  series (item) {
    // console.log(item)
    item.forEach(a => {
      if (a.name === '总价') {
        a.yAxisIndex = 0
      } else if (a.name === '数量') {
        a.yAxisIndex = 1
      } else if (a.name === '订单量') {
        a.yAxisIndex = 2
      }
    })
    return item
  }
}