ECharts课堂（大数据可视化）组件
目录
一、学习目标
掌握各组件的属性设置
学会使用echarts速查手册，帮助完成图表绘制的能力。
具备独立完成基本图表的能力。
二、本节任务
（一）任务描述
（二）任务分解
1. echarts基本组件
2.各组件参数设置
title标题组件：
legend图例：
grid：直角坐标系下的网格
直角坐标系下的坐标轴
toolbox工具箱组件
详情提示框组件
标记点
标记线
echarts模板
一、学习目标
-
掌握各组件的属性设置
-
学会使用echarts速查手册，帮助完成图表绘制的能力。
-
具备独立完成基本图表的能力。
二、本节任务
（一）任务描述
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或 |
['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 |
[ ] |
标记线的数据数组 |