项目中遇到一个需求为折线图点击某一个跳转页面,但是存在问题是多条折线图可能存在拐点之间的重合。
实现逻辑:使用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, '"');
str = str.replace(/'/g, ''');
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添加方法
效果图: