ECharts数据可视化实战-ECharts的高级功能

ECharts的高级功能目录1ECharts的图表混搭及多图表联动动态切换主题及自定义ECharts主题2ECharts中的事件和行为3异步数据加载与显示加载动画45.ECharts中的其它图表前面章节介绍了常见的十几种图表在ECharts中的制作技术及注意事项，并介绍了诸多组件的制作方法。本章将上述内容的基础上，探讨：多个图表放在一起的图表混搭技术，多个系列又具有极强关联的数据同时展示的多图表联动；根据需要使用不同风格、动态切换主题及自定义定制主题；ECharts中事件和行为使得图表能够对用户的操作具有交互能力；异步数据加载能够更加灵活地获取外部数据。5.1ECharts的图表混搭及多图表联动图表混搭会使得图表更具表现力、也更有趣味。ECharts提供的图表支持任意图表的混搭，其中以折线图与柱状图的混搭最为常见，折线图与饼状图的混搭也时有所见。多个系列的数据在同一个直角系内同时展现有时候会产生混乱，但它们又存在极强的关联意义不可分离？ECharts提供了多图表联动的能力（connect），能做的不仅仅是鼠标划过的详情显示，连接的多个图表会共享组件事件并且实现了保存图片时的自动拼接。5.1.1ECharts的图表混搭-1：折柱混搭—双y轴在ECharts混搭的情况下：一个图表包含唯一图例、工具箱、数据区域缩放、值域漫游模块；一个图表包含一个直角坐标系（可包含一条或多条类目轴线，一条或多条值轴线，最多上下左右四条）。代码5-1演示了折柱混搭、双y轴的一个示例。在数据中的yAxis数组中，通过代码position:'right'来指定y轴安置的位置（默认安置'left'）；在数据中的series数组中，通过代码yAxisIndex:1，来指定使用第2个y轴（0代表第1个y轴，1代表第2个y轴）。5.1.1ECharts的图表混搭-1：折柱混搭—双y轴5.1.1ECharts的图表混搭-1：折柱混搭—双y轴5.1.1ECharts的图表混搭-1：折柱混搭—双y轴5.1.1ECharts的图表混搭-2：带水印的柱状图与饼图混搭在图5-2中，左边的两个柱状图和右边的两个饼图，共同组成了一个混搭的图表；程序首先定义了ECharts图表的数据、ECharts组件的数据、ECharts版本下载的数据、下载的主题的数据，然后设置了水印的各种格式，最后通过option指定了图表的配置项和数据。左边两个柱状图分别表示在线构建的各种不同图表及组件，折线图、柱状图和饼图最为常用；组件使用最多的是标题（title）、详情提示框（tooltip）、图例（legend）、网络（grid）；右边的两个饼图分别表示各种ECharts版本的下载情况的统计分析和各种主题（Themes）下载情况的统计分析。5.1.1ECharts的图表混搭-2：带水印的柱状图与饼图混搭5.1.1ECharts的图表混搭-2：带水印的柱状图与饼图混搭5.1.1ECharts的图表混搭-2：带水印的柱状图与饼图混搭5.1.1ECharts的图表混搭-2：带水印的柱状图与饼图混搭5.1.1ECharts的图表混搭-2：带水印的柱状图与饼图混搭5.1.1ECharts的图表混搭-2：带水印的柱状图与饼图混搭课程思政

