第1关： Echarts中的事件和行为
700
- 任务要求
- 参考答案
- 评论
- 关卡排行榜
任务描述
本关任务：按照要求处理鼠标事件。
相关知识
Echarts是网页端的组件，会继承一些网页上的概念，比如事件和行为，这些概念最开始来源于Dom。
事件指的是用户或者浏览器自身执行的某种动作，比如使用鼠标点击页面、按下键盘的某个按键、网页加载等。当这些事件发生时，需要有函数来进行处理，这些函数被称为事件处理程序。比如用户点击重置按钮时，需要将页面上的所有输入框清空，这个就是一个事件处理程序。
Echarts中的事件处理分为两大类：鼠标事件的处理、组件交互的行为事件处理。
鼠标事件的处理
鼠标事件指的是用户使用鼠标时发生的事件，包括单击鼠标、双击鼠标等，如下是鼠标事件的一个汇总：
| 事件名称 | 含义 |
|---|---|
| click | 单击鼠标左键 |
| dblclick | 双击鼠标左键 |
| mouseup | 鼠标释放 |
| mousedown | 鼠标按下 |
| mouseover | 鼠标移入目标元素上方时触发 |
| mousemove | 鼠标在目标元素内部移动时不断触发 |
| mouseout | 鼠标移出目标元素时触发 |
| globalout | 鼠标移出整个图表时触发 |
| contextmenu | 单击鼠标右键 |
其中，click是最常见的鼠标事件。
鼠标事件的处理程序有一个入参params，这是一个字典类型的变量，它的各个属性的名字和含义如下所示：
| 属性名称 | 属性的含义 |
|---|---|
| componentType | 当前点击的图形元素所属的组件的名称，比如series、markLine等 |
| seriesType | 系列的类型，比如line、bar等，只有当componentType值为series时才有意义 |
| seriesIndex | 系列在传入的serise中的索引 |
| seriesName | 系列的名字 |
| name | 数据名、类目名 |
| dataIndex | 数据在传入的data数组中的index |
| data | 传入的原始数据项 |
| dataType | sankey、graph等图表同时含有nodeData和edgeData两种data，dataType的值会是'node'或者'edge'，其它大部分图表的dataType的值都是'node' |
| value | 传入的数据值 |
| color | 数据图形的颜色，只有当componentType值为series时才有意义 |
这里的含义不太好理解，我们来看一个例子，在这个例子中把所有的属性全部打印出来：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><script type="text/JavaScript" src="../static/echarts.min.js"></script><body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">//基于准备好的dom，初始化ECharts图表var myChart = echarts.init(document.getElementById("main"));var option = { //指定图表的配置项和数据color: ['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple'],title: { text: '产品销量产量利润统计', left: 10, top: 9 },xAxis: { //配置x轴坐标系data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]},yAxis: {}, //配置y轴坐标系legend: {},series: [ //配置数据系列{ //设置数据系列1：销量name: '销量', type: 'bar',data: [5, 28, 16, 20, 15, 33]},{ //设置数据系列2：产量name: '产量', type: 'bar',data: [15, 38, 20, 24, 20, 45]},{ //设置数据系列3：利润name: '利润', type: 'bar',data: [25, 15, 10, 10, 15, 22]}]};myChart.setOption(option); //使用刚指定的配置项和数据显示图表window.addEventListener("resize", function () {myChart.resize(); //使图表自适应窗口的大小});//回调函数处理鼠标点击事件并且显示各数据信息内容myChart.on('click', function (params) {alert("第" + (params.dataIndex + 1) + "件产品:" + params.name + "的" +params.seriesName + "为:" + params.value +"\n\n componentType: " + params.componentType +"\n seriesType: " + params.seriesType +"\n seriesIndex: " + params.seriesIndex +"\n seriesName: " + params.seriesName +"\n name: " + params.name +"\n dataIndex: " + params.dataIndex +"\n data: " + params.datax +"\n dataType: " + params.dataType +"\n value: " + params.value +"\n color: " + params.color);});myChart.setOption(option); //为echarts对象加载数据</script></body></html>
我们先来看一下效果，再来分析程序，点击“羊毛衫”的利润，弹出的框如下所示（如果看不清，请点击图片）：
图 1 鼠标事件
第42到55行是一个匿名函数，即鼠标事件处理程序，在这个程序里，打印了入参params的每一个属性：
seriesType为bar表示点击的是一个柱状图；seriesIndex为2表示点击的是“羊毛衫”的第三个柱子（因为索引是从0开始的）；seriesName表示柱子的名字；name表示数据的名字，即x轴上的名字；dataIndex值为1表示点击的是第二个系列，第一个是“衬衫”；value表示这个柱子实际的值。
除了param参数之外，我们还可以直接操作option参数，如下：
myChart.on('click', function (params) {option.series[0].data[0] = 10//重新设置optionmyChart.setOption(option)});
组件交互的行为事件
除了鼠标事件，Echarts中还有一些已经提前定义好触发动作的事件，比如鼠标点击图例的事件为legendselectchanged事件，我们把这些事件称为组件交互事件，已知的组件交互事件如下所示：
| 事件名称 | 含义 |
|---|---|
| legendselectchanged | 切换图例选中状态后的事件 (注：图例组件用户切换图例开关会触发该事件,不管你有没有选择，点击了就触发) |
| legendselected | 图例选中后的事件，即点击显示该图例时，触发就生效。 |
| legendunselected | 图例取消选中后的事件。 |
| datazoom | 数据区域缩放后的事件。缩放视觉映射组件。 |
| datarangeselected | 视觉映射组件中，range 值改变后触发的事件。 |
| timelinechanged | 时间轴中的时间点改变后的事件。 |
| timelineplaychanged | 时间轴中播放状态的切换事件。 |
| restore | 重置 option 事件。 |
| dataviewchanged | 工具栏中数据视图的修改事件。 |
| magictypechanged | 工具栏中动态类型切换的切换事件。 |
| geoselectchanged | geo 中地图区域切换选中状态的事件（用户点击选中会触发该事件。）。 |
| geoselected | geo 中地图区域选中后的事件（使用dispatchAction可触发此事件，用户点击不会触发此事件（用户点击事件请使用 geoselectchanged））。 |
| geounselected | geo 中地图区域取消选中后的事件，使用dispatchAction可触发此事件，用户点击不会触发此事件（用户点击事件请使用 geoselectchanged）。 |
| pieselectchanged | series-pie 中饼图扇形切换选中状态的事件，用户点击选中会触发该事件。 |
| pieselected | series-pie 中饼图扇形选中后的事件，使用dispatchAction可触发此事件，用户点击不会触发此事件（用户点击事件请使用 pieselectchanged）。 |
| pieunselected | series-pie 中饼图扇形取消选中后的事件，使用dispatchAction可触发此事件，用户点击不会触发此事件（用户点击事件请使用 pieselectchanged）。 |
| mapselectchanged | series-map 中地图区域切换选中状态的事件，用户点击选中会触发该事件。 |
| mapselected | series-map 中地图区域选中后的事件，使用dispatchAction可触发此事件，用户点击不会触发此事件（用户点击事件请使用 mapselectchanged）。 |
| mapunselected | series-map 中地图区域取消选中后的事件，使用dispatchAction可触发此事件，用户点击不会触发此事件（用户点击事件请使用 mapselectchanged）。 |
| axisareaselected | 平行坐标轴 (Parallel) 范围选取事件，当进行坐标轴范围选取时，可以用如下方式获取当前高亮的线所对应的 data indices （即 series 的 data 中的序号列表）。 |
我们以图例点击事件为例，看下组件交互事件如何使用：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><script type="text/JavaScript" src="../static/echarts.min.js"></script><body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">//基于准备好的dom，初始化ECharts图表var myChart = echarts.init(document.getElementById("main"));var option = { //指定图表的配置项和数据color: ['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple'],title: { text: '产品销量产量利润统计', left: 10, top: 9 },xAxis: { //配置x轴坐标系data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]},yAxis: {}, //配置y轴坐标系legend: {},series: [ //配置数据系列{ //设置数据系列1：销量name: '销量', type: 'bar',data: [5, 28, 16, 20, 15, 33]},{ //设置数据系列2：产量name: '产量', type: 'bar',data: [15, 38, 20, 24, 20, 45]},{ //设置数据系列3：利润name: '利润', type: 'bar',data: [25, 15, 10, 10, 15, 22]}]};myChart.setOption(option); //使用刚指定的配置项和数据显示图表window.addEventListener("resize", function () {myChart.resize(); //使图表自适应窗口的大小});myChart.on('legendselectchanged', function (params) {//获取点击图例的选中状态var isSelected = params.selected[params.name];//在控制台中打印window.alert((isSelected ? '你选中了' : '你取消选中了') + '图例:' + params.name);});myChart.setOption(option); //为echarts对象加载数据</script></body></html>
这里的程序和第一个例子中的几乎没有区别，除了click参数被改成了legendselectchanged。这个参数表示事件的名字。
当用户点击利润图例时，效果如下：
图 2 图例事件效果图
可以看到，弹框告诉我们：用户点击了利润图例。
当点击了弹框中的“确定”按钮，效果如下：
图 3 利润被隐藏
可以看到，利润被隐藏了。
编程要求
根据提示，在右侧编辑器Begin和End之间补充代码，当鼠标点击柱状图中的某个一个柱子时，将该柱子的value（即高度）设置为原来的两倍。其它所有配置都不变。
柱状图就是图2中的柱状图。
要点：需要分清楚dataIndex和seriesIndex在option中的不同含义。
测试说明
我们将调用浏览器接口，打开你修改的这段代码生成的网页，然后模拟鼠标点击某一个柱子，并截图获取其中的图像，和正确的图像进行对比，从而判断你补充的程序是否正确，正确将输出：“图像对比一致，恭喜通关！”
同时我们将展示你生成的图像和正确的图像，你可以通过观察图像的方式修改自己尚未通过的代码。
测试输入： 预期输出：图像对比一致，恭喜通关！
开始你的任务吧，祝你成功！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script type="text/JavaScript" src="../static/echarts.min.js"></script>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
//基于准备好的dom，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
var option = { //指定图表的配置项和数据
color: ['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple'],
title: { text: '产品销量产量利润统计', left: 10, top: 9 },
xAxis: { //配置x轴坐标系
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {}, //配置y轴坐标系
legend: {},
series: [ //配置数据系列
{ //设置数据系列1：销量
name: '销量', type: 'bar',
data: [5, 28, 16, 20, 15, 33]
},
{ //设置数据系列2：产量
name: '产量', type: 'bar',
data: [15, 38, 40, 24, 20, 45]
},
{ //设置数据系列3：利润
name: '利润', type: 'bar',
data: [25, 15, 10, 10, 15, 22]
}
]
};
myChart.setOption(option); //使用刚指定的配置项和数据显示图表
window.addEventListener("resize", function () {
myChart.resize(); //使图表自适应窗口的大小
});
myChart.on('highlight', function (params) {
/********* Begin *********/
/********* End *********/
myChart.setOption(option)
});
myChart.setOption(option); //为echarts对象加载数据
var _this = this
var chartHover = function () { //创建自定义函数chartHover
var dataLen = option.series[0].data.length
_this.myChart.dispatchAction({
type: 'highlight', //取消之前高亮的图形
seriesIndex: 1,
dataIndex: 2
})
}
//调用chartHover自定义函数，时间间隔为3秒
chartHover()
</script>
</body>
</html>
2289
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
