ECharts数据可视化 课件 第2章 折线图和饼图.pptx

第2章折线图和饼图《ECharts数据可视化》

学习目标/Target熟悉引入并配置ECharts的方法，能够归纳引入并配置ECharts的步骤掌握坐标轴组件的使用方法，能够设置图表的x轴、y轴掌握系列组件、标题组件、图例组件的使用方法，能够设置图表的系列、标题、图例掌握数据堆叠的使用方法，能够设置数据堆叠掌握折线图文本标签的使用方法，能够设置文本标签的显示状态、位置等

学习目标/Target掌握区域填充样式的设置方法，能够设置区域填充样式掌握网格组件、提示框组件、工具栏组件的使用方法，能够设置图表的网格、提示框、工具栏掌握数据集组件的使用方法，能够使用数据集定义数据掌握平滑曲线图的设置方法，能够将图表设置为平滑曲线图掌握饼图半径的使用方法，能够设置饼图的半径

学习目标/Target掌握饼图文本标签的使用方法，能够设置文本标签的显示状态、位置等掌握南丁格尔图的设置方法，能够将图表设置为南丁格尔图掌握折线图的绘制，能够完成基础折线图、堆叠折线图、区域面积图、堆叠面积折线图、阶梯折线图和平滑曲线图等的绘制掌握饼图的绘制，能够完成基础饼图和南丁格尔图的绘制

章节概述/Summary在日常生活中，我们经常使用图表来整理和分析数据，以便得出更好的结论。在众多图表类型中，折线图和饼图相对比较简单，更适合ECharts初学者学习。因此，本书将以折线图和饼图作为切入点，帮助读者打好基础，为后续学习其他图表提供支撑。本章将针对如何使用ECharts绘制折线图和饼图进行详细讲解。

目录/Contents2.12.2常见的折线图常见的饼图

常见的折线图2.1

绘制基础折线图【任务2.1.1】

任务需求最近，某互联网公司出现了利润下降的情况。为了找出原因，该公司的领导决定使用用户浏览量这一指标进行调查，并据此制定相关决策。会议结束后，运营总监整理了最近一周内的用户浏览量报表。他希望绘制一个基础折线图来更好地展示最近一周内的用户浏览量的变化情况。本任务需要基于最近一周内用户浏览量绘制基础折线图。

最近一周内用户浏览量（单位：次）如下表所示。星期浏览量周一20000周二22000周三25000周四20000任务需求星期浏览量周五28000周六24700周日20000--

知识储备1.引入并配置ECharts先定一个小目标！熟悉引入并配置ECharts的方法，能够归纳引入并配置ECharts的步骤

知识储备1.引入并配置ECharts在使用ECharts绘制图表之前，需要引入并配置ECharts。在HTML中引入ECharts，示例代码如下。scriptsrc=./echarts.js/script上述示例代码通过script标签的src属性引入了echarts.js文件后，会获得一个名称为echarts的对象，该对象提供了init()方法，用于创建ECharts实例对象。

知识储备1.引入并配置EChartsinit()方法的语法格式如下。echarts.init(dom);在上述语法格式中，init()方法的参数dom用于指定渲染的图表将被放置在哪个DOM容器中。init()方法的返回值是ECharts实例对象。

知识储备1.引入并配置ECharts在调用init()方法之后，可以通过ECharts实例对象的setOption()方法设置图表的配置项。setOption()方法的语法格式如下。setOption(option[,notMerge]);在上述语法格式中，setOption()方法的第1个参数option是一个包含了要设置的图表配置项的对象，第2个参数notMerge是一个可选参数，表示是否不与已有的配置项合并，默认值为false，表示允许新的配置项和已有配置项合并；如果设为true，则表示不允许新的配置项和已有配置项合并，已有配置项都会被删除，然后根据新的配置项重新渲染图表。

知识储备1.引入并配置ECharts在调用setOption()方法时，通过设置不同的配置项，可以实现不同类型的图表的绘制。图表的配置项由多个组件的配置项组成，包括坐标轴组件、系列组件、图例组件、网格组件、标题组件、提示框组件、工具栏组件等。所有配置项的修改都可以通过setOption()方法完成。当多次调用setOption()方法时，ECharts实例对象会自动合并新的配置项和已有的配置项，然后根据合并后的配置项重新渲染图表。因此，当修改图表的配置项时，不需要手动处理图表的刷新和更新，只需要确保传递给setOption()方法的新配置项是正