《JavaWeb数据可视化开发实战》课件 第3章 ECharts高级图表及组件

2025第3章ECharts高级图表及组件延时符《JavaWeb数据可视化开发教程》65%知识目标掌握仪表盘、漏斗图的基本概念和构成，掌握ECharts常用组件的功能及配置。95%技能目标掌握定制仪表盘、漏斗图、金字塔图，配置常用组件来增强图表的交互性和可读性。45%思政目标培养坚定的自我驱动力，严谨的逻辑思维和细致的工作态度，强化问题解决能力，延时符学习目标目录CONTENTSPART01绘制仪表盘延时符PART02绘制漏斗图或金字塔PART03Echarts组件PART04实战演练电商预警服务网页行业PPT模板/hangye/1绘制仪表盘延时符延时符01绘制单个仪表图形option={series:[{name:"Pressure",type:"gauge",data:[{value:50,name:"temp"}]}]};

仪表盘(Gauge)也称拨号图表或速度表图

，通常用于展示一个或多个关键性能指标的当前状态，如完成率、进度、速度等，使用户能够快速了解核心数据所在的范围和状态。属性ECharts提供了丰富的配置选项，允许用户根据实际的数据和场景自定义仪表盘图的各种元素，01center表示中心（圆心）坐标，值为数组，其第一项是横坐标，第二项是纵坐标。02radius即仪表盘半径，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。03startAngle、endAngle仪表盘起始/结束角度。04延时符01绘制单个仪表图形05clockwise仪表盘刻度是否是顺时针增长。min、max最小/大的数据值，映射到minAngle/maxAngle。06splitNumber仪表盘刻度的分割段数。07axisLine仪表盘轴线相关配置。延时符01绘制单个仪表图形文件3-1-1.html实现了一个关于速度的仪表盘，对仪表盘的半径、刻度、速度等进行基本配置。延时符02绘制多个仪表图形当需要同时监控和比较多个关键指标，从多个维度综合评估，跟踪多个参数开展数据关联分析，需要多仪表盘常构建一个信息丰富的仪表板。

文件3-1-2.html实现一个汽车仪表盘面板，对仪表盘的半径、位置、刻度、显示弧度等进行基本配置。2绘制漏斗图或金字塔延时符延时符01绘制单个漏斗图ECharts中的漏斗图和金字塔图是两种常用的图表类型，它们通常用于展示数据在不同阶段的分布和变化情况。option={title:{text:"Funnel",left:"center"},series:[{name:"Funnel",type:"funnel",left:"10%",top:60,bottom:60,width:"80%",min:0,max:100,minSize:"0%",maxSize:"100%",

sort:"descending",gap:2,label:{show:true,position:"inside"},itemStyle:{borderColor:"#fff",borderWidth:1},data:[{value:60,name:"Visit"},{value:40,name:"Inquiry"},{value:20,name:"Order"},{value:80,name:"Click"},{value:100,name:"Show"}]}]};属性03min、max定义了数据的最小和最大范围，这里分别是0和100。04minSize、maxSize定义了漏斗图每个部分的最小和最大宽度比例。01type指定图表类型为funnel，即漏斗图02sort指定排序方式为descending，即降序；升序则为ascending延时符01绘制单个漏斗图使用ECharts绘制漏斗图，不需要配置坐标轴.05gap漏斗图中每个块之间的间隔。06data定义每一块的名称name及大小value延时符01绘制单个漏斗图

文件3-2-1.html实现了一个销售流程转化率的漏斗图，对漏斗图的类型、排序方式、数据等进行基本的配置。延时符02绘制多个漏斗图在多个流程或层级结构之间进行比较分析就需要多个图表，绘制多个漏斗图或者金字塔图形，需要配置每个图形的位置属性。

文件3-2-2.html实现包含漏斗图和金字塔图两种图形，对两个图形的排序方式、显示位置、数据等进行了基本配置。3ECharts组件延时符延时符01标题和图例标题和副标题常见属性如下：show：是否显示标题组件，boolen类型。text：主标题文本，支持使用\n换行，string类型。subtext：副标题文本。textStyle：对象和subtextStyle对象属性。color：主标题文字的颜色。fontStyle：主标题文字字体风格，可取"normal"、"italic"、"oblique"。fontWeight：主标题文字字体粗细，可取"normal"、"bold"、"bolder"、"lighter"。fontSize：主标题文字字体大小。延时符01标题和图例图例属性如下：left：图例组件到容器左侧的距离。top：图例组件到容器上侧的距离。width：图例组件的宽度，默认自适应。height：图例组件的高度，默认自适应。orient：图例列表的布局朝向。itemWidth：图例标记的图形宽度。itemHeight：图例标记的图形高度。right：图例组件到容器右侧的距离，与left属性配置一致。bottom：图例组件到容器下侧的距离，与top属性配置一致。align：图例列表对齐方式，一般与orient属性配合使用。padding：图例内边距，单位px，默认各方向内边距为5。itemGap：图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。延时符01标题和图例

