观看ECharts 官网的笔记
事件处理
在Android和Web 中,都有按钮点击事件,点击按钮,就会进行相应的操作
在ECharts 中,我们可以通过 on 方法监听用户的操作行为来回调对应的函数。比如跳转到一个地址,或者弹出对话框,或者做数据下钻等等。
ECharts 中事件分为两种类型:
-
用户鼠标操作点击,如 ‘click’、‘dblclick’、‘mousedown’、‘mousemove’、‘mouseup’、‘mouseover’、‘mouseout’、‘globalout’、‘contextmenu’ 事件。
-
还有一种是用户在使用可以交互的组件后触发的行为事件,例如在切换图例开关时触发的 ‘legendselectchanged’ 事件),数据区域缩放时触发的 ‘datazoom’ 事件等等。
如:
myChart.on('click', function (params) {
// 在用户点击后控制台打印数据的名称
console.log(params);
});
myChart.on('legendselectchanged', function (params) {
console.log(params);
});
chart.on('click', 'series.line', function (params) {
console.log(params);
});
chart.on('mouseover', {
seriesIndex: 1, name: 'xx'}, function (params) {
console.log(params);
});
鼠标事件
ECharts 支持的鼠标事件类型,包括 ‘click’、‘dblclick’、‘mousedown’、‘mousemove’、‘mouseup’、‘mouseover’、‘mouseout’、‘globalout’、‘contextmenu’ 事件。
以下实例在点击柱形图时会弹出对话框:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 实例</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {
},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 处理点击事件并且弹出数据名称
myChart.on('click', function (params) {
alert(params.name);
});
</script>
</body>
</html>
所有的鼠标事件包含参数 params,这是一个包含点击图形的数据信息的对象,格式如下:
{
// 当前点击的图形元素所属的组件名称,
// 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
componentType