ECharts数据可视化 课件 第7章 ECharts的高级使用（下）.pptx

第7章ECharts的高级使用（下）《ECharts数据可视化》

学习目标/Target了解事件的概念，能够说出事件的3要素掌握鼠标事件的使用方法，能够实现单击、双击、鼠标指针移入、鼠标指针移出等效果掌握图表自适应的设置方法，能够使用resize()方法实现图表的自适应效果掌握行为事件的使用方法，能够根据组件交互行为灵活运用相应的事件

学习目标/Target掌握代码触发ECharts中组件的行为的设置方法，能够调用dispatchAction()方法模拟触发图表的某些行为掌握LiveServer扩展的使用设置方法，能够创建本地服务器来预览网页掌握异步加载数据的设置方法，能够通过Ajax操作方法加载图表数据掌握加载动画的使用方法，能够设置加载动画的显示或隐藏

学习目标/Target掌握增量动画的使用方法，能够通过setOption()方法实现数据改变的动画效果掌握动画配置的相关方法，能够使用动画的相关属性设置图表初始动画效果和数据更新动画效果掌握事件与行为的使用方法，能够根据不同需求使用鼠标事件、行为事件掌握数据异步加载的设置方法与动画的使用方法，能够异步加载图表的数据，并为图表设置动画

章节概述/Summary通过对第6章的学习，大家应该已经掌握了ECharts主题样式的设置，以及图表混搭和多图表联动，可以实现复杂动态数据可视化和多图表联动效果。接下来，本章将继续讲解ECharts中的高级使用，如事件与行为、数据异步加载与动画等内容。通过对本章的学习，读者可以实现更加复杂的图表交互效果。

目录/Contents7.17.2事件与行为数据异步加载与动画

事件与行为7.1

鼠标事件【任务7.1.1】

任务需求小芳是一家糖果店的老板，主要销售不同品牌和口味的糖果。她想要知道哪些糖果的销售额高，哪些糖果的销售利润低，通过分析这些数据，从而更好地了解店铺的运作状况，并对未来的营销策略做出更加准确的决策。为此，她统计了某月店铺中热销的6款产品的销量、产量和利润数据。本任务需要完成以下内容。根据给定数据绘制柱状图和折线图的混搭图表。当单击不同产品的“销量”“产量”“利润”柱条后，会弹出对应的提示框，该提示框包含所在柱条的基本数据信息。

产品销量、产量和利润如下表所示。产品销量（kg）产量（kg）利润（元）薄荷糖901101800牛轧梅莲子克力务需求

知识储备1.事件概述先定一个小目标！了解事件的概念，能够说出事件的3要素

知识储备事件是用户或浏览器自身执行的某种动作，例如单击、鼠标指针经过等都属于事件。响应某个事件的函数称为事件处理函数，也可称为事件处理程序、事件句柄。1.事件概述

知识储备ECharts中的事件有3个要素，分别是事件源、事件类型和事件处理函数。触发事件的元素。例如，用户鼠标操作事件的事件源通常是行为发生时鼠标指针焦点所在的图形区域。事件源使图表产生交互效果的行为动作对应的事件种类。例如，单击事件的事件类型为click。事件类型事件触发后为了实现相应的图表交互效果而执行的代码。事件处理函数事件三要素1.事件概述

知识储备2.用户鼠标操作事件先定一个小目标！掌握鼠标事件的使用方法，能够实现单击、双击、鼠标指针移入、鼠标指针移出等效果

知识储备用户在页面中使用鼠标指针进行的一些操作所触发的事件，称为用户鼠标操作事件，简称为鼠标事件。事件类型说明click在目标元素上，单击时触发，不能通过键盘触发dbclick在目标元素上，双击时触发mouseup在目标元素上，鼠标按键被释放时触发，不能通过键盘触发mousedown在目标元素上，鼠标按键（左键或右键）被按下时触发。不能通过键盘触发mouseover鼠标指针移入目标元素上方时触发，当前元素和其子元素都触发mousemove鼠标指针在目标元素内部移动时不断触发，不能通过键盘触发mouseout鼠标指针移出目标元素上方时触发，当前元素和其子元素都触发globalout鼠标指针移出整张图表时触发contextmenu右击目标元素时触发，即右击事件，此时会弹出一个快捷菜单2.用户鼠标操作事件ECharts支持许多常见的鼠标事件，如下表所示。

知识储备2.用户鼠标操作事件注意：在目标元素上单击后，会先后触发mousedown和mouseup事件，如果其中一个事件被取消，那么click事件就不会被触发。在目标元素上双击后，会触发dbclick事件，如果直接或间接取消了click事件，那