折线图点击跳转

项目中遇到一个需求为折线图点击某一个跳转页面，但是存在问题是多条折线图可能存在拐点之间的重合。

实现逻辑：使用tooltip（悬浮框实现跳转）

代码：

设置tooltip可鼠标移入

tooltip: {
            trigger: "axis",//坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
            triggerOn: 'click',//可点击
            enterable:true,//鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true
            alwaysShowContent: false,//总是展示
            backgroundColor:'#fff',//背景色
            borderColor:'#eee',//边框颜色
            borderWidth:'0.5',//边框宽度
            position: function (point) {
              console.log(point);
              return ['40%', '20%']  //返回x、y（横向、纵向）两个点的位置
            },
            formatter: (params)=> {
              let html = '<div>'
              // ${this.htmlspecialchars(JSON.stringify(this)
              params.forEach((i) => {
                if (i.seriesName) {
                    html += `
                      <div>
                        <span>${i.name}</span>
                        <span>${i.seriesName}</span>
                        <span>（${i.data}）</span>
                        <span class="btn${i.seriesIndex}" style="cursor: pointer; color: #2055F4;" onclick="emotionalAnalysis(${this.htmlspecialchars(JSON.stringify(i))})">查询</span>
                      </div>
                    `
                }
              })
              html += `</div>`
              return html
            },

在methods中定义方法：

    htmlspecialchars (str) {
      str = str.replace(/&/g, '&');
      str = str.replace(/</g, '<');
      str = str.replace(/>/g, '>');
      str = str.replace(/"/g, '&quot;');
      str = str.replace(/'/g, '&#039;');
      return str;
    },

 在created中：

const emotionalAnalysis = (i) => {
       // 点击事件执行
      let obj = {}
      obj.name = i.name
      obj.seriesName = i.seriesName
      obj.data = i.data
      this.$bus.$emit('emotionalAnalysisGoTo', obj);
    };
    window.emotionalAnalysis = emotionalAnalysis;

总结：将tooltip设置为可鼠标移入，遍历多条折线图添加点击事件（onclick只能绑定window的方法）在created中给window添加方法

效果图：