Echarts 阴影点击事件获得当前柱状图的索引值方法
//什么在option外面的变量 var clickIndex; option = { //配置信息 tooltip: { //提示框 //提示触发类型:不触发 trigger: 'none', }, //formatter回调函数, formatter: val => { //获取当前阴影部分点击的索引值并 clickIndex = val[0].dataIndex }, } //生成图框内容 myChart.setOption(option); //加上getZr()即为阴影点击事件 myChart.getZr().on('click', function(params) { //得到准确索引值,不会随着位置的变化而变化! console.log(clickIndex); }
网上还有另外一种方法,但是得到的索引值会随着位置的变化而变化!!!!有点坑,适合用在静态图
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); });
标签:位置,点击,myChart,索引,柱状图,params,var,Echarts From: https://www.cnblogs.com/yu412/p/17441339.html