文件3-3-1.html实现了网站各类别访问量柱状图的标题和图例。延时符02网格和坐标轴网格即grid组件，用于控制图表布局和位置，将图表分割成多个区域，放置不同的图表系列其常见属性如下：show：是否显示直角坐标系网格。left：grid组件到容器左侧的距离。top：grid组件到容器上侧的距离。width：grid组件的宽度。height：grid组件的高度。backgroundColor：背景色，默认透明。borderColor：网格的边框颜色。borderWidth：网格的边框线宽。延时符02网格和坐标轴直角坐标系中的x轴对应xAxis组件，y轴对应yAxis。它们都由轴线、刻度、刻度标签、轴标题四部分组成。常见属性如下：gridIndex：x轴所在的grid的索引，默认位于第一个grid。position：x轴的位置，可为“top”或者“bottom”。type：坐标轴类型。name：坐标轴名称。nameLocation：坐标轴名称显示位置。为“start”、“middle”或者“center”、“end”。splitLine：坐标轴刻度线在grid区域中的分隔线。默认数值轴显示，类目轴不显示。splitArea：坐标轴在grid区域中的分隔区域，默认不显示。data：类目数据，在类目轴（type:"category"）中有效。延时符02网格和坐标轴文件3-3-2.html使用网格实现绘图区域切割为4个区域，并绘制不同的图形，第一个grid使用2个轴线；第4个grid中使用坐标轴分割线；对轴线axisLine和轴线axisLabel进行相关配置，实现轴线与标签的样式。延时符03工具箱

ECharts的toolbox为工具箱，为用户提供一系列辅助功能，包括：saveAsImage保存为图片、restore配置项还原、dataView数据视图工具、dataZoom数据区域缩放、magicType动态类型切换、brush选框等6个工具，增强了图表的可操作性和互动性。通过配置这些工具，可以使图表更加符合特定的数据分析需求。具体属性如下：orient：工具箱icon的布局朝向。可选："horizontal"、"vertical"。itemSize：工具箱icon的大小。itemGap：工具箱icon每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。showTitle：是否在鼠标hover的时候显示每个工具icon的标题。延时符03工具箱文件3-3-3.html实现一个图表工具箱的配置，包含以下功能：保存为图片、配置项还原、数据视图工具、放大/缩小、动态类型切换。延时符04提示框在ECharts中，提示框组件tooltip是一个非常关键的组件，它主要用于显示图表中数据点的详细信息，通常以弹出框的形式出现。可以设置在全局、坐标系中、系列中、系列的每个数据项中，常用属性如下：show：是否显示提示框组件，可选为true和false。trigger：触发类型。可选："item"即数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用；"axis"即坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用；"none"即什么都不触发。延时符04提示框文件3-3-4.html实现触发类型为坐标轴触发的提示框。延时符05标记点和标记线标记点常用属性：(1)symbol属性即标记点类型，包括"circle","rect","roundRect","triangle","diamond","pin","arrow","none"。(2)data属性即标记点数据，为对象数组。可配置以下两个子属性：位置：可以设置x,y属性指定相对容器的屏幕坐标，单位像素,支持百分比；也可以设置coord属性指定数据在相应坐标系上的坐标位置，单个维度可选"min","max","average"。类型：用type属性标注系列中的最大值，最小值，此时可以使用valueIndex或者valueDim指定是在哪个维度上的最大值、最小值、平均值。延时符05标记点和标记线标记点常用属性：(1)symbol，即标记点类型，包括"circle","rect","roundRect","triangle","diamond","pin","arrow","none"。(2)Data，即标记点数据，为对象数组。可配置以下两个子属性：位置：可以设置x,y属性指定相对容器的屏幕坐标，单位像素,支持百分比；也可以设置coord属性指定数据在相应坐标系上的坐标位置，单个维度可选"min","max","average"。类型：用type属性标注系列中的最大值，

最小值，此时可以使用valueIndex或者valueDim指定是在哪个维度上的最大值、

最小值、平均值。延时符05标记点和标记线标记线常见属性：symbol：标线两端的标记类型，可以使用一个数组分别指定两端，或者单个统一指定。symbolSize：标线两端的标记大小，可以使用一个数组分别指定两端，或者单个统一指定。当多个属性同时存在时，优先级顺序是特定于用户当前所使用的图表库和版本，此时应查阅官方文档了解。优先级按上述的顺序。data：标线的数据数组，数组中

包含两个值，分别表示线的起

点和终点，每一项是一个对象。延时符05标记点和标记线文件3-3-5.html实现使用标记点标出最大最小值，使用标