开源共享，创新发展，创新和共享是ECharts得以迅速发展的关键因素。创新改变未来，共享席卷浪潮。要实现这个中华民族的伟大复兴中国梦，闭门造车、故步自封是不可取的。必须具有强大的科技实力和创新能力，同时也要开放思想，锐意进取。5.1.2ECharts的多图表联动-1：柱状图与柱状图简单图表联动当几组数据相互有关联时，或者当需要展示的数据比较多时，放在一个图表不好展示，体验也不好，此时，可以考虑使用几个图表进行联动展示。多图表联动支持直角系下tooltip的联动。EChart中的多图表联动，可以使用两种方法：方法1：分别设置每个ECharts对象的为相同的group值，然后通过调用ECharts对象的connect方法时，传入group值，从而使用多个ECharts对象建立联动关系。格式如下：myChart1.group='group1';//给第1个ECharts对象设置一个group值；myChart2.group='group1';//给第2个ECharts对象设置一个相同的group值；echarts.connect('group1');//调用ECharts对象的connect方法时，传入group值。5.1.2ECharts的多图表联动-1：柱状图与柱状图简单图表联动方法2：直接调用echarts的connect方法，参数为一个由多个需要联动的ECharts对象所组成的数组。格式如下：echarts.connect([myChart1,myChart2]);相反，解除已有的多图表联动，可以调用disConnect()方法。格式如下：echarts.disConnect('group1');在代码5-6实例，共有上、下两个柱状图，分别表示2021、2022两个年度的招生情况汇总，由于建立了联动，鼠标滑过2021年或2022年的人工智能专业柱体上时，系统会同时在2021年、2022年的人工智能专业上自动弹出相应的详情提示框（tooltip）。5.1.2ECharts的多图表联动-1：柱状图与柱状图简单图表联动5.1.2ECharts的多图表联动-1：柱状图与柱状图简单图表联动5.1.2ECharts的多图表联动-1：柱状图与柱状图简单图表联动课程思政

在2018年1月～2021年10月这四年中，全球超过100个国家和地区共新增65万件人工智能专利申请，其中申请数量最多的前三个国家分别为中国、美国、日本，专利申请量分别是44.5万件，占比68.5%；7.3万件，占比11.2%和3.9万件，占比6.0%。近年来，中国已成为人工智能专利申请的大国，远超第二名美国。值得一提的是，这4年内，中国人工智能专利申请量增速也始终以超出第二名1～2倍的速度高速增长，创新势头迅猛。5.1.2ECharts的多图表联动-2：柱状图与饼图-图表联动代码5-9绘制某学院各专业2018年至2022年的招生情况分析，图中共有两个图表：上面的饼图和下面的柱状图（也可以通过修改type为“line”改变为折线图）。当鼠标滑过上面的饼图的某个扇区时，上面的饼图出现的详情提示框（tooltip）显示相应扇区所对应的专业的总的招生人数及其所占总的招生人数的比例；下面的柱状图（或折线图）也会相应地出现详情提示框（tooltip），显示出对应年份的各个专业的招生人数的详细数据。5.1.2ECharts的多图表联动-2：柱状图与饼图-图表联动5.1.2ECharts的多图表联动-2：柱状图与饼图-图表联动5.1.2ECharts的多图表联动-2：柱状图与饼图-图表联动5.1图表混搭及多图表联动-小结图表混搭会使得图表更具表现力、也更有趣味。图表联动后，鼠标滑过多图表联动的图表时，会在两个或多个图表上显示两个或多个图表对应的详情提示框信息，将有较强关联的多个数据同时显示出来。目录1ECharts的图表混搭及多图表联动动态切换主题及自定义ECharts主题234异步数据加载与显示加载动画ECharts中的事件和行为5.2动态切换主题及自定义ECharts主题ECharts的默认的主题（theme）基本能满足大多数需求，但是，对于一个对颜色样式追求极致的人，可能ECharts的默认的主题已不能满足需求。ECharts为图表提供了多种主题，可以动态切换主题，在其官网上就提供了vintage，dark，macarons，infographic，shine，roma几种主题的选择。ECharts还有主题构造工具，用于自定义ECharts主题，以做到个性化定制。5.2.1ECharts4.x中动态切换主题ECharts是一款原生js写的图表类库，ECharts为打造一款数据可视化平台提供了良好的图表支持。百度Echarts团队提供了几种风格的主题。切换Echarts4.x主题的三个步骤：第1步：下载主题文件。在使用主题之前需要下载主题.js文件(在ECharts官网上下载官方提供的主题，如：macarons.js，或者自定义主题)，下载地址：https:///zh/download-theme.html。如图6‑5所示。第2步：引用主题文件。将下载得到的主题.js文件引用到HTML页面中。注意，如果ECharts主题中需要使用到jquery，则还应该再在页面中引用jquery的.js文件。第3步：指定主题名。ECharts对象初始化时，通过第2个参数来指定第2步所引入的主题名。如：varmyChart=echarts.init(document.getElementById('main'),主题名)。5.2.1ECharts4.x中动态切换主题5.2.1ECharts5.x中动态切换主题代码5-10运行结果如图5-5所示，它使用三种不同的颜色表示每个专业在2020年、2021年、2022年的招生情况。代码中首先引入主题的.js文件，同时，由于主题需要使用jquery，也要引入jquery.js文件。最后，使用jquery语句：$(this).val()来获得主题名称，在初始化ECharts实例时，通过第二个参数指定需要引入的主题。5.2.1ECharts4.x中动态切换主题5.2.1ECharts4.x中动态切换主题6.2.1ECharts4.x中动态切换主题6.2.2自定义ECharts主题ECharts中默认主题样式基本能满足我们的需求，但是，有时为了让自己的图表整体换个装，除了上一小节介绍过的官方提供的主题之外，还可以定制自己的主题。定制主题的步骤如下：第1步：打开ECharts的主题构建工具。首先进入ECharts官网，然后选择“工具”中的“主题构建工具”菜单选项，就可以打开主题构建工具的页面，主题构建工具的网址为：/theme-builder/#，如图5-7所示。5.2.2自定义ECharts主题5.2.2自定义ECharts主题第2步：选择和配置主题。在ECharts的主题构建工具中，有十几套默认主题方案供选择。如果这十几套默认主题方案还满足不了需求，那么就自己设置各种配置。ECharts提供了基本配置、视觉映射、坐标轴、图例、提示框、时间轴、数据缩放等等各个模块的样式的配置，各种配置相当丰富。如图5-8所示，对主题构建工具中的基本配置中的背景、标题、副标题等进行了相应的配置。5.2.2自定义ECharts主题5.2.2自定义ECharts主题第3步：配置文件下载。在ECharts主题样式配置完毕后，需要将配置文件下载，点击主题构建工具页面左上角的“下载”按钮，在弹出的“主题下载”对话框中，如图5-9所示，点击左边的“JS版本”选项卡，然后将其中的代码复制到所命名的“.JS”格式的文件中保存。ECharts提供了“.JS”、“.JSON”两种格式的文件，主题下载时应选择.JS版本的配置文件。下载好“.JS”格式的文件后，对“.JS”格式的文件的使用就与5.2.1小节的方法相同，请参考5.2.1小节中的“切换Echarts主题的步骤”。为了便于二次修改，ECharts

