Echarts中事件与行为知识点

1.鼠标事件

        有'click'、 'dblclick'、 'mousedown'、 'mousemove'、 'mouseup'、 'mouseover'、 'mouseout'、 'globalout'、 'contextmenu' 事件。下面先来看一个简单的点击柱状图后打开相应的百度搜索页面的示例。

// 基于准备好的dom，初始化ECharts实例
// 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) {
  window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
});

2.触发Echarts中组件的行为

        'legendselectchanged' 事件会由组件交互的行为触发，那除了用户的交互操作，有时候也会有需要在程序里调用方法触发图表的行为，诸如显示 tooltip，选中图例。

在 ECharts 通过调用 myChart.dispatchAction({ type: '' }) 触发图表行为，统一管理了所有动作，也可以方便地根据需要去记录用户的行为路径。

常用的动作和动作对应参数在 action 文档中有列出。

3.组件交互的行为事件

        在 ECharts 中基本上所有的组件交互行为都会触发相应的事件，常用的事件和事件对应参数在 events 文档中有列出

4.

Echarts中所涉及的事件包含两种，一种是鼠标点击事件，或者hover时触发的事件；另一种是用户在使用可交互组件后触发的行为事件。如实例（在图表中加入交互组件）中的数据缩放时会触发datazoom事件。 事件的绑定用on

（1）鼠标事件

所有的鼠标事件都包含参数params，这是一个包含点击图形的数据信息的对象。可以在回调函数中获取这个对象中的函数名、系列名称等。 如下代码：

myChart.on('click', function (parmas) {
     $.get('detail?q=' + params.name, function (detail) {
        myChart.setOption({
            series: [{
                name: 'pie',
                // 通过饼图表现单个柱子中的数据分布
                data: [detail.data]
            }]
        });
    });});

（2）组件交互的行为事件

交互组件都会触发事件其中的事件种类都在events文档中有列出。用法一样用on.

二.

异步数据的加载和更新

（1）一般正常情况图表的数据多数都是异步加载的，需要从后台获取数去并异步的加载到页面。Echarts中实现异步只需要jquery中的工具异步获取数据后通过setOption填入数据和配置即可。如下：

var mychart=echarts.init(document.getElementById(‘main’));
$.get(‘data.json’).done(function(data){
mychart.setOption({
title:{},
tooltip:{},
legend:{},
xAxis:{},
yAxis:{},
series:[{
data:data
}]
})
})

（2）还可以先设置一个空的坐标轴，然后再异步获取数据同样通过setOption载入，如果加载数据时间很长可以在获取数据的这段时间加上一个loading动画。只需调用showLoading ()方法就可以实现，数据加载完成后再用hideLoading()方法隐藏 。如下：

myChart.showLoading();
	$.get('data.json').done(function (data) {
   	 myChart.hideLoading();
   	 myChart.setOption(...);});

（3）数据的动态更新
所有数据的更新都通过 setOption实现，你只需要定时获取数据，setOption 填入数据，而不用考虑数据到底产生了那些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
一般地，是通过定时器定时获取数据并更新到页面
实例（数据的动态更新）