当前位置：首页 > news >正文

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

news 2025/9/14 16:19:07

🌟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:'http://www.echartsjs.com/option.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://http://xxx.xxx.xxx/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://http://xxx.xxx.xxx/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:'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！

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

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

目录

🌟Echarts配置项

🌟Echarts配置项之 `title组件`

🌟Echarts配置项之 `legend组件`

🌟Echarts配置项之 `tooltip组件`

🌟Echarts配置项之 `toolbox组件`

🌟写在最后

相关文章：

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

microcom串口调试工具使用

深入了解Golang：基本语法与核心特性解析

短视频矩阵系统源码---php搭建

mysql 查询表字段名,注释，以及sql拼接查询出的内容

【JavaEE】_Servlet API

macOS下matplotlib如何显示中文字体？

7-Zip怎么设置字典大小单词大小固实数据大小,把大文件9.35G压缩成小1.56G

使用CPR库和Python编写程序

axios 请求的缓存封装

Oracle性能调优实践中的几点心得

勒索病毒最新变种.halo勒索病毒来袭，如何恢复受感染的数据？

大厂秋招真题【前缀和】美团20230826秋招T5-平均数为k的最长连续子数组

bazel远程构建(Remote Execution) --- linux安装Redis

Maven在开发中的使用及理解

2023/10/30-LED灯驱动开发

华为OD 报文解压缩（100分）【java】B卷

二、vue基础语法

Java —— 程序逻辑控制

I - Bob vs ATM(博弈论)

业务系统对接大模型的基础方案：架构设计与关键步骤

vscode里如何用git

手游刚开服就被攻击怎么办？如何防御DDoS？

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版分享

服务器硬防的应用场景都有哪些？

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

Linux-07 ubuntu 的 chrome 启动不了

安全突围：重塑内生安全体系：齐向东在2025年BCS大会的演讲

目录

🌟Echarts配置项

🌟Echarts配置项之 title组件

🌟Echarts配置项之 legend组件

🌟Echarts配置项之 tooltip组件

🌟Echarts配置项之 toolbox组件

🌟写在最后

相关文章：

🌟Echarts配置项之 `title组件`

🌟Echarts配置项之 `legend组件`

🌟Echarts配置项之 `tooltip组件`

🌟Echarts配置项之 `toolbox组件`