ECharts课堂（大数据可视化）组件

目录

一、学习目标

掌握各组件的属性设置

学会使用echarts速查手册，帮助完成图表绘制的能力。

具备独立完成基本图表的能力。

二、本节任务

（一）任务描述

（二）任务分解

1. echarts基本组件

         2.各组件参数设置

title标题组件：

legend图例：

grid：直角坐标系下的网格

直角坐标系下的坐标轴

toolbox工具箱组件

详情提示框组件

标记点

标记线

echarts模板

---

 

一、学习目标

1. 掌握各组件的属性设置

2. 学会使用echarts速查手册，帮助完成图表绘制的能力。

3. 具备独立完成基本图表的能力。

二、本节任务

（一）任务描述

    echarts图表开发中，最核心的工作是对配置项属性的设置；在配置项中，需要对各组件的属性比较熟悉，能够通过ECHARTS提供的用户速查手册解决图表开发中遇到的各种问题，锻炼学生的自学能力

（二）任务分解

1. echarts基本组件

名词	描述
title	标题组件，用于设置图表标题
xAxis	直角坐标系中的横轴，通常默认为类目型
yAxis	直角坐标系中的纵轴，通常默认为数值型
grid	直角坐标系中除坐标轴外的绘图网格，用于定义直角系整体布局
legend	图例组件，用于表达数据和图形的关联
markPoint	标记点，用于标记图表中特定的点
markLine	标记线，用于标记图表中特定的值
dataZoom	数据区域缩放，用于展现大量数据时选择可视范围
visualMap	视觉映射组件，用于将数据映射到视觉元素
toolbox	工具箱组件，用于为图表添加辅助功能，如添加标线、框选缩放等
tooltip	提标框组件，用于展现更详细的数据
timeline	时间轴，用于展现同一系列数据在时间维度上的多份数据
series	数据系列，一个图表可能包含多个系列，每个系列可能包含多个数据

        2.各组件参数设置

title标题组件：

参数	值	描述
{boolean} show	true	是否显示标题组件，可选为：true（显示）和false（隐藏）
{string} text	' '	主标题文本，'\n'指定换行
{string} subtext	' '	副标题文本，'\n'指定换行
{string|number} x	'left'	水平安放位置，单位px，可选为'center'、'left'、'right'、{number}
{string|number} y	'top'	垂直安放位置，单位px，可选为'top'、'bottom'、'center'、{number}
{string} textAlign	'auto'	水平对齐方式，可选为'auto'、left'、'right'、'center
{color} backgroundColor	'transparent'	标题背景颜色
{string} borderColor	'#ccc'	标题边框颜色
{number} borderWidth	0	标题边框线宽，单位为px
{number} padding或{Array} padding	5	标题内边距，单位为px，见标题组件属性示意图
{number} itemGap	10	主副标题纵向间隔，单位为px
{Object} textStyle	{color: '#333', fontWeight:' normal',fontSize:18,}	主标题文本样式
{Object} subtextStyle	{color: '#aaa' fontWeight:'normal', fontSize:12,}	副标题文本样式

legend图例：

        图例（legend）组件是ECharts中较为常用的组件，它用于以不同的颜色区别系列标记的名字，表述了数据与图形的关联。用户在操作时，可以通过单击图例控制哪些数据系列显示或不显示。

参数	默认值	描述
{boolean} show	true	是否显示图例，可选为：true（显示）和false（隐藏）
{string} type	'plain'	图例的类型，可选为：'plain'（普通）和'scroll'（可滚动翻页）
{number} zlevel	0	同网格组件参数属性表
{number} z	2	同网格组件参数属性表
{string} orient	'horizontal'	布局方式，可选为：'horizontal'和'vertical'
{string} x或{number} x	'center'	水平安放位置，单位为px，可选为：'center'、'left'、'right'、{number}
{string} y或{number} y	'top'	垂直安放位置，单位为px，可选为：'top'、'bottom'、'center'、{number}
{color} backgroundColor	'transparent'		图例背景颜色
{string} borderColor	'#ccc'		图例边框颜色
{number} borderWidth	0		图例边框线宽，单位为px
{number} padding或{Array} padding	5		图例内边距，单位为px，见图例组件属性示意图
{number} itemGap	10		各个item之间的间隔，单位为px，横向布局时为水平间隔，纵向布局时为纵向间隔，见图例组件属性示意图
{number} itemWidth	25		图例标记的图形宽度
{number} itemHeight	14		图例标记的图形高度
{Object} textStyle	{color: '#333'}		图例的公用文本样式，可设color为'auto'

grid：直角坐标系下的网格

        Echarts中的网格是直角坐标系下定义网格布局和大小及颜色的组件，用于定义直角坐标系整体布局。

