前端数据可视化之【title、legend、tooltip、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！

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