echarts标签引入模拟点击事件

最新推荐文章于 2025-07-11 10:20:42 发布

故事迷人眼

最新推荐文章于 2025-07-11 10:20:42 发布

阅读量4.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： echarts

本文链接：https://blog.youkuaiyun.com/a736889661/article/details/79752878

echarts 专栏收录该内容

10 篇文章

订阅专栏

这篇博客演示了如何在ECharts图表中设置和监听各种事件，包括点击、双击、数据区域缩放、图例选择和图表类型切换等。通过在ECharts实例上注册事件监听器，可以获取并打印出相应的事件参数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="main" style="height: 400px;">
			
		</div>
		<div id="console">
			
		</div>
		<div id="hover-console">
			
		</div>
		<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
		<script type="text/javascript">
		var myChart = echarts.init(document.getElementById("main"));
		
		option = {
		    tooltip : {
		        trigger: 'axis'
		    },
		    legend: {
		        data:['最高','最低']
		    },
		    toolbox: {
		        show : true,
		        feature : {
		            mark : {show: true},
		            dataView : {readOnly:false},
		            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
		            restore : {show: true},
		            saveAsImage : {show: true}
		        }
		    },
		    calculable : true,
		    dataZoom : {
		        show : true,
		        realtime : true,
		        start : 40,
		        end : 60
		    },
		    xAxis : [
		        {
		            type : 'category',
		            boundaryGap : true,
		            data : function (){
		                var list = [];
		                for (var i = 1; i <= 30; i++) {
		                    list.push('2013-03-' + i);
		                }
		                return list;
		            }()
		        }
		    ],
		    yAxis : [
		        {
		            type : 'value'
		        }
		    ],
		    series : [
		        {
		            name:'最高',
		            type:'line',
		            data:function (){
		                var list = [];
		                for (var i = 1; i <= 30; i++) {
		                    list.push(Math.round(Math.random()* 30) + 30);
		                }
		                return list;
		            }()
		        },
		        {
		            name:'最低',
		            type:'bar',
		            data:function (){
		                var list = [];
		                for (var i = 1; i <= 30; i++) {
		                    list.push(Math.round(Math.random()* 10));
		                }
		                return list;
		            }()
		        }
		    ]
		};
		
		myChart.setOption(option);
		
		var ecConfig = echarts.config;
		function eConsole(param) {
			console.log(param);
		    var mes = '【' + param.type + '】';
		    if (typeof param.seriesIndex != 'undefined') {
		        mes += '  seriesIndex : ' + param.seriesIndex;
		        mes += '  dataIndex : ' + param.dataIndex;
		    }
		    if (param.type == 'hover') {
		        document.getElementById('hover-console').innerHTML = 'Event Console : ' + mes;
		    }
		    else {
		        document.getElementById('console').innerHTML = mes;
		    }
		    console.log(param);
		}
		/*
		// -------全局通用
		REFRESH: 'refresh',
		RESTORE: 'restore',
		RESIZE: 'resize',
		CLICK: 'click',
		DBLCLICK: 'dblclick',
		HOVER: 'hover',
		MOUSEOUT: 'mouseout',
		// -------业务交互逻辑
		DATA_CHANGED: 'dataChanged',
		DATA_ZOOM: 'dataZoom',
		DATA_RANGE: 'dataRange',
		DATA_RANGE_HOVERLINK: 'dataRangeHoverLink',
		LEGEND_SELECTED: 'legendSelected',
		LEGEND_HOVERLINK: 'legendHoverLink',
		MAP_SELECTED: 'mapSelected',
		PIE_SELECTED: 'pieSelected',
		MAGIC_TYPE_CHANGED: 'magicTypeChanged',
		DATA_VIEW_CHANGED: 'dataViewChanged',
		TIMELINE_CHANGED: 'timelineChanged',
		MAP_ROAM: 'mapRoam',
		*/
		myChart.on(ecConfig.EVENT.CLICK, eConsole);
		myChart.on(ecConfig.EVENT.DBLCLICK, eConsole);
		//myChart.on(ecConfig.EVENT.HOVER, eConsole);
		myChart.on(ecConfig.EVENT.DATA_ZOOM, eConsole);
		myChart.on(ecConfig.EVENT.LEGEND_SELECTED, eConsole);
		myChart.on(ecConfig.EVENT.MAGIC_TYPE_CHANGED, eConsole);
		myChart.on(ecConfig.EVENT.DATA_VIEW_CHANGED, eConsole);
		
		</script>
                    
	</body>
</html>