的主题构建工具支持导入、导出配置项，导出的配置可以通过导入恢复配置项。导出的JSON格式的文件仅用于在ECharts的主题构建工具中导入使用，而不能直接作为主题在ECharts页面中使用。5.2.2自定义ECharts主题5.2主题-小结“主题”是ECharts图表的风格抽象，用于统一多个图表的风格样式。ECharts官方提供的默认主题能满足大多数需求；还提供了vintage、dark、macarons、infographic、shine、roma等主题，可供下载使用。使用主题在线构建工具，可快速直观地生成主题配置文件，并在ECharts中使用自定义的主题样式。在此主题的基础上，仍然可以使用setOption覆盖或设置主题样式。目录1ECharts的图表混搭及多图表联动动态切换主题及自定义ECharts主题2ECharts中的事件和行为3异步数据加载与显示加载动画45.3ECharts中的事件和行为事件是用户或浏览器自身执行的某种动作，如click、mouseover、页面加载完毕后触发load事件，都属于事件。响应某个事件的函数叫事件处理程序（也叫事件处理函数、事件句柄）。在ECharts中，用户的任何操作，都可能会触发相应事件。作为开发者，可以监听这些事件，然后通过回调函数做相应处理，比如跳转到一个地址、或者弹出对话框、或者做数据下钻等。在ECharts3/4中，绑定事件跟ECharts2一样，都是通过on方法，但是事件名称比ECharts2更加简单。在ECharts3/4中，事件名称对应DOM事件名称，均为小写的字符串。5.3ECharts中的事件和行为在ECharts中，事件分为两种类型：鼠标事件，即鼠标操作点击图表的图形时（如click、dblclick、contextmenu）、或者hover图表的图形时（如：mouseover、mouseout、mousemove）触发的事件；用户在使用可以交互的组件后触发的行为事件，即调用

