前端数据可视化之【title、legend、tooltip、toolbox 】配置项

目录

• 🌟Echarts配置项
• [🌟Echarts配置项之 `title组件`](#🌟Echarts配置项之 title组件)
• [🌟Echarts配置项之 `legend组件`](#🌟Echarts配置项之 legend组件)
• [🌟Echarts配置项之 `tooltip组件`](#🌟Echarts配置项之 tooltip组件)
• [🌟Echarts配置项之 `toolbox组件`](#🌟Echarts配置项之 toolbox组件)
• 🌟写在最后

🌟Echarts配置项

ECharts开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

想让ECharts展示出我们预期的效果，就要在 myChart.setOption()方法中传入一个指定的options配置项，其类型为Object；options中的配置项非常之多，记住所有的并不太现实，在这里列一些重要的做介绍

案例

配置项	描述
title	标题组件，包含主标题和副标题。
legend	图例组件，图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
grid	直角坐标系内绘图网格，可以在网格上绘制折线图，柱状图，散点图（气泡图）
xAxis	直角坐标系 grid 中的 x 轴
yAxis	直角坐标系 grid 中的 y 轴
polar	极坐标系，可以用于散点图和折线图。每个极坐标系拥有一个角度轴和一个半径轴。
radar	雷达图坐标系组件，只适用于雷达图。
tooltip	提示框组件。
toolbox	工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
axisPointer	这是坐标轴指示器（axisPointer）的全局公用设置。
brush	区域选择组件，用户可以选择图中一部分数据，从而便于向用户展示被选中数据
geo	地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。
timeline	提供了在多个 ECharts option 间进行切换、播放等操作的功能。
dataset	数据集组件，用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射。
series	系列列表。每个系列通过 type 决定自己的图表类型
color	调色盘颜色列表
backgroundColor	背景色，默认无背景。

🌟Echarts配置项之 title组件

title组件，包含主标题和副标题。(副标题的相关设置与主标题一样，在前面属性名前面加sub)

属性名	描述	值
id	默认不指定。指定则可用于在 options 或者 API 中引用组件。(所有的id解释都是相同的)	string
show	是否显示标题	布尔值，默认为true
text	主标题文本，支持使用 \n 换行	字符串
link	主标题文本超链接。	字符串。比如link:'http://www.echartsjs.com'
target	与a连接的target属性一样，设置打开主标题连接的方式。	'self' 当前窗口打开， 'blank' 新窗口打开
textStyle	设置主标题的文本样式，就是字体的颜色、字号、字体、行高、阴影等等	一个对象
subtext	副标题的文本	字符串
itemGap	主标题与副标题之间的间距，	number类型，表示像素，默认为10
zlevel	用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。	number 默认为0
z	设置标题的层级,z值小的图形会被z值大的图形覆盖。	number类型
left、right	组件离容器左侧/右侧的距离	number类型表示像素，string可以是'50%'、'left'、 'center'、'right'
top、bottom	组件离容器上侧/下侧的距离。	number类型表示像素，string可以是'50%'、'top'、 'middle'、'bottom'
backgroundColor	标题背景色	默认透明，支持rgba格式
borderWidth	标题的边框线宽	number 表示像素
borderRadius	边框的圆角半径	number表示统一设置四个角，array可以对四个角分别设置
borderColor	边框的颜色	默认'#ccc'

还可以设置标题阴影的模糊程度、偏移程度、颜色等进行设置

🌟Echarts配置项之 legend组件

legend 图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。

属性名	描述	值
type	图例的类型	'plain'：普通图例。缺省就是普通图例。'scroll'：可滚动翻页的图例。当图例数量较多时可以使用。
id	默认不指定。指定则可用于在 option 或者 API 中引用组件。	string
show	是否显示图例	布尔值，默认为true
zlevel	同title的zlevel	number
z	同title的z	number 默认值为2
top、left、right、bottom	同title组件	参看title组件
width、height	图例组件的宽度、高度	string、number，默认为auto`自适应
orient	图例列表的布局朝向。	'horizontal':表示横排默认；'vertical'：表示竖排
padding	图例内边距	number和array
itemGap	图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。	number，默认为10
itemWidth、itemHeight	图例标记的图形的宽度/高度	number
formatter	用来格式化图例文本	string, Function
selectedMode	控制是否可以通过点击图例改变系列的显示状态	string, boolean，默认为true，可以设成 'single' 或者 'multiple' 使用单选或者多选模式。
inactiveColor	图例关闭时的颜色。	值为颜色
selected	图例选中状态表。	值为一个对象，{'a':true},表示a为选中
textStyle	图例的公用文本样式。	值为一个对象，与title组件中的一样
tooltip	提示框组件	值为一个对象详细介绍查看后面的tooltip组件
data	图例的数据数组	数组中内容可以为字符串，也可为对象，具体查看下面例子
backgroundColor	图例的背景颜色	同title组件的，默认透明
borderColor、borderWidth、等	边框和阴影的设置	同title组件中的一样

以下的属性需要在图例组件的type值设为scroll才能生效

属性	描述	值
scrollDataIndex	决定当前图例滚动到哪里	·number·
pageButtonItemGap	图例控制块中，按钮和页信息之间的间隔。	number，默认值为5
pageButtonGap	图例控制块和图例项之间的间隔	number
pageButtonPosition	图例控制块的位置	'start'：控制块在左或上。'end'：按钮快在右或下。默认'end'
pageFormatter	图例控制块中，页信息的显示格式。	function、string，默认为 '{current}/{total}'，其中 {current} 是当前页号（从 1 开始计数），{total} 是总页数。使用函数，须返回这两个值
pageIcons	图例控制块的图标	值为一个对象，分别设置横排和竖排的图标
pageIconColor	翻页按钮的颜色	string
pageIconInactiveColor	翻页按钮不激活时（即翻页到头时）的颜色。	string
pageIconSize	翻页按钮的大小	可以是number，也可以是array表示 [宽,高]
pageTextStyle	图例页信息的文字样式	一个对象，值同textStyle
animation	翻页是否使用动画	布尔值
animationDurationUpdate	翻页是的动画时长	number 毫秒

🌟Echarts配置项之 tooltip组件

tooltip 提示框组件

提示框组件设置到的地方很多:

• 可以设置在全局，即 tooltip
• 可以设置在坐标系中，即 grid.tooltip、polar.tooltip、single.tooltip
• 可以设置在系列中，即 series.tooltip
• 可以设置在系列的每个数据项中，即 series.data.tooltip

属性	描述	值
show	是否显示提示框组件	布尔值，默认为true
trigger	触发类型	'item'：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。'axis'：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。'none'：什么都不触发。
axisPointer	坐标轴指示器配置项。	object，参看axisPointer组件
showContent	是否显示提示框浮层，	布尔值，默认显示。
alwaysShowContent	是否永远显示提示框内容	布尔值，默认为false
triggerOn	提示框触发的条件	string，'mousemove'：鼠标移动时触发。'click'：鼠标点击时触发。'mousemove、click'(默认)：同时鼠标移动和点击时触发。
showDelay	浮层显示的延迟，单位为 ms，	number默认没有延迟 ，不建议设置，在 triggerOn 为 'mousemove' 时有效。
hideDelay	浮层隐藏的延迟，单位为 ms，	number 默认100
enterable	鼠标是否可进入提示框浮层中	布尔值 默认为false
renderMode	浮层的渲染模式	默认以 'html 即额外的 DOM 节点展示 tooltip；此外还可以设置为 'richText' 表示以富文本的形式渲染
confine	是否将 tooltip 框限制在图表的区域内。	布尔值，默认为false
transitionDuration	提示框浮层的移动动画过渡时间	number，单位为s
position	提示框浮层的位置，默认不设置时位置会跟随鼠标的位置。	array：[20,20]绝对位置 ['50%','50%']相对位置，只在 trigger 为'item'的时候有效。{'inside':鼠标所在图形的内部中心位置，'top':鼠标所在图形上侧,'left'、'right'、'bottom'}
formatter	提示框浮层内容格式器，支持字符串模板和回调函数两种形式。	查看上面legend的formatter
backgroundColor	提示框浮层的背景颜色	写一个颜色值
borderColor	提示框浮层的边框颜色。	写一个颜色值
borderWidth	提示框浮层的边框宽	number
padding	提示框浮层的内边距	number
textStyle	提示框浮层的文本样式	object 同title组件的textStyle
extraCssText	额外附加到浮层的 css 样式	string，就是写css样式就可以

🌟Echarts配置项之 toolbox组件

toolbox 工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。

属性	描述	值
id	指定则可用于在 option 或者 API 中引用组件	string`
show	是否显示工具栏组件	布尔值
orient	工具栏 icon 的布局朝向。	同legend的orient
itemSize	工具栏 icon 的大小。	number，默认值为15
itemGap	工具栏 icon 每项之间的间隔	number，默认值为10
showTitle	是否在鼠标 hover 的时候显示每个工具 icon 的标题。	布尔值
iconStyle	公用的 icon 样式设置	值为一个对象，包含icon的颜色、边框、阴影、透明度等
emphasis	鼠标 hover 时候的高亮样式。	值为一个对象，对象中包含一个iconStyle属性，也是对象，同上面的iconStyle
zlevel、z	同上	number
left、right、top、bottom	同上	string、number
width、height	组件容器的宽/高	string/number
feature	各工具配置项	object 查看开篇的饼图的案例

🌟写在最后

更多前端知识请大家持续关注，尽请期待。各位小伙伴让我们 let's be prepared at all times！

✨原创不易，还希望各位大佬支持一下！
👍 点赞，你的认可是我创作的动力！
⭐️ 收藏，你的青睐是我努力的方向！
✏️ 评论，你的意见是我进步的财富！