数据可视化之【title、legend、tooltip、toolbox 】配置项"/>
前端数据可视化之【title、legend、tooltip、toolbox 】配置项
目录
- 🌟Echarts配置项
- 🌟Echarts配置项之 `title组件`
- 🌟Echarts配置项之 `legend组件`
- 🌟Echarts配置项之 `tooltip组件`
- 🌟Echarts配置项之 `toolbox组件`
- 🌟写在最后
🌟Echarts配置项
ECharts开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
想让ECharts展示出我们预期的效果，就要在 myChart.setOption()方法中传入一个指定的options配置项，其类型为Object；options中的配置项非常之多，记住所有的并不太现实，在这里列一些重要的做介绍
案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>ECharts展示</title><script src="echarts.js"></script>
</head>
<body><div id="chart" style="width: 800px;height:400px;"></div>
</body>
<script>var myChart = echarts.init(document.getElementById('chart'));var options={title:{text:'学生成绩饼图',textStyle:{color:'red',fontSize:20},link:'.html#title.backgroundColor',subtext:'这是期末成绩分布图',left:'left',itemGap:5,backgroundColor:'blue',borderWidth:5,},legend:{type:'scroll',data:['90-100','80-90','70-80','60-70',{name:'60分以下',icon:'triangle',textStyle:{color:'green'}}], //ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none' 也可以设置通过 'image://url' 设置为图片，其中 URL 为图片的链接，orient:'horizontal',itemWidth:20,inactiveColor:'red',width:200,scrollDataIndex:2,pageButtonPosition:'start',animationDurationUpdate:1000,},tooltip:{enterable:true, //鼠标是否可进入提示框浮层中默认为falseconfine:true, //是否将提示框限制在图表内 ，在用与移动端或者响应式的时候比较有用//position:'bottom', //提示框的位置backgroundColor:'#ccc', //提示框的背景颜色borderWidth:20, //边框的大小 numberborderColor:'red', //边框的颜色extraCssText:'color:#000', //写提示框加css样式},toolbox:{feature:{saveAsImage:{ //保存为图片。type:'png', //保存图片的格式，支持 'png' 和 'jpeg'。name:'测试', //保存文件的名字，默认使用主标题// backgroundColor:'auto' 保存的图片背景色，默认使用 backgroundColor，如果backgroundColor不存在的话会取白色。excludeComponents:['toolbox'] , //保存为图片时忽略的组件列表，默认忽略工具栏。show:true, //是否显示该工具。// icon:'image:///a/b.png', 设置图标iconStyle:{color:'red'}, //保存为图片 icon 样式设置。 emphasis:{}, //移入设置样式，同toolbox的emphasispixelRatio:1, //保存图片的分辨率比例，默认跟容器相同大小 number},restore:{ //还原show:true, //是否显示该组件title:'这是还原', //名称// icon:'', 图标设置iconStyle:{color:'blue'}, //图标样式emphasis:{iconStyle:{color:'red'}}, //移入显示样式，同上},dataView:{ //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。show:true, //是否显示该工具 布尔值title:'数据视图', //移入显示的名字 stringiconStyle:{color:'yellow'}, //icon emphasis同上readOnly:false, //是否不可编辑（只读）。//optionToContent:fun, //自定义函数展示数据//contentToOption:fun, //如果支持数据编辑后的刷新，需要自行通过该函数实现组装 option 的逻辑lang:['数据视图的', '关闭了啊', '刷新一哈'], //数据视图上有三个话术，默认是['数据视图', '关闭', '刷新']。},dataZoom:{ //数据区域缩放。目前只支持直角坐标系的缩放。},magicType:{ //动态类型切换show:true, //是否显示type:['line', 'bar', 'stack', 'tiled'], //启用的动态类型title:{line:'切换为折线图',bar:'切换为柱状图',stack:'切换为堆叠',tiled:'切换为平铺',},icon:{// line:'image:///a/b.png', 配置各个icon},iconStyle:{color:'pink'}, //配置icon的样式emphasis:{iconStyle:{}}, //移入样式option:{line:{}}, //配置每一个的样式seriesIndex:{line:[]}, //各个类型对应的系列的列表 },brush:{type:['rect','polygon'],icon:{}, //没个按钮的icontitle:{ //标题文本。rect:'矩形选择',}}}},series : [{name: '学生成绩区间', //数据项名称type: 'pie', //饼图radius: '60%', //设置半径， ['30%','70%']表示内圆30%，外圆70%也就是环图，只写一个值就是饼图itemStyle:{}, //图形样式emphasis:{}, //高亮的扇区和标签样式hoverOffset:15, //高亮扇区的偏移距离roseType:false, //是否设置为南丁格尔图labelLine:{show:true, //是否显示引导线length:10, //引导线第一段的长度length2:50, //引导线第二段的长度smooth:0.5, //0-1 平滑程度lineStyle:{ //引导线的样式color:'red', //引导线的颜色，支持rgba，还可以设置渐变和纹理width:2, // number 线宽type:'dashed', // 线的类型 'solid'\'dashed'\'dotted'//还支持阴影的设置opacity:0.5, //t透明度。同css的opacity},emphasis:{ //高亮状态下引导线的样式lineStyle:{color:'blue'} //同上面的lineStyle}, },data:[{value:235,name:'90-100',label:{show:true,position:'inside',color:'#000'},//position设置name值得位置，默认值为outside通过视觉引导线连到相应的扇区。labelLine:{}, // 同series.lineStyle 单独设置这一项数据的引导线样式emphasis:{lineStyle:{}}, // 同series.emphasis 单独设置这一项数据的高亮引导线样式tooltip:{} //单独设置这一项数据的提示框}, {value:274, name:'80-90'},{value:310, name:'70-80'},{value:335, name:'60-70'},{value:400, name:'60分以下',selected:true} //selected设置默认选中],center:['50%', '50%'] //圆心的位置，可以设置为绝对值和像素两种方式}]}myChart.setOption(options);
</script>
</html>
| 配置项 | 描述 |
|---|---|
| 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:'' |
| 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！
✨原创不易，还希望各位大佬支持一下！
👍 点赞，你的认可是我创作的动力！
⭐️ 收藏，你的青睐是我努力的方向！
✏️ 评论，你的意见是我进步的财富！
更多推荐
前端数据可视化之【title、legend、tooltip、toolbox 】配置项
发布评论