e-charts折线图，曲线末端箭头选中，上下拖动及缩放

需求：选中单独的一条曲线，可以上下移动参数位置或者鼠标滚轮缩放来调整参数的纵坐标

思路：

1.设置曲线末端箭头。

e-charts中可使用markPoint对数据点进行样式设置，末端箭头也可以说是将最后一个数据点设置为箭头，具体配置如下,通过具体x，y值定位数据点

{
    series:{
        markPoint: {

            symbol: 'triangle',
            symbolSize: 18,
            symbolRotate: 40, 
            data: [{
 
              xAxis: item.length - 1, // 末端点
              yAxis: item[item.length - 1].value
            }]
          }
    }
}

2.箭头选中，上下拖拽和缩放，点击空白处恢复原配置。

e-charts中内置有点击事件监听方法，但直接使用 myChart.on监听的点击事件只对曲线上的点击有效，在查询资料后发现e-charts使用ZRender内核渲染，故而本人使用myChart.getZr()获取ZRender实例对整个曲线图区域进行点击事件的绑定，并结合myChart.on实现需求效果

myChart.getZr().on('click', (e) => {

    let isClickChart = true
    myChart.on('click', function (params: any) {

      if (params.componentType === 'series') { //点击曲线时
        isClickChart = false

        let seriesName = params.seriesName;
        let seriesData = option.value.series.find(function (item) {
          return item.name === seriesName;
        }).data;
        
        // 计算最大最小值
        let max = Math.max.apply(null, seriesData.map(item =>  item.value)) * 2;
        //计算展示开始位置
        let min = Math.min.apply(null, seriesData.map(item => item.value));
        let start = (min/(2*max)*100).toFixed(2)
        //深拷贝配置项
        let curOption: any = cloneDeep(option.value)
        //点击时切换y轴坐标
        curOption.yAxis[1]={
          type: 'value',
          index: 1,
          position: 'left',
          name: seriesName,
          axisLine:{
            lineStyle:{
              color:params.color
            }
          },
          max:max,
          min:0,
        }
        curOption.dataZoom = {
          type: 'inside',
          yAxisIndex: [1],
          start:start,
          end:55,
        }
        curOption.series.forEach(el => {
          if (el.name === seriesName) {
            el.yAxisIndex= 1
          }else{
            el.lineStyle.opacity=0.1
          }
          
        });

        curOption.yAxis.show = true;
        // 更新配置
        myChart.setOption(curOption, true);
      } else if (params.componentType === 'markPoint') { //点击末端箭头时
        isClickChart = false

        let seriesName = params.name;
        let seriesData = option.value.series.find(function (item) {
          return item.name === seriesName;
        }).data;
   
        // 计算最大最小值
        let max = Math.max.apply(null, seriesData.map(item => item.value)) * 2;
        let min = Math.min.apply(null, seriesData.map(item => item.value));
        let start = (min/(2*max)*100).toFixed(2)
     
        let curOption: any = cloneDeep(option.value)
        curOption.yAxis[1]={
          type: 'value',
          index: 1,
          position: 'left',
          name: seriesName,   
          axisLine:{
            lineStyle:{
              color:params.color
            }
          },
          max:max,
          min:0,
        }
        curOption.dataZoom= {
          type: 'inside',
          yAxisIndex: [1],
          start:start,
          end:55,
        }
        curOption.series.forEach(el => {
          if (el.name === seriesName) {
            el.yAxisIndex= 1
          }else{
            el.lineStyle.opacity=0.1
          }
          
        });
        
        // 更新配置
        myChart.setOption(curOption, true);
      }
    })
     //移除myChart.on事件
    setTimeout(() => {
      myChart.off('click')
    }, 500)
    //未触发myChart.on，则为点击图表空白处
    if (isClickChart) {
      myChart.setOption(option.value, true);
      isClickChart = true
    }
  })