参数	默认值	描述
{number} zlevel	0	一级层叠控制，每一个不同的zlevel将产生一个独立的Canvas，相同zlevel组件或图标将在同一个Canvas上渲染。zlevel越高，越靠顶层。Canvas对象增多会消耗更多内存和性能，且不建议设置过多zlevel，大部分情况可以通过二级层叠控制z实现层叠控制
{number} z	2	二级层叠控制，同一个Canvas（相同zlevel）上，z越高，越靠顶层
{number}或{string} x	80	直角坐标系内绘图网格左上角横坐标，数值单位px，支持百分比（字符串），如'50%'（显示区域横向中心）
{number} y或{string} y	60	直角坐标系内绘图网格左上角纵坐标，数值单位px，支持百分比（字符串），如'50%'（显示区域纵向中心）
{number} x2或{string} x2	80	直角坐标系内绘图网格右下角横坐标，数值单位px，支持百分比（字符串），如'50%'（显示区域横向中心）
{number} y2或{string} y2	0	直角坐标系内绘图网格右下角纵坐标，数值单位px，支持百分比（字符串），如'50%'（显示区域纵向中心）
{number} width	适应	直角坐标系内绘图网格（不含坐标轴）宽度，数值单位px，指定width后将忽略x2，见图36。支持百分比（字符串），如'50%'（显示区域一半的宽度）
{number} height	适应	直角坐标系内绘图网格（不含坐标轴）高度，数值单位px，指定height后将忽略y2，见图36，支持百分比（字符串），如'50%'（显示区域一半的高度）
{color} backgroundColor	'transparent'	背景颜色
{number} borderWidth	1	网格的边框线宽
{color} borderColor	'#ccc'	网格的边框颜色

直角坐标系下的坐标轴

         直角坐标系下有3种类型的坐标轴（axis):类目型（category)、数值型（value）和时间型（time)

• 类目型：必须指定类目列表，坐标轴内有且仅有这些指定类目坐标。
• 数值型：需要指定数值区间，如果没有指定，将由系统自动计算从而确定计算数值范围，坐标轴内包含数值区间内的全部坐标。
• 时间型：时间型坐标轴用法与数值型的非常相似，只是目标处理和格式化显示时会自动转变为时间，并且随着时间跨度的不同而自动切换需要显示的时间粒度，例如：时间跨度为一年，系统将自动显示以月为单位的时间粒度；时间跨度为几个小时，系统将自动显示以分钟为单位的时间粒度。

参数	默认值	描述
{string} type	'category'、'value'、'time'、'log'	坐标轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value'
{boolean} show	true	是否显示坐标轴，可选为：true（显示）和false（隐藏）
{string} position	'bottom'、'left'	坐标轴类型，横轴默认为类目型'bottom'，纵轴默认为数值型'left'，可选为：'bottom'、'top'、'left'、'right'
{string} name	' '	坐标轴名称
{string} nameLocation	'end'	坐标轴名称位置，可选为：'start'、'middle'、'center'、'end'
{Object} nameTextStyle	{ }	坐标轴名称文字样式，颜色跟随axisLine主色
{boolean} boundaryGap	true	类目起始和结束两端的空白策略，默认为true（留空），false则为顶头
{Array} boundaryGap	[0, 0]	坐标轴两端空白策略，为一个具有两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或相对的百分比，在设置min和max后无效
{number} min	null	指定的最小值，会自动根据具体数值调整，指定后将忽略boundaryGap[0]
{number} max	null	指定的最大值，会自动根据具体数值调整，指定后将忽略boundaryGap[1]
{boolean} scale	false	是否脱离0值比例，设置成true后，坐标刻度不会强制包含零刻度；在设置min和max之后，该配置项无效
{number} splitNumber	null	分割段数，不指定时根据min、max算法调整
{Object} axisLine	各异	坐标轴线，详见坐标轴组件属性示意图
{Object} axisTick	各异	坐标轴刻度标记，详见坐标轴组件属性示意图
{Object} axisLabel	各异	坐标轴文本标签，详见坐标轴组件属性示意图
{Object} splitLine	各异	分隔线，详见坐标轴组件属性示意图
{Object} splitArea	各异	分隔区域，详见坐标轴组件属性示意图
{Array} data	[ ]	类目列表，同时也是label内容

toolbox工具箱组件

        Echarts中的工具箱（toolbox）组件包含了可视化图表中一些附加的功能，它内置了多个子工具。

        其内置有6个子工具，包括标记（mark）、数据区域缩入（dataZoom）、数据视图（dataView)、动态类型切换（magicType）、重置（restore）、导出图片（saveAsImage)

在ECharts中，工具箱（toolbox）组件的属性如表所示。

	参数	默认值	描述
	{boolean} show	true	是否显示工具箱组件，可选为true（显示）和false（隐藏）
	{number} zlevel	0	同网格组件参数属性表
	{number} z	2	同网格组件参数属性表
	{string} orient	'horizontal'	布局方式，可选为'horizontal'和'vertical'
	{string} x或{number} x	'center'	水平安放位置，单位为px，可选为'center'、'left'、'right'、{number}
	{string} y或{number} y	'top'	垂直安放位置，单位为px，可选为'top'、'bottom'、'center'、{number}
	{color} backgroundColor	'rgba(0,0,0,0)'	工具箱背景颜色
{string} borderColor		'#ccc'	工具箱边框颜色
{number} borderWidth		0	工具箱边框线宽，单位为px
{number} padding或{Array} padding		5	工具箱的内边距，单位为px，见图例组件属性示意图
{number} itemGap		10	工具箱icon每项之间的间隔，单位为px，横向布局时为水平间隔，纵向布局时为纵向间隔
{number} itemSize		15	工具箱icon大小，单位为px
{boolean} showTitle		true	是否在鼠标悬停（hover）的时候显示每个工具icon的标题
{Object} feature		Object（省略）	各工具配置项。除了各个内置的工具按钮外，还可以自定义工具按钮。注意：自定义的工具名字只能以my开头

