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
}
})
****************
鼠标事件处理
事件监听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>