echarts
有几种事件可以获取当前列的数据(echarts事件API),但这些事件的使用体验并不好,都需要点击或移入折线本身才能获取当前列的数据。
用户在使用折线图时,通常是鼠标划入折线图,出现浮窗,此时就需要立刻把浮窗的数据返回出来。
在浮窗配置中有一个formatter
,你可以在formatter
中自定义浮窗样式,并且formatter
可以接收函数返回值,formatter
的参数就是当前列的所有数据。
// 工具浮窗
tooltip: {
trigger: "axis",
// 鼠标移入的轴线配置
axisPointer: {
lineStyle: {
color: "#FF8B02"
}
},
formatter: (e) => getCurrentDate(e) // 通过formatter自定义浮窗,并且可以监听当前列得所有数据
},
// 当前鼠标移入列的所有数据-用于页面其它地方的渲染
const currentInfo = ref({
my: null,
level: null,
avg: null,
time: ""
})
const getCurrentDate = (params) => {
let res = ""
let time = `${params[0].axisValue}<br/>`
res += time
for (let i = 0; i < params.length; i++) {
// 定义浮窗的渲染内容
res += `<span style="display:inline-block;margin-right:4px">${params[i].marker}</span>
<span style="display:inline-block;width:80px;height:20px;">${params[i].seriesName}</span>
<span style="display:inline-block;width:30px;height:20px;">${params[i].data}</span><br/>`
}
// 这里给我们自定义的变量赋值,用于页面的展示
currentInfo.value.time = params[0].axisValue;
currentInfo.value.my = params[0].data;
currentInfo.value.level = params[1].data;
currentInfo.value.avg = params[2].data;
return res
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。