ECharts数据可视化 课件 第5章 仪表盘、漏斗图和折线树图.pptx

第5章仪表盘、漏斗图和折线树图《ECharts数据可视化》

学习目标/Target掌握仪表盘的相关配置，能够设置仪表盘的半径、轴线、刻度、分隔线等掌握仪表盘的指针、指针固定点、刻度标签的使用方法，能够设置图表指针、指针固定点、刻度标签等掌握漏斗图样式的设置方法，能够设置漏斗图的数据排列顺序、漏斗图每部分的间距、漏斗图每部分的名称等掌握漏斗图的文本标签和视觉引导线的使用方法，能够设置图表的文本标签和视觉引导线

学习目标/Target掌握折线树图的使用方法，能够设置图表数据的定义和样式等掌握常见仪表盘的绘制，能够完成进度仪表盘和时钟仪表盘的绘制掌握常见漏斗图的绘制，能够完成标准漏斗图和对比漏斗图的绘制掌握常见折线树图的绘制，能够完成折线树图的绘制

章节概述/Summary仪表盘、漏斗图和折线树图都是常用的数据可视化图表。仪表盘可以让用户在一张图表上查看所关心的关键指标，并直观地了解目标是否达成；漏斗图则常用于展示一个过程或流程中每个关键步骤中的转换率，以便发现流程中可能存在的问题；而折线树图用于展示某个总体数据中各个细分领域的表现趋势和关系。本章详细讲解仪表盘、漏斗图和折线树图的基本使用。

目录/Contents5.15.2常见的仪表盘常见的漏斗图和折线树图

常见的仪表盘5.1

绘制进度仪表盘【任务5.1.1】

任务需求某公司正在开发一款游戏App，晓月担任项目经理，负责把控项目的整体开发进度。当项目的整体开发进度超过50%后，晓月汇总了每项任务的实际开发进度，并将其整理成表格的形式。晓月想以进度仪表盘的形式查看项目的实际开发进度，从而直观地了解项目进展情况，并及时做出调整，以保证项目的顺利完成。本任务需要基于项目实际进度绘制进度仪表盘。

项目实际进度如下表所示。工作内容当前状态每项任务的比重（%）每项任务的实际完成进度（%）需求调研已完成5100产品设计已完成20100UI设计已完成25100前后端开发正在进行2070测试未开始200上线未开始100任务需求

知识储备1.初识仪表盘先定一个小目标！了解什么是仪表盘，能够说出仪表盘的组成

知识储备1.初识仪表盘在ECharts中，一个简单的仪表盘组成如下图所示。

知识储备1.初识仪表盘仪表盘各组成部分介绍如下。刻度标签：用于表示仪表盘的刻度数值。刻度线：用于表示仪表盘的刻度线。分隔线：用于分隔仪表盘的刻度线，增加仪表盘的可读性和美观度。标题：用于表示仪表盘的主要名称和概要信息。详情：用于表示仪表盘的详细信息。轴线：用于显示刻度线和标识数值范围。指针：用于指示当前数值在仪表盘上的位置。指针固定点：用于表示指针的根部。

在ECharts中绘制进度仪表盘时，需要将系列的type属性设置为gauge。series:[{type:gauge}]指定该系列图表类型为进度仪表盘1.初识仪表盘知识储备

知识储备先定一个小目标！掌握仪表盘的相关配置，能够设置仪表盘的半径、轴线、刻度、分隔线等2.仪表盘的相关配置

知识储备2.仪表盘的相关配置ECharts提供了一系列属性用于配置仪表盘的样式，设置仪表盘的常用属性如下表所示。属性说明radius用于设置仪表盘的半径name用于设置系列名称，用于tooltip的显示，legend的图例筛选，在setOption()方法中更新数据和配置项时用于指定对应的系列min用于设置最小的数据值，默认值为0max用于设置最大的数据值，默认值为100splitNumber用于设置仪表盘刻度的分割段数，默认值为10axisLine用于设置仪表盘轴线相关的配置axisTick用于设置仪表盘刻度样式splitLine用于设置仪表盘分隔线样式detail用于设置仪表盘详情，用于显示数据startAngle用于设置仪表盘起始角度，默认值为225，单位为度

知识储备2.仪表盘的相关配置接上表属性说明endAngle用于设置仪表盘结束角度，默认值为-45，单位为度title用于设置仪表盘标题itemStyle用于设置仪表盘指针样式data用于设置仪表盘的数据内容，该数据内容是一个数组，每个数组元素可以为单个数值、数组或对象clockwise用于设置仪表盘刻度是否是顺时针增长，默认值为true，表示顺时针增长animation用于设置是否开启动画，默认值为true，表示开启动画，设为false表示关闭动画animationEasingUpdate用于设置数据更新动画的缓动效果animationDurationUpdate用于设置数据更新动画的时长，默认值为300，单位毫秒

知识储备（1）radius属性radius