echarts事件、动画、数据

事件chart.on(eventName,query,handler)

鼠标事件(Event)   

myChart.on('click','series',function(){})

组件交互的行为事件(Action)

chart.on('legendselectchanged')

数据

series{data}

多维列表

dataset: {
    // 提供一份数据。
    source: [
      ['product', '2015', '2016', '2017'],
    ] 

或者"对象数组"

dimensions: ['product', '2015', '2016', '2017'],
    source: [
      { product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },

]

动画

1. 全局动画控制：
   可以在初始化图表时，通过 animation 属性来控制是否开启动画。例如：

   	var chart = echarts.init(document.getElementById('main'));
   	chart.setOption({
   	animation: true, // 默认为 true，开启动画
   	// ... 其他配置
   	});

2. 动画时长：
   可以通过 animationDuration 属性来设置动画的时长，单位是毫秒。也可以将其设置为一个函数，以实现不同数据项有不同的动画时长。

   	animationDuration: 2000, // 所有数据项动画时长为 2000 毫秒
   	// 或者
   	animationDuration: function (idx) {
   	// 根据数据项索引返回不同的动画时长
   	return idx * 10;
   	}

3. 动画缓动效果：
   通过 animationEasing 属性来设置动画的缓动效果。ECharts 提供了多种预设的缓动效果，如 'linear'、'quadraticIn'、'quarticInOut' 等。

   animationEasing: 'elasticOut', // 使用弹性缓出效果

4. 动画延迟：
   通过 animationDelay 属性来设置动画的延迟时间。同样，也可以将其设置为一个函数，以实现不同数据项有不同的动画延迟。

   	animationDelay: function (idx) {
   	// 根据数据项索引返回不同的动画延迟时间
   	return idx * 50;
   	}

5. 初始动画：
   对于特定的图表类型（如饼图），可以通过在 series 配置项中设置 animationType、animationEasing、animationDuration 和 animationDelay 等属性来定制初始动画效果。

   	series: [{
   	type: 'pie',
   	animationType: 'scale', // 初始动画类型为缩放
   	animationEasing: 'elasticOut', // 初始动画缓动效果为弹性缓出
   	animationDuration: 2000, // 初始动画时长为 2000 毫秒
   	animationDelay: function () {
   	// 随机延迟时间，实现更绚丽的动画效果
   	return Math.random() * 200;
   	},
   	// ... 其他配置
   	}]

6. 加载动画：
   ECharts 还提供了加载动画的显示与隐藏功能。可以在适当的时候调用 showLoading 和 hideLoading 方法来显示和隐藏加载动画。

   	chart.showLoading(); // 显示加载动画
   	// ... 数据加载完成后
   	chart.hideLoading(); // 隐藏加载动画

请注意，上述代码示例中的 chart 是一个 ECharts 图表实例，setOption 方法用于设置图表的配置和数据。在实际应用中，你需要根据自己的需求调整这些配置参数。