vue echarts 添加自定义标线

页面
<div ref="chartr1" id="chartr1" style="width: 100%; height:100%;"></div>

data() {
  return {
    myChartr1: null
  }
},

initChartr1(){
  let min = 50;
  let max = 20;

  // 若是echarts只想在当前页面引用，可以直接引入，然后修改即可！
  this.myChartr1 = echarts.init(document.getElementById('chartr1'));
  // 指定图表的配置项和数据
  let option = {
    xAxis: {
      type: 'category',
      data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '26', '26']
    },
                // 设置y轴 起始点
    yAxis: {
      type: 'value',
      min: min,
      max: max,
    },
        // 上下左右边界
    grid:{
      left: "2%",
      right: "2%",
      top:"5%",
      bottom:"2%",
    },
    series: [
      {
        markLine: {
          symbol:['circle', 'none'], //箭头显示 arrow /箭头隐藏 none
          data: [
            {
              yAxis: 20, // 表现自定义的位置，可赋值
              lineStyle: { type: 'solid', color: 'red', width: 1 } 
                                // 样式： 线型、颜色、线宽
            },
            {
              yAxis: 10, // 表现自定义的位置，可赋值
              lineStyle: { type: 'solid', color: 'green', width: 1 } 
                                // 样式： 线型、颜色、线宽
            },
          ],
        },
        data:  [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
      },

    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  this.myChartr1.setOption(option);
},