Echarts中的事件与行为

165 阅读1分钟

Echarts中的事件与行为

如何区分鼠标点击到了哪里?

myChart.on('click',function(params){
	if(params.componentType == 'markPoint'){
		// 相关业务逻辑
	}else if(params.componentType == 'series'){
		// 相关业务逻辑
	}else {
		// 相关业务逻辑
	}
})

点击图表中的某一条显示更详细信息?

myChart.on('click',function(params){
	if(params.name = '裤子'){
		$.get('data/data.json').done(function(data){
			myChart.setOption({
				xAxis:{
					data:data.title
				},
				series:[{
					name:'销量',
					data:data.number
				}]
			})
		})
	}
})

注:json数据的格式一定要正确,不然会出现数据无法显示的情况

点击图表中的某一信息显示另一个图表

myChart1.on('click',function(params){
	myChart2.setOption({
		tooltip:{
			formatter:"{a} <br/> : {c}"
		},
		series:[{
			name:'业务指标',
			type:'gauge',
			detail:{
				formatter:"{value}人"
			},
			data:[
				{
					value:params.value,
					name:params.name
				}
			]
		}]
	})
})