v-charts基本配置、双y轴配置

1 上图

2代码

<ve-line :data="testdata" :after-config="afterConfig" :settings="chartSettings1" ></ve-line>

//vue中的data加入如下代码：

      testdata: {
        columns: ['日期', 'key1', 'key2', 'key3'],
        rows: [
          {'日期': '2021-03-01', 'key1': 400, 'key2': 300, 'key3': 30},
          {'日期': '2021-03-02', 'key1': 500, 'key2': 400, 'key3': 25},
          {'日期': '2021-03-03', 'key1': 600, 'key2': 500, 'key3': 15},
          {'日期': '2021-03-04', 'key1': 700, 'key2': 600, 'key3': 10},
          {'日期': '2021-03-05', 'key1': 700, 'key2': 500, 'key3': 15},
          {'日期': '2021-03-06', 'key1': 1000, 'key2': 600, 'key3': 5},
        ]
     },
     chartSettings1: {
        axisSite: { right: ['key3'] }, //我希望折线图上面的key3是关联右侧的y轴，key1和key2则默认是关联左侧的y轴
     },

//vue的method中加入如下代码

afterConfig (options) {
	  let that = this
      options.series[0].smooth = false //smooth 设置折线的平滑 因为我有三根折线
      options.series[1].smooth = false
      options.series[2].smooth = false
      // 设置你的左侧y轴
      options.yAxis[0] = {
			type: 'value',
			name: '数量',
			min: 0,
			max: 1000, //左侧y轴最大数值
			axisLabel: {
				formatter: '{value}', //设置你的左侧y轴的数值展现形式
				textStyle: {
					color: "black" //y轴文字样式
				}
			},
			axisLine: {
				show: true //显示y轴
			},
			splitLine: { //网格线
				show: true
			}
	  },
      // 设置你的右侧y轴
      options.yAxis[1] = {
			type: 'value',
			name: '比例',
			min: 0,
			max: 30, //y轴的比例最大值
			axisLabel: {
				formatter: '{value}%',//设置你的右侧y轴的数值展现形式
				textStyle: {
					// color: "black"
				}
			},
			axisLine: {
				show: true //显示y轴
			},
			splitLine: { 
				show: false //网格线
			}
	   }
	   // 当你的鼠标放在折线图上面的折线时候，数据显示的形式。比如要不要加百分号%，都可以通过下面的tooltip设置
	  options.tooltip = {
         trigger: 'axis',
         formatter: function(params){
			let res='<div><p>时间：'+params[0].axisValueLabel+'</p></div>' 
			for(var i = 0;i < params.length; i++){
				if (params[i].seriesName === 'key1') {
					res += '<p>' + params[i].seriesName + ' : ' + params[i].data + '</p>'
				}else if(params[i].seriesName === 'key2'){
					res += '<p>' + params[i].seriesName + ' : ' + params[i].data + '</p>'
				}else{
					res += '<p>' + params[i].seriesName + ' : ' + params[i].data + '%' + '</p>'
				}
			}
			return res;
		}
      }
      return options
    },

3更多的配置可以参考https://www.jianshu.com/p/ae9d8c807c11