详情提示框组件

• 详情提示框（tooltip）组件又称气泡提示框组件或弹窗组件，也是一个功能比较强大的组件。
• 当鼠标滑过图表中的数据标签时，会自动弹出一个小窗体，展现更详细的数据。
• 有时为了更友好地显示数据内容，还需要对显示的数据内容做格式化处理，或添加自定义内容。

        详情提示框组件的属性如表所示。在详情提示框组件中，最为常用的属性是trigger（触发类型）属性。

	参数	默认值	描述
	{boolean} show	true	是否显示详情提示框组件，可选为：true（显示）|false（隐藏）
	{number} zlevel	0	同网格组件参数属性表
	{number} z	2	同网格组件参数属性表
	{boolean} showContent	true	是否显示提示框浮层，只需tooltip触发事件或显示axisPointer，而不需要显示内容时可配置该项为false，可选为true（显示）和false（隐藏）
	{string} trigger	'item'	触发类型，可选为'item'、'axis'、'none'
	{Array} position或{Function} position	null	提示框浮层的位置，默认不设置时位置会跟随鼠标的位置
{string} formatter或{Function} formatter		null	提示框浮层内容格式器，支持字符串模板和回调函数两种形式
{number} showDelay		0	浮层显示的延迟，添加显示延迟可以避免频繁切换，特别是在详情内容需要异步获取的场景，单位为ms
{number} hideDelay		100	浮层隐藏的延迟，单位为ms
{number} transitionDuration		0.4	提示框浮层的移动动画过渡时间，单位为s，设置为0的时候会紧跟着鼠标移动
{boolean} enterable		false	鼠标是否可进入提示框浮层中，当需详情内容交互时，如添加链接、按钮，可设置为true
{color} backgroundColor		'rgba(50,50,50,0.7)'	提示框浮层的背景颜色
{string} borderColor		'#333'	提示框浮层的边框颜色
{number} borderRadius		4	提示边框圆角，单位为px
{number} borderWidth		0	提示框浮层的边框宽，单位为px
{number} padding或{Array}padding		5	提示框浮层内边距，单位为px
{Object} axisPointer		Object（省略）	坐标轴指示器配置项，可选为：'line'、'cross'、'shadow'、'none'（无），指定type后对应style生效
{Object} textStyle		{color:'#fff'}	提示框浮层的文本样式

标记点

        在E Charts中，标记点有最大值、最小值、平均值的标记点，也可以是任意位置上的标记点，它需要在series字段下进行配置。标记点的各种属性如表所示。

 

        在一些折线图或柱状图当中，可以经常看到图中对最高值和最低值进行了标记。

        在ECharts中，标记点（markPoint）常用于表示最高值和最低值等数据，而有些图表中会有一个平行于x轴的、表示平均值等数据的虚线。

        在ECharts中，标记线（markLine）常用于展示平均值等。为了更好地观察数据中的最高值、最低值和平均值等数据，需要在图表中配置和使用标记点与标记线。

        在ECharts中，标记点有最大值、最小值、平均值的标记点，也可以是任意位置上的标记点，它需要在series字段下进行配置。标记点的各种属性如表所示。

参数	默认值	描述
{boolean} clickable	true	数据图形是否可单击，如果没有click，则事件响应可以关闭
{Array} symbol或{string} symbol	'pin'	标记点的类型，如果都一样，可以直接传string
{Array} symbolSize、{number} symbolSize或{Function} symbolSize	50	标记点大小
{Array} symbolRotate或{number} symbolRotate	null	标记的旋转角度
boolean large	false	是否启用大规模标线模式
{Object} itemStyle	{...}	标记图形样式属性
{Array} data	[ ]	标记图形数据

标记线

        ECharts中的标记线是一条平行于x轴的水平线，有最大值、最小值、平均值等数据的标记线，它也是在series字段下进行配置的。标记线的各种属性如表所示。

参数	默认值	描述
{boolean} clickable	true	数据图形是否可单击，如果没有click，则事件响应可以关闭
{Array} symbol或 {string} symbol	['circle', 'arrow']	标记线起始和结束的symbol介绍类型，默认循环选择类型有：'circle'、'rectangle'、'triangle'、'diamond'、'emptyCircle'、'emptyRectangle'、'emptyTriangle'、'emptyDiamond'
{Array} symbolSize或{number} symbolSize	[2, 4]	标记线起始和结束的symbol大小，半宽（半径）参数，如果都一样，则可以直接传number
{Array} symbolRotate或{number} symbolRotate	null	标记线起始和结束的symbol旋转控制
{Object} itemStyle	{...}	标记线图形样式属性
{Array} data	[ ]	标记线的数据数组