echarts 事件与行为
**********************
事件与行为
事件：鼠标事件、用户使用交互组件触发的事件（事件名称全部小写）
# 鼠标事件
click、dblclick
mousemove、mouseover
mousedown、mouseup、mouseout
globalout、contextmenu
# 使用交互组件触发的事件
hightlight：高亮事件（执行action hightlight触发该事件）
downplay：取消高亮事件（执行action downplay触发该事件）
selectchanged：数据选中状态发生变化（执行action toggleSelected、select、unselect触发该事件）
legendselectchanged：切换图例开关事件（执行action legendToggleSelect触发该事件）
legendselected：图例选中事件（执行action legendSelect触发该事件）
legendunselected：图例取消选中事件（执行action legendunselected触发该事件）
legendselectall：图例全选事件（执行action legendAllSelect触发该事件）
legendinverseselect：图例反选事件（执行action legendInverseSelect触发该事件）
legendscroll：图例滚动事件（执行action legendscroll触发该事件）
datazoom：数据区域缩放事件（执行action datazoom触发该事件）
datarangeselected：数据范围改变事件（执行action selectDataRange，改变range触发该事件）
timelinechanged：时间轴改变事件（执行action timeline，改变时间点可触发该事件）
timelineplaychanged：时间轴播放状态改变事件（执行action timelinePlayChange，改变playState可触发该事件）
restore：重置option事件（执行action restore可触发该事件）
dataviewchanged：工具栏中数据视图的修改事件
magictypechanged：工具栏中动态类型切换的切换事件
geoselectchanged：地图区域切换选中状态的事件（执行action geoToggleSelect可触发该事件）
geoselected：地图区域选中后的事件（执行action geoSelect可触发该事件，用户点击不会触发该事件，会触发geoselectchanged事件）
geounselected：地图区域取消选中后的事件（执行action geoUnSelect可触发该事件，用户点击不会触发该事件，会触发geoselectchanged事件）
axisareaselected：平行坐标轴 (Parallel)范围选取事件
brush：选框正在添加事件（执行action brush可触发该事件）
brushEnd：选框添加完毕事件（执行action brushEnd可触发该事件）
brushselected：用户在界面中创建、删除、修改选框时会发出该事件
globalcursortaken：鼠标刷选事件（执行action takeGlobalCursor可触发该事件）
rendered：渲染结束事件，动画本帧的渲染结束触发
finished：渲染完成事件，当渲染动画、渐进渲染停止时触发
action：代码触发组件的行为
highlight：高亮指定的数据图形
downplay：取消高亮指定的数据图形
select：选中指定的数据
unselect：取消选中指定的数据
toggleSelected：切换数据选中状态
# 图例行为（legend）
legendSelect：选中图例，该行为会触发legendselected事件
legendUnSelect：取消图例选中，该行为会触发legendunselected事件
legendToggleSelect：切换图例选中状态，该行为会触发legendselectchanged事件
legendAllSelect：图例全选，该行为会触发legendselectall事件
legendInverseSelect：图例反选，该行为会触发legendinverseselect事件
legendScroll：图例滚动，该行为会触发legendscroll事件
# 提示框行为（tooltip）
showTip：显示提示框
hideTip：隐藏提示框
# 数据区域（datazoom）
dataZoom：数据区域缩放，该行为会触发datazoom事件
takeGlobalCursor：启动或关闭toolbox中dataZoom的刷选状态
myChart.dispatchAction({
type: 'takeGlobalCursor',
key: 'dataZoomSelect',
// 启动或关闭
dataZoomSelectActive: true
});
# 视觉映射组件（visualMap）
selectDataRange：选取映射的数值范围，该行为会触发datarangeselected事件
myChart.dispatchAction({
type: 'selectDataRange',
selected: [20, 40], // 选取20到40的值范围
selected: { 1: false }, // 取消选中第二段
selected: { '优': false } // 取消选中类目 `优`
})
# 时间轴组件行为（timeline）
timelineChange：设置当前的时间点，该行为会触发timelinechanged事件
timelinePlayChange：切换时间轴播放状态，该行为会触发timelineplaychanged事件
# 工具栏组件行为（toolbox）
restore：重置option，该行为会触发restore事件
dispatchAction({
type: 'restore'
})
# 地球组件行为（geo）
geoSelect：选中指定的地图区域，该行为会触发geoselected事件
geoUnSelect：取消选中指定的地图区域，该行为会触发geounselected事件
geoToggleSelect：切换指定的地图区域选中状态，该行为会触发geoselectchanged事件
# 区域选择相关的行为（brush）
brush：设置或删除选框，该行为会触发brush事件
brushEnd：选框添加完毕，该行为会触发brushEnd事件
takeGlobalCursor：当前鼠标变为可刷选状态，点击toolbox中的brush按钮时，
就是通过这个action，将当前普通鼠标变为刷选器的
该行为会触发globalCursorTaken事件
myChart.dispatchAction({
type: 'takeGlobalCursor',
// 如果想变为“可刷选状态”，必须设置。不设置则会关闭“可刷选状态”。
key: 'brush',
brushOption: {
// 参见 brush 组件的 brushType。如果设置为 false 则关闭“可刷选状态”。
brushType: string,
// 参见 brush 组件的 brushMode。如果不设置，则取 brush 组件的 brushMode 设置。
brushMode: string
}
})
****************
扫描二维码关注公众号，回复：
13282627 查看本文章
鼠标事件处理
事件监听api
chart.on(eventName, query?, function(params){});
# 参数说明：
eventName：事件名称，如click、dblclick等
query：只对指定的组件的图形元素的触发回调，可为string、object，该参数可选
function：事件触发时执行的回调函数，params为鼠标事件对应的参数（可选）
query 参数说明
# query为string时，值可以是'mainType'、'mainType.subType'
chart.on('click', 'series', function() {});
chart.on('click', 'series.line', function() {});
chart.on('click', 'dataZoom', function() {});
chart.on('click', 'xAxis.category', function() {});
# query为object，可包含以下一个或多个属性，每个属性都是可选的
{
${mainType}Index: number //组件index
${mainType}Name: string //组件name
${mainType}Id: string //组件id
dataIndex: number //数据项index
name: string //数据项name
dataType: string //数据项type，如关系图中的 'node', 'edge'
element: string //自定义系列中的el的name（series的type为custom）
}
# query object示例
chart.setOption({
...
series: [
{
name: 'uuu'
...
}
]
});
chart.on('mouseover', { seriesName: 'uuu' }, function() {
//series name='uuu'的系列中的图形元素被'mouseover'时，此方法被回调
});
chart.setOption({
...
series: [
{
type: 'graph',
nodes: [
{ name: 'a', value: 10 },
{ name: 'b', value: 20 }
],
edges: [{ source: 0, target: 1 }]
}
]
});
chart.on('click', { dataType: 'node' }, function() {
//关系图的节点被点击时此方法被回调
});
chart.on('click', { dataType: 'edge' }, function() {
//关系图的边被点击时此方法被回调
});
回调函数参数说明
type EventParams = {
componentType: string; //当前点击的图形元素组件名称，如 'series'、'markLine'、'markPoint'、'timeLine'等
seriesType: string; //系列类型，如：'line'、'bar'、'pie'等，当componentType为 'series'时有意义
seriesIndex: number; //系列index，当componentType为'series'时有意义。
seriesName: string; //系列名称，当componentType为'series'时有意义。
name: string; //数据名，类目名
dataIndex: number; //数据在传入的data数组中的index
data: Object; //传入的原始数据项
dataType: string; //sankey、graph等图表同时含有nodeData、edgeData ，
//dataType可设为'node'或者'edge'，表示当前点击在node或者edge上
//图表只有一种data时，dataType无意义
value: number | Array; //传入的数据值
color: string; //数据图形的颜色，当 componentType为'series'时有意义
};
****************
组件交互行为触发的事件
echarts中基本上所有的组件交互行为都会触发相应的事件
# legendselectchanged事件为例，以下表示该事件对应的回调参数，行为事件对应的回调参数可能会不一样
{
type: 'legendselectchanged',
name: string // 切换的图例名称
selected: { // 所有图例的选中状态表
[name: string]: boolean
}
}
# 图例开关的行为只会触发 legendselectchanged 事件
myChart.on('legendselectchanged', function(params) {
var isSelected = params.selected[params.name]; // 获取点击图例的选中状态
console.log((isSelected ? '选中了' : '取消选中了') + '图例' + params.name);
//控制台中打印
console.log(params.selected); // 打印所有图例的状态
});
****************
代码触发组件行为
代码触发行为api（不同action的参数可能会不一样，具体参见官网）
# 高亮操作
dispatchAction({
type: 'highlight',
seriesIndex?: number | number[], //系列index，可为多个
seriesId?: string | string[], //系列id，可为多个
seriesName?: string | string[], //系列名称，可为多个
dataIndex?: number | number[], //数据项index，可为多个
name?: string | string[], //数据项名称，如果设置了dataIndex，以dataIndex为准
});
# 图例选中操作，只有一个name参数
dispatchAction({
type: 'legendSelect',
name: string // 图例名称
})
# 图例全选操作，没有参数
dispatchAction({
type: 'legendAllSelect'
})
****************
监听空白事件
zrender事件、echarts事件
# zrender事件：鼠标点击图标任意位置都可触发该事件
myChart.getZr().on('click', function(event) {
...
});
# echarts事件：鼠标点击图形元素触发该事件，点击空白处不会触发
myChart.on('click', function(event) {
...
});
# 点击空白处触发事件
myChart.getZr().on('click', function(event) {
if (!event.target) { //没有target意味着鼠标不在图形元素上，是在“空白处”点击的
...
}
});
**********************
示例
点击图形跳转百度搜索产品名
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个 ECharts 实例</title>
<script src="/echarts/echarts.min.js"></script>
<script src="/jquery/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function (){
const myChart = echarts.init($("#con")[0]);
const option = {
title: {
text: '产品销量图',
left: 'center',
textStyle: {
color: '#3a6'
}
},
tooltip: {},
legend: {
left: 'right',
data:['销量'],
},
dataset: {
source: [
['product',"衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
['sales',5, 20, 36, 10, 10, 20]
]
},
xAxis: {
type: 'category'
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
seriesLayoutBy: 'row',
itemStyle: {
color: '#6ed'
}
}]
};
myChart.setOption(option);
myChart.on('click',function (params){
window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name))
})
})
</script>
</head>
<body>
<div align="center" id="con" style="width: 600px;height:400px;">
</div>
</body>
</html>
点击雪纺衫跳转百度搜索页面
轮流高亮饼图扇形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/echarts/echarts.min.js"></script>
<script src="/jquery/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function (){
const myChart = echarts.init($("#con")[0]);
const option = {
title: {
left: 'center',
text: '营业总收入季度分布图',
textStyle: {
color: '#6d6'
}
},
tooltip: {},
legend: {
left: 'right',
top: '10',
orient: 'vertical',
data:['一季度','二季度','三季度','四季度']
},
dataset: {
source: [
['quarter', '一季度', '二季度', '三季度', '四季度'],
['完美世界', 25.74, 25.70, 29.18, 21.58]
]
},
series: [
{
name: '完美世界',
type: 'pie',
radius: '60%',
seriesLayoutBy: 'row',
encode: {
itemName: 0, //数据项名称，在legend中展示
value: 1
},
label: {
show: false
}
}
]
};
myChart.setOption(option);
let currentIndex = -1;
setInterval(function() {
let dataLen = option.dataset.source[0].length-1;
//取消之前高亮的图形
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: currentIndex
});
currentIndex = (currentIndex + 1) % dataLen;
//高亮当前图形
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: currentIndex
});
//显示 tooltip
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: currentIndex
});
}, 1000);
})
</script>
</head>
<body>
<div id="con" style="width: 400px;height:200px;"></div>
</body>
</html>