dispatchAction后触发的事件，例如在切换图例开关时触发legendselectchanged事件（这里需要注意切换图例开关是不会触发legendselected事件的），数据区域缩放时触发的datazoom事件等。5.3.1ECharts中鼠标事件的处理在ECharts中支持九种常规的鼠标事件：click、dblclick、mousedown、mousemove、mouseup、mouseover、mouseout、globalout、contextmenu。其中click事件最为常用。click：在目标元素上，单击鼠标左键时触发。不能通过键盘触发。dblclick：在目标元素上，双击鼠标左键时触发。mouseup：在目标元素上，鼠标按钮被释放弹起时触发。不能通过键盘触发。mousedown：在目标元素上,鼠标按钮（左键或右键）被按下时触发。不能通过键盘触发。mouseover：鼠标移入目标元素上方时触发。鼠标移动到其后代元素上时也会触发。5.3.1ECharts中鼠标事件的处理mousemove：鼠标在目标元素内部移动时不断触发。不能通过键盘触发。mouseout：鼠标移出目标元素上方时触发。globalout：鼠标移出了整个图表时触发。contextmenu：鼠标右击目标元素时触发，即鼠标右击事件，会弹出一个快捷菜单。在一个图表元素上相继触发mousedown和mouseup事件，才会触发click事件。两次click事件相继触发才会触发dblclick事件。如果取消了mousedown或mouseup中的一个，click事件就不会被触发。直接或间接取消了click事件，dblclick事件就不会被触发了。5.3.1ECharts中鼠标事件的处理-1：柱状图鼠标单击事件代码5-7的运行结果如图5-10至5-12所示。当点击图5-10中的“人工智能”柱体后，首先弹出一个提示对话框如图5-11，然后自动打开相应的百度搜索页面如图5-12。程序通过通过

on

方法来绑定鼠标的单击事件（click），鼠标事件都包含一个参数params，获得用户在“人工智能”柱体上单击了鼠标，再通过window.alert()方法弹出一个对话框，最后通过window.open()方法自动打开一个新的搜索网页，open()方法至少带一个参数用于指定打开的新网页的网址，open()方法还可带多个其它参数用于指定新打开网页的其它属性。5.3.1ECharts中鼠标事件的处理-1：柱状图鼠标单击事件5.3.1ECharts中鼠标事件的处理-1：柱状图鼠标单击事件5.3.1ECharts中鼠标事件的处理-1：柱状图鼠标单击事件5.3.1ECharts中鼠标事件的处理-1：柱状图鼠标单击事件5.3.1ECharts中鼠标事件的处理-2：鼠标点击事件中的参数params在ECharts中，所有的鼠标事件都包含一个参数params，它是一个包含点击图形的数据信息的对象，params里面有一些基本属性（其它图表可能会有部分附加属性，比如饼图会有percent属性表示百分比），params的基本属性含义如下：componentType:string，当前点击的图形元素所属的组件名称，其值如'series'、'markLine'、'markPoint'、'timeLine'等。seriesType:string，系列类型。其值可能为：'line'、'bar'、'pie'等。当componentType为'series'时有意义。seriesIndex:number，系列在传入的option.series中的index。当componentType为'series'时有意义。5.3.1ECharts中鼠标事件的处理-2：鼠标点击事件中的参数paramsseriesName:string，系列名称。当componentType为'series'时有意义。name:string，数据名，类目名。dataIndex:number，数据在传入的data数组中的index。data:Object，传入的原始数据项。dataType:string：sankey、graph等图表同时含有nodeData和edgeData两种data，dataType的值会是'node'或者'edge'，表示当前点击在node还是edge上。其他大部分图表中只有一种data，dataType无意义。value:number|Array，传入的数据值。color:string，数据图形的颜色，当componentType为'series'时有意义。5.3.1ECharts中鼠标事件的处理-2：鼠标点击事件中的参数params可以在回调函数中获得对象中的数据名、系列名称，然后在数据中索引得到其它的信息后，再更新图表、显示浮层等。回调函数：回调函数本身是主函数的一个参数，将回调函数作为参数传到另一个主函数里面，当主函数执行完之后，再执行这个回调函数。这个过程就叫做回调。所谓回调，就是回头调用的意思，主函数的代码执行完成之后，回过头来再调用传进来的这个回调函数。5.3.1ECharts中鼠标事件的处理-2：鼠标点击事件中的参数params代码5-8的运行结果如图5-13和图5-14所示。当点击图5-13中的第2件产品“羊毛衫”的“产量”柱体后，弹出一个提示对话框如图5-14，通过调用回调函数，访问鼠标事件的参数params中的基本属性，如：params.dataIndex、、params.seriesName、params.value，在第一行显示出“第2件产品:羊毛衫产量为羊毛衫:38”。最后的十行代码依次访问鼠标事件的参数params中的10种基本属性，并依次显示在提示对话框中的每一行。注意，其中params.data，params.dataType的值为undefined。5.3.1ECharts中鼠标事件的处理-2：鼠标点击事件中的参数params5.3.1ECharts中鼠标事件的处理-2：鼠标点击事件中的参数params5.3.1ECharts中鼠标事件的处理-2：鼠标点击事件中的参数params5.3.2ECharts组件交互的行为事件ECharts中基本上所有的组件交互行为都会触发相应的事件，即调用

dispatchAction

后触发的事件。在ECharts中有如下交互事件：legendselectchanged：切换图例选中状态后的事件(注：图例组件用户切换图例开关会触发该事件,不管你有没有选择，点击了就触发)。Legendselected：图例选中后的事件，即点击显示该图例时，触发就生效。legendunselected：

legendUnSelect图例取消选中事件。datazoom：数据区域缩放事件。缩放视觉映射组件。datarangeselected：selectDataRange视觉映射组件中，range值改变后触发的事件。5.3.2ECharts组件交互的行为事件timelinechanged：timelineChange时间轴中的时间点改变后的事件。timelineplaychanged：timelinePlayChange时间轴中播放状态的切换事件。restore：restore重置option事件。dataviewchanged：工具栏中数据视图的修改事件。magictypechanged：工具栏中动态类型切换的切换事件。geoselectchanged：geo中地图区域切换选中状态的事件（用户点击选中会触发该事件）。geoselected：geo

中地图区域选中后的事件（使用dispatchAction可触发此事件，用户点击不会触发此事件（用户点击事件请使用geoselectchanged））。5.3.2ECharts组件交互的行为事件geounselected：geo

中地图区域取消选中后的事件，使用dispatchAction可触发此事件，用户点击不会触发此事件（用户点击事件请使用

geoselectchanged）。pieselectchanged：series-pie

中饼图扇形切换选中状态的事件，用户点击选中会触发该事件。pieselected：series-pie

中饼图扇形选中后的事件，使用dispatchAction可触发此事件，用户点击不会触发此事件（用户点击事件请使用pieselectchanged）。pieunselected：series-pie

中饼图扇形取消选中后的事件，使用dispatchAction可触发此事件，用户点击不会触发此事件（用户点击事件请使用pieselectchanged）。Mapselectchanged:

series-map

中地图区域切换选中状态的事件,用户点击选中会触发该事件.5.3.2ECharts组件交互的行为事件mapselected：series-map

中地图区域选中后的事件，使用dispatchAction可触发此事件，用户点击不会触发此事件（用户点击事件请使用mapselectchanged）。mapunselected：series-map中地图区域取消选中后的事件，使用dispatchAction可触发此事件，用户点击不会触发此事件（用户点击事件请使用mapselectchanged）。axisareaselected：平行坐标轴(Parallel)

范围选取事件。下列代码是在代码5-7基础上增加的一段代码，演示了图例选中事件，其运行结果如下图所示。代码中触发图例开关事件（'legendselectchanged'），通过调用回调函数，在控制台中打印出用户的点击操作：先后“取消选中图例--销量”、“选中图例--销量”、“取消选中图例--产量”、“选中图例--产量”。5.3.2ECharts组件交互的行为事件-1：图例选中事件5.3.2ECharts组件交互的行为事件-1：图例选中事件5.3.2ECharts组件交互的行为事件-2：dataZoom(数据区域缩放组件)事件代码5-14演示了dataZoom（数据区域缩放组件）事件，其运行结果如图5-14所示。在图5-14中，有上、下两个图表，两个图表使用相同的随机生成300个随机数据，只是上面的图表表现为一个折线图，而下面的图表表现为一个柱状图。通过调用在上面的图表滚动鼠标，会带动下面的图表同步变化，这主要因为鼠标在上面的图表中滚动时，会产生dataZoom（数据区域缩放组件）事件，代码在最后一段中，对dataZoom（数据区域缩放组件）事件做了相应的处理。5.3.2ECharts组件交互的行为事件-2：dataZoom(数据区域缩放组件)事件5.3.2ECharts组件交互的行为事件-2：dataZoom(数据区域缩放组件)事件5.3.2ECharts组件交互的行为事件-2：dataZoom(数据区域缩放组件)事件5.3.2ECharts组件交互的行为事件-2：dataZoom(数据区域缩放组件)事件5.3.2ECharts组件交互的行为事件-2：dataZoom(数据区域缩放组件)事件5.3.2ECharts组件交互的行为事件-2：dataZoom(数据区域缩放组件)事件5.3.3ECharts组件交互的行为事件-3：代码触发ECharts中组件的行为上一小节演示了用户的交互操作，但有时也会需要在程序里调用方法并触发图表的行为，比如显示tooltip、选中图例。与ECharts2.x不同，在ECharts3.x和ECharts4.x中，通过dispatchAction({type:''})来触发图表行为，统一管理了所有动作，也可以根据需要去记录用户的行为路径。代码5-11演示了如何通过dispatchAction去循环高亮圆环图的每个扇区。代码5-15的运行结果如图5-15所示。它有如下动画效果：(1)在高亮的扇区上显示tooltip。(2)鼠标没有移入时，饼图自动循环高亮各扇区。(3)鼠标移入时，取消自动循环高亮，只高亮鼠标选中的那一个扇区。(4)鼠标移出后，又恢复自动循环高亮各扇区。5.3.3ECharts组件交互的行为事件-3：代码触发ECharts中组件的行为代码5-10演示了dataZoom（数据区域缩放组件）事件，其运行结果如图5-16所示。代码5-10主要通过dispatchAction({type:'xx'})来触发图表行为，type:'xx'中引号中的内容'xx'（如：'highlight'、'downplay'、'showTip'）用于指定具体的行为。在程序运行时，代码通过检测鼠标的行为（鼠标移上去，鼠标移出）来相应地调用相应的回调函数，myChart.on('mouseover',function(param)（鼠标移上去时的动画效果），myChart.on('mouseout',function(param)（鼠标移出之后的动画效果）。代码中有如下行为：type:'highlight', //高亮当前图形；type:'downplay', //取消之前高亮的图形；type:'showTip', //显示tooltip。5.3.3ECharts组件交互的行为事件-3：代码触发ECharts中组件的行为5.3.3ECharts组件交互的行为事件-3：代码触发ECharts中组件的行为5.3.3ECharts组件交互的行为事件-3：代码触发ECharts中组件的行为5.3.3ECharts组件交互的行为事件-3：代码触发ECharts中组件的行为5.3.3ECharts组件交互的行为事件-3：代码触发ECharts中组件的行为5.3.3ECharts组件交互的行为事件-3：代码触发ECharts中组件的行为目录1ECharts的图表混搭及多图表联动动态切换主题及自定义ECharts主题2ECharts中的事件和行为3异步数据加载与显示加载动画45.4异步数据加载与显示加载动画以前的课程，在setOption中直接填入数据。大部分时候，需要将数据异步加载后再填入。ECharts

中实现异步数据的更新的操作其实不难，有如下二种方法。方法1：分为两步：首先设置完图表样式，显示一个空的直角坐标轴；然后获取数据后填入数据并显示图表。如代码5-12所示。方法2：在初始化图表后的任何时间，都可通过使用jQuery等工具异步获取数据后通过setOption

填入数据和配置项。代码5-13演示了异步数据加载的简单示例。5.4.1异步数据加载与显示加载动画(可选)：简单异步数据加载示例代码5-11的运行结果如图5-17所示。它有如下特点：没有在代码中输入所要展示的数据，而是从本地文件“../../data/ch5_5_12_data.json”中获取数据。具体数据格式和内容如下所示：

{

"data_pie":[

{"value":490,"name":"软件技术"},

{"value":410,"name":"计算机网络技术"},

{"value":399,"name":"大数据技术"},

{"value":214,"name":"人工智能技术"},

{"value":196,"name":"云计算技术"},

{"value":123,"name":"移动应用技术"}

]}5.4.1异步数据加载与显示加载动画(可选)：简单异步数据加载示例数据异步加载方法分为两步：第一步：先设置完其它的样式，显示一个空的直角坐标轴；第二步：获取数据后再填入数据。使用了加载动画。即在在加载数据前，先显示加载动画；加载数据完成后，再隐藏加载动画。5.4.1异步数据加载与显示加载动画(可选)：简单异步数据加载示例5.4.1异步数据加载与显示加载动画(可选)：异步数据加载绘制饼图代码5-16的运行结果如图5-17所示。它有如下特点：没有在代码中输入所要展示的数据，而是从本地文件“ch5_12_data.json”获取数据。数据文件内容如下所示。使用了加载动画。即在在加载数据前，先显示加载动画；加载数据完成后,再隐藏加载动画。5.4.1异步数据加载与显示加载动画(可选)：简单异步数据加载示例5.4.1异步数据加载与显示加载动画(可选):异步数据加载绘制饼图5.4.1异步数据加载与显示加载动画(可选):异步数据加载绘制饼图5.4.1异步数据加载与显示加载动画(可选)：异步数据加载绘制饼图5.4.1异步数据加载与显示加载动画(可选)：异步数据加载绘制饼图异步加载数据时，需要配置ChromeGoogle浏览器以支持AJAX请求。具体操作如下：鼠标放在桌面的右上角，点击出现的“搜索”按钮，，找到“GoogleChrome”图标（可以在文本框中输入’g’来快速搜索）,右击该图标，点击最下面右边的“打开文件位置”图标；右击“ChromeGoogle”快捷方式图标，选择快捷菜单中最下面的“属性”菜单项；在弹出的“ChromeGoogle属性”对话框中，在其中的“目标”文本框中添加如下内容：--allow-file-access-from-files，再点击“确定”按钮。如图5-20所示。打开“ChromeGoogle”浏览器；将网页文件拖放到打开的“ChromeGoogle”浏览器中。如果是在没有配置好的浏览器中打开异步数据加载页面，则会出现类似如下的错误信息：“jquery.js:9600AccesstoXMLHttpRequestat'file:///XXX.json'fromorigin'null'hasbeenblockedbyCORSpolicy:Crossoriginrequestsareonlysupportedforprotocolschemes:http,data,chrome,chrome-extension,https.”以上出错提示为跨域的报错。5.4.2异步数据加载与显示加载动画(可选)：异步数据加载绘制饼图5.4.1异步数据加载与显示加载动画(可选)：异步数据加载绘制饼图如果上面方法不能正常打开页面，还可以试一下如下方法：在VSCode中，右击要打开的.html文件，在弹出的快捷菜单中，选择最上面的菜单选项“openwithLiveServer”，也可以打开需要访问json文件的.html网页文件。如图5-21所示。5.4.1异步数据加载与显示加载动画(可选)：异步数据加载绘制饼图还有第三种方法来打开访问json文件的网页：将网页放入tomcat容器中，然后启动server，开启服务器模式，在浏览器中通过http://localhost:8080/要打开的网页名.ht