Echarts 阴影点击事件获得当前柱状图的索引值方法
Echarts 阴影点击事件获得当前柱状图的索引值方法
var clickIndex;
const _this = this
this.charts.getZr().on('click', function (params) {
// console.log(clickIndex) //索引
})
let option = {
tooltip: {
trigger: 'axis',
confine: true,
axisPointer: {
type: 'shadow'
},
formatter: function (prams) {
clickIndex = prams[0].dataIndex //----------------索引
return `${prams[0].name}:${prams[0].value}${unit}`
}
},
//配置..................
}
this.charts.setOption(option, true)
网上还有另外一种方法,但是得到的索引值会随着位置的变化而变化!!!!有点坑,适合用在静态图
myChart.getZr().on('click', function(params) { // 获取到鼠标点击位置: var pointInPixel = [params.offsetX, params.offsetY]; // 使用containPixel API判断点击位置是否在显示图形区域,下面的例子过滤了绘制图形的网格外的点击事件,比如X、Y轴lable、空白位置等的点击事件。 if (myChart.containPixel('grid', pointInPixel)) { 使用API convertFromPixel获取点击位置对应的x轴数据的索引值,我的实现是借助于索引值的,当然可以获取到其它的信息,详细请查看文档。 var xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0]; let op = myChart.getOption() // 获取当前点击位置要的数据 var xData = op.series[0].data[xIndex] console.log(xData); });
分类:
Echarts
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 提示词工程——AI应用必不可少的技术
· 字符编码:从基础到乱码解决
· 地球OL攻略 —— 某应届生求职总结
2020-05-29 element级联选择器表单回显