首页 前端知识 数据可视化-ECharts Html项目实战(13)

数据可视化-ECharts Html项目实战(13)

2024-04-23 21:04:28 前端知识 前端哥 389 181 我要收藏

 在之前的文章中,我们深入学习ECharts动态主题切换和自定义ECharts主题。想了解的朋友可以查看这篇文章。同时,希望我的文章能帮助到你,如果觉得我的文章写的不错,请留下你宝贵的点赞,谢谢。

数据可视化-ECharts Html项目实战(12)-CSDN博客文章浏览阅读1.7k次,点赞35次,收藏16次。今天的文章,会带着大家深入学习ECharts特殊图表设置中的ECharts动态主题切换和自定义ECharts主题。希望我的文章能帮助到正在学习的你,也欢迎各位来本篇文章下一起交流学习,共同进步。https://blog.csdn.net/qq_49513817/article/details/137770088今天的文章,我会以鼠标左键触发为例带着大家学习ECharts特殊图表设置中组件交互的行为事件。希望你能在本篇文章中有所收获。

目录

一、知识回顾

二、组件交互

组件交互是什么?

代码实现

三、拓展-鼠标事件方法

常规鼠标事件方法

params

一、知识回顾

 在之前的文章中我们学习了动态主题切换和自定义ECharts主题。

首先官方主题需要我们自己去下载并放入我们的js文件中调用。

其次要实现主题切换我们需要在每次切换主题后,销毁原有的示例,用新选择的主题创建新的示例,以此来达到我们动态切换主题的效果。

再就是自定义主题

官网供我们设置的选项有很多,这写选项可以让我们自己来配置我们想要的主题效果,配置完成后导入我们的js文件中,和之前一样的调用即可。

现在,开始今天的学习吧。 

二、组件交互

组件交互是什么?

  • ECharts组件交互指的是在使用ECharts这个基于JavaScript的开源可视化库时,通过其提供的各种交互功能,使得用户可以与图表进行互动,获取更多的信息或进行相应的操作。
  • ECharts提供了丰富的图表类型和交互功能,使得创建各种复杂的数据可视化效果成为可能。在ECharts中,子组件的调用方式主要有两种:事件触发和API调用。事件触发是指子组件会发出各种事件,如点击、鼠标移入、鼠标移除等,父组件可以监听这些事件,并在事件被触发时执行相应的方法。而API调用则允许子组件调用父组件中的方法,实现多种数据交互和联动效果。
  • 通过ECharts的交互功能,用户可以更直观地理解数据,发现数据中的规律和趋势,从而提高数据分析和决策的效率。同时,ECharts还支持多种渲染方式,包括HTML、SVG和Canvas,可以方便地嵌入到网页中,实现与网页其他元素的联动和交互。

代码实现

今天的例子是鼠标左键触发,使其鼠标左键单击我们的图表上的数据可以显示我们的详细信息。

myChart.on('click', function(params) {  
alert(" 1-月份" + params.name + "\n 2-图表类型:"+params.seriesType + "\n 3-颜色:"+params.color + "\n 4-名称:"+params.name + "\n 5-控件名称:" + params.seriesname + "\n 6-数据:"+params.data);    
        }); 

在这段代码中,我做了如下设置:

  • myChart:这是一个 ECharts 实例的引用,通常通过 echarts.init 方法初始化一个图表后会得到一个这样的实例。
  • .on('click', function(params) { ... }): 这是事件监听的方法,用于监听图表上的点击事件。当图表被点击时,会执行传入的回调函数,并且这个回调函数会接收到一个 params 参数,这个参数包含了与点击事件相关的数据。
  •  alert 函数:用来显示一个弹出框,内容是由多行字符串组成的,每行都包含了与点击事件相关的不同信息:

 可以看到,现在我们点击图表内的数据,就会弹出我们刚才设置需要的图表信息。

完整代码 

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<script type="text/javascript" src='js/echarts.js'></script>
</head>
<body>
    <div id="main" style="width: 800px; height: 600px"></div>
	<script type="text/javascript">
		// 基于准备好的dom,初始化ECharts图表
		var myChart = echarts.init(document.getElementById("main"));
		var option = { // 指定图表的配置项和数据
			tooltip: {
				trigger: 'axis'
			},
			legend: {
				data: ['降水量', '蒸发量', '温度'],
				left: 'center',
				top: 12
			},
			xAxis: [{
				type: 'category',
				data: ['1月', '2月', '3月', '4月', '5月', '6月',
					'7月', '8月', '9月', '10月', '11月', '12月'
				]
			}],
			yAxis: [{ // 设置2个Y轴之1:降水量、蒸发量
					type: 'value',
					name: '水量',
					min: 0,
					max: 200,
					interval: 50,
					axisLabel: {
						formatter: '{value}  ml'
					}
				},
				{ // 设置2个Y轴之2:温度
					type: 'value',
					name: '温度',
					min: 0,
					max: 30,
					position: 'right', // 设置y轴安置的位置
					offset: 0, // 设置向右偏移的距离
					axisLabel: {
						formatter: '{value} °C'
					}
				}
			],
			series: [{
					name: '降水量',
					type: 'bar',

					data: [2.6, 5.9, 9, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6, 2.3]
				},
				{
					name: '蒸发量',
					type: 'bar',

					data: [2, 4.9, 7, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20, 6.4, 3.3]
				},
				{
					name: '温度',
					type: 'line',
					yAxisIndex: 1, //指定使用第2个y轴
					data: [2, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23, 16.5, 12, 6.2]
				}
			]
		};
		myChart.setOption(option);  
        myChart.on('click', function(params) {  
            alert(" 1-月份" + params.name + "\n 2-图表类型:"+params.seriesType + "\n 3-颜色:"+params.color + "\n 4-名称:"+params.name + "\n 5-控件名称:" + params.seriesname + "\n 6-数据:"+params.data);    
        }); 	
        </script>
    </body>
</html>

快去试试吧。 

三、拓展-鼠标事件方法

常规鼠标事件方法

事件类型描述
'click'鼠标单击目标元素时触发
'dblclick'鼠标双击目标元素时触发
'mousedown'在目标元素上按下鼠标键时触发
'mousemove'鼠标在目标元素内部移动时不断触发
'mouseup'在目标元素上释放按下的鼠标键时触发
'mouseover'鼠标移入目标元素时触发,移动到其后代元素也会触发
'mouseout'鼠标移出目标元素时触发
'globalout'鼠标移出整个图表时触发
'contextmenu'鼠标右键点击时触发

params

属性/方法描述
params.name数据项的名称或标签,通常用于X轴或图例的显示。
params.data数据项的值或详细数据,具体格式和内容取决于图表的类型。
params.value数据项的值,有时与 params.data 相同,但也可能表示特定的数值。
params.type事件类型,如点击事件为 'click'。
params.seriesName图表中系列的名称,用于标识不同的数据集。
params.seriesIndex当前数据项所属的系列在 option.series 中的索引。
params.dataIndex当前数据项在数据数组中的索引,用于标识数据的位置。
params.color数据项的颜色,用于自定义数据点的颜色。
params.componentType事件触发时组件的类型,如 'series' 表示系列组件。
转载请注明出处或者链接地址:https://www.qianduange.cn//article/5841.html
评论
发布的文章

【Java】JSONArray详解

2024-04-30 12:04:14

Unity——LitJSON的安装

2024-04-30 12:04:06

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!