echart之 ----通过点击事件进行标线

主题:使用echarts绘制图表并,点击曲线上的点时跳转到指定链接,点击绘图区域空白处时,绘制标线

本文中使用的是按需加载的方式引入 echart,若需要使用标线功能,请至少require(“echarts/lib/component/markLine”);

点击事件

echarts中,有两种方式可以捕捉点击事件,

  • 用于捕捉曲线的点击事件:chartInstance.on(‘click’,funtion(param){});
  • 用于捕捉画布的点击事件:chartInstance.getZr().on(‘click’,funtion(param){});

第一种点击事件的捕捉方式,仅能捕捉点击到echart图表元素上的事件,例如点击在曲线上,点击在坐标轴上(需要设置坐标轴的slient属性为false)点击在标线上(需要设置MarkLine的slient属性为false); 但无法捕捉点击在空白位置的事件;

以下是点击事件回调函数的参数,
来自 events.鼠标事件

{
    // 当前点击的图形元素所属的组件名称,
    // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
    componentType: string,
    // 系列类型。值可能为:'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。
    seriesType: string,
    // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。
    seriesIndex: number,
    // 系列名称。当 componentType 为 'series' 时有意义。
    seriesName: string,
    // 数据名,类目名
    name: string,
    // 数据在传入的 data 数组中的 index
    dataIndex: number,
    // 传入的原始数据项
    data: Object,
    // sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data,
    // dataType 的值会是 'node' 或者 'edge',表示当前点击在 node 还是 edge 上。
    // 其他大部分图表中只有一种 data,dataType 无意义。
    dataType: string,
    // 传入的数据值
    value: number|Array,
    // 数据图形的颜色。当 componentType 为 'series' 时有意义。
    color: string,
    // 用户自定义的数据。只在 graphic component 和自定义系列(custom series)
    // 中生效,如果节点定义上设置了如:{type: 'circle', info: {some: 123}}。
    info: *
}

这个使用比较简单,我们可以在 series.data中携带一些冗余的数据方便我们在点击事件回调函数中获取数据
如,

chartInstance.setOption({	
	series:{
		data: [[x,y, data1,data2,data3...], [x,y, data1,data2,data3...],]
	}
});

这样,在回调函数中 可以获取到这些冗余信息,如:

function(param)
{	
	let nowData = param.data;// [x,y, data1,data2,data3...]
	///当然也可以通过索引获取数据
	let index = param.dataIndex;
}

第二种点击事件的捕捉方式,能捕捉任意点击在 Canvas上的点击事件,但是不太方便区分鼠标具体点击在哪个图表元素上

这种方式echarts官方文档中没有明确说明,并且事件的参数也不够明确,这里我依据我的一些经验给出我的一些用法:

chartInstance.getZr().off('click');           
chartInstance.getZr().on('click', function (param)           
 {               
       let x = param.offsetX;      //获取当前点击位置相对于图表左上角的 横向偏移量 (单位是像素, 但是不建议直接使用,因为你可能无法正确映射到图表上的位置)
        let y = param.offsetY;    // 获取当前点击位置相对于图表左上角的纵向偏移量             
        let result = chartInstance.convertFromPixel({                    
	        seriesIndex:0,                    
	        xAxisIndex:0,                
        },[x,y]);  // echarts 4.0新增 功能,将像素坐标转换为图表的逻辑坐标,这里的result就是当前点击位置的图表坐标索引了             
        let xAxisDataIndex= result[0];                 
        let xData= xAxisData[xAxisDataIndex];   //通过原始x轴数组获取x轴位置,可以类似的获取series的数据
}

上面的代码中,我们可以获取点击位置的像素坐标,并将其转换为点击位置的逻辑坐标(也就数据索引),但是有一个问题,我们无法判断点击的位置是图表元素还是空白处
下面是点击在曲线上时的事件参数
在这里插入图片描述
下面是点击在空白处时的事件参数
在这里插入图片描述
下面是点击在非曲线上,但是是图表元素上时的事件参数
在这里插入图片描述
我多次实践后,得出以下结论:

  • param.target !== ‘undefined’ 时,表示点击在曲线上
  • param.target === ‘undefined’ && param.topTarget !== ‘undefined’ 时,表示点击在非曲线的图表元素上
  • param.tartget === ‘undefined’ && param.topTarget === ‘undefined’ 时,表示点击在空白区域

因此,我们可以通过上面的条件来判断当前点击的位置是否是曲线,从而完成一些操作;
在这里插入图片描述

以下是核心示例代码:

 initClickWithMarkLine:function()    
{       
      let xAxisData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];        
      let option = {            
	      xAxis: {                
			type: 'category',                
			data: xAxisData,           
		},           
	     yAxis: {                
			type: 'value'           
	      },            
	      series: [{               
			data: [820, 932, 901, 934, 1290, 1330, 1320],                
			type: 'line'           
		}]        
	};
	let dom = document.getElementById('app2');       
        let chartInstance = echarts.init(dom);        
        chartInstance.setOption(option);
        
        let self = this;        	
	chartInstance.getZr().off('click');//取消监听点击事件,也可以防止重复绑定        		 	
	chartInstance.getZr().on('click',function(param)        
        {               
		let x = param.offsetX;               
		let y = param.offsetY;              
		let result = chartInstance.convertFromPixel({                
		                seriesIndex:0,                  
		                xAxisIndex:0,              
			},[x,y]);             
		let index = result[0];           
		let xAxis =xAxisData[index];                     
		self.setMarkLine(xAxis,chartInstance);     
	});   
},    
 setMarkLine:function(xAxis,chartInstance)
{    
 	let markLine = {       
		silent:true, //取消标线的点击事件         	
		animation:false, //不播放标线的动画         
		data: [{                        
			name: xAxis,          
			xAxis: xAxis, //表示标注 x=xAxis的线, 具体配置项可以参考 https://www.echartsjs.com/zh/option.html#series-line.markLine                 
			label: {                       
				silent: true,                        
				position : 'end',               
			}          
		}]        
	};
        chartInstance.setOption({            
		series:{              
			markLine:markLine,     
		},     
	})

代码同步上传至github,工程见:https://github.com/blowingBreeze/Tick/tree/master/Web/demo
具体代码见: 工程目录下的 /src/components/ChartClick.vue

评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值