introduce:
toolbox is a set ofchart operation buttons, used to add components related to data interaction in Echarts charts. The built-in functions mainly include:
① Number setting: UserViewJapaneseedit图表的primitive number system.
②DataRegion zoom: Used to enlarge the data range of the chart by selecting the area.
③DynamicSwitchIconType: Used in Switch between multiple chart types.
④Save as picture: Save the current Echart chart as a picture
⑤Marquee component: Providesdata marquee type.
⑥ Customized tool: The tool name starts with my and the click method is customized.
⑦Reset:Clearall tool selections.
The fifth one, the marquee component, this iscoordinated withvisual mappingvisualMap Used together with the brush area selection that needs to be introduced in the next article, the effect is better. By selecting the area in the graphic, the corresponding The data is highlighted in visualMap or the selected data is displayed to the user in brush
Reference code is provided at the end of the article! !
Precautions for use:
1. The switched graphic category is currently only supported: line chartline< a i=4>, bar chartbar , stackstack, tile Individual configuration is invalid, stacked individual configuration will automatically bring tiling.
2.brush It is invalid to configure it individually in the toolbox. At least the brush needs to be configured globally to be effective. In additiontooltip needs to be valid inTooltip needs to be configured globally. Globally and in options.
3.feature toolbar configuration itemmagicType dynamic type switchingoption series Corresponding type Configuration Reference
4.feature In the custom method, must You need to write the onclick method, otherwise the defined icon will report an error. At least onclick and icon must be written to display and click.
5. When defining the icon, the icon can only be set to any arbitrary value through 'path://' Vector paths, abilitiessettingscolorsand graphicsStroke.
6. It is best not to use online images for tool icons. You can use your own local images:
//本地引入图片
import PH from '@assets/images/ph.png'
icon:`image://${PH}`, // 自定义工具 icon1. Chart toolbar toolbox configuration
The custom method is in the last paragraph of the code
option={
// 工具栏配置
toolbox:{
id:'1', // 组件ID
show:true, // 是否显示工具栏
orient:'horizontal', // 工具栏 icon 的布局朝向
itemSize:15, // 工具栏 icon 的大小
itemGap:10, // 工具栏 icon 每项之间的间隔
showTitle:true, // 是否在鼠标悬浮 icon 时，显示每一个工具的标题
zlevel:1, // 组件所有图形的 zlevel 值， 画布 Canvas 分层，图层优先级
z:1, // 组件所有图形的 z 值，图形前后绘制顺序
left:'10%', // 工具栏组件距离容器左侧的距离
right:'10%', // 工具栏组件距离容器右侧的距离
top:'10%', // 工具栏组件距离容器顶部的距离
bottom:'10%', // 工具栏组件距离容器底部的距离
width:"20%", // 工具栏组件宽度
height:'10%', // 工具栏组件高度
// 工具栏的 tooltip 设置
tooltip:{
show:true, // 是否展示提示组件
// formatter:'{a}', // 提示框显示内容，{a} 默认英文名称, {b} 默认中文名称
formatter:function(param){
return '<div>'+param.title+'内容'+'</div>'; // 自定义提示框显示内容
},
// 提示框字体样式
textStyle:{
fontSize:18,
},
},
// 统一配置工具栏中 icon 的样式 头
iconStyle:{
color:'red', // 图形颜色
borderWidth:5, // 图形描边宽度
borderColor:'red', // 图形描边颜色
borderType:'solid', // 图形描边线类型
borderDashOffset:10, // 描边线类型为虚线时，虚线的偏移量
borderCap:'butt', // 指定线段末端的形状
borderJoin:'bevel', // 指定两个线段连接处的形状
borderMiterLimit:10, // 当 borderJoin 为 miter 时，斜接面比例
shadowBlur:5, // 图形阴影长度
shadowColor:'red', // 图形阴影颜色
shadowOffsetX:20, // 图形阴影水平偏移量
shadowOffsetY:10, // 图形阴影竖直偏移量
opacity:0.8, // 图形透明度
},
// 统一配置工具栏中 icon 的样式 尾
// 统一配置鼠标 hover 工具 icon 时，强调样式 头
emphasis:{
// 强调时，icon 和对应标签样式
iconStyle:{
color:'red', // 图形的颜色
borderColor:'#000', // 图形的描边颜色
borderWidth:5, // 图形的描边宽度
borderType:'solid', // 图形描边线的类型
borderDashOffset:5, // 图形描边为虚线时，虚线的偏移量
borderCap:'butt', // 指定线段末端的形状
borderJoin:'bevel', // 设置两个线段相连部分的形状
borderMiterLimit:10, // 当 borderJoin 为 miter 时,斜接面比例
shadowBlur:10, // 图形阴影大小
shadowColor:'red', // 图形阴影颜色
shadowOffsetX:10, // 图形阴影水平偏移量
shadowOffsetY:10, // 图形阴影竖直偏移量
opacity:0.7, // 图形透明度
textPosition:'bottom', // 文字的位置
textFill:'#fff', // 文字颜色
textAlign:'left', // 文字对齐方式
textBackgroundColor:'red', // 文本区域填充颜色
textBorderRadius:'', // 文本区域圆角大小
textPadding:10, // 文本区域内边距
},
},
// 统一配置鼠标 hover 工具 icon 时，强调样式 尾
// 配置每一个工具项 头
feature:{
// 保持 Ehcarts 为图片工具， 头
saveAsImage:{
show:true, // 是否显示工具
title:'保持图片', // 工具标签
icon:'image://url', // 工具 icon
type:'png', // 自定义保持图片的后缀
name:'filename', // 自定义保持图片的名称，默认获取 tite 标题的 text 内容作为文件名称
backgroundColor:'auto', // 保持图片的背景颜色，默认白色
connectedBackgroundColor:'red', // 如果图表使用了 echarts.connect 对多个图表进行联动，则在导出图片时会导出这些联动的图表。该配置项决定了图表与图表之间间隙处的填充色。
excludeComponents:['toolbox'], // 保持图片时，图片中忽略的组件列表
// ionc 样式设置
iconStyle:{
// ··· 该配置与什么的 iconStyle 统一配置内容一致，在此省去重复代码
},
// 配置鼠标 hover 工具 icon 强调样式
emphasis:{
iconStyle:{
// 强调时，icon 和对应标签样式
//··· 该配置与上面的 emphasis 中 iconStyle 统一配置内容一致，在此省去重复代码
},
},
},
// 保持 Ehcarts 为图片， 尾
// 配置项还原 头
restore:{
show:true, // 是否显示工具
title:'还原', // 鼠标悬浮时显示标签
icon:'image://url', // 工具 icon
// ionc 样式设置
iconStyle:{
// ··· 该配置与什么的 iconStyle 统一配置内容一致，在此省去重复代码
},
// 配置鼠标 hover 工具 icon 强调样式
emphasis:{
iconStyle:{
// 强调时，icon 和对应标签样式
//··· 该配置与上面的 emphasis 中 iconStyle 统一配置内容一致，在此省去重复代码
},
},
},
// 配置项还原 尾
// 数据视图，将图表简单以表格形式展示 头
dataView:{
show:true, // 是否显示工具
title:'数据视图', // 工具标签
icon:"image://url", // 工具 icon
// ionc 样式设置
iconStyle:{
// ··· 该配置与什么的 iconStyle 统一配置内容一致，在此省去重复代码
},
// 配置鼠标 hover 工具 icon 强调样式
emphasis:{
iconStyle:{
// 强调时，icon 和对应标签样式
//··· 该配置与上面的 emphasis 中 iconStyle 统一配置内容一致，在此省去重复代码
},
},
},
// 数据视图，将图表简单以表格形式展示 尾
// 数据区域缩放 头
dataZoom:{
show:true, // 是否显示工具
title:['缩放','还原'], // 缩放和还原的标题
filterMode:'filter', // 超出范围的数据缩放展示
xAxisIndex:[0,1], // 指定哪些 xAxis 被控制
yAxisIndex:[0,1], // 指定哪些 yAxis 被控制
icon:{
zoom:'image://url', // 缩放 icon
back:'image://url', // 还原 icon
},
// 刷选框样式 头
brushStyle:{
color:'red', // 图形颜色
borderColor:'red', // 图形描边颜色
borderWidth:5, // 图形描边宽度
borderType:'solid', // 图形描边线类型
borderDashOffset:5, // 图形描边线为虚线时，虚线的偏移量
borderCap:'butt', // 指定线段末端形状
borderJoin:'bevel', // 两个线段相连部分的形状
borderMiterLimit:10, // borderJoin 为 miter 时,斜接面比例
shadowBlur:20, // 图形阴影大小
shadowColor:'red', // 图形阴影颜色
shadowOffsetX:10, // 图形阴影水平偏移量
shadowOffsetY:10, // 图形阴影竖直偏移量
opacity:0.5, // 图形透明度
},
// 刷选框样式 尾
// ionc 样式设置
iconStyle:{
// ··· 该配置与什么的 iconStyle 统一配置内容一致，在此省去重复代码
},
// 配置鼠标 hover 工具 icon 强调样式
emphasis:{
iconStyle:{
// 强调时，icon 和对应标签样式
//··· 该配置与上面的 emphasis 中 iconStyle 统一配置内容一致，在此省去重复代码
},
},
},
// 数据区域缩放 尾
// 切换图形类型 头
magicType:{
show:true, // 是否显示工具
// 单独配置每一个图形的标题
title:{
line:'折线图', // 折线图标题
bar:'柱状图', // 柱状图标题
stack:'堆叠', // 堆叠图标题
tiled:'平铺', // 平铺图标题
},
// 单独配置每一个图形的 icon
icon:{
line:'image://url', // 折线图的 icon
bar:'image://url', // 柱状图的 icon
stack:'image://url', // 堆叠图的 icon
tiled:'image://url', // 平铺图的 icon
},
// ionc 样式设置
iconStyle:{
// ··· 该配置与什么的 iconStyle 统一配置内容一致，在此省去重复代码
},
// 配置鼠标 hover 工具 icon 强调样式
emphasis:{
iconStyle:{
// 强调时，icon 和对应标签样式
//··· 该配置与上面的 emphasis 中 iconStyle 统一配置内容一致，在此省去重复代码
},
},
// 单独配置每一个系列的显示数据
option:{
line:{
// 这里面的配置和 series 中每个系列中的配置一样
},
},
// 指定在切换图形类别时，哪些数据图形变化
seriesIndex:{
line:[0,1,2], // 切换成折线图时，数据一、二、三对应改变
bar:[0,2], // 切换成柱状图时，数据一、三对应改变
// ···
},
},
// 切换图形类型 尾
// 选框组件控制按钮 头
brush:{
type:['rect','polygon'], // 开启的哪些选框组件，例如，矩形选框、任意形状选框等
// 配置选框的 icon
icon:{
rect:'image://url', // 矩形选框的 icon
polygon:'image://url', // 任意形状选框的 icon
lineX:'image://url', // 横向选框的 icon
lineY:'image://url', // 纵向选框的 icon
keep:'image://url', // 开启单项和多选的 icon
clear:'image://url', // 清空所有选框的 icon
},
// 配置选框的标题
title:{
rect:'矩形选框',
polygon:'圈选',
lineX:'横向选择',
lineY:'纵向选择',
keep:'多选',
clear:'清除选择',
}
},
// 选框组件控制按钮 尾
// 自定义工具按钮,名称必须 my 开始， 头
myTool:{
show:true, // 是否显示
title:"自定义按钮", // 工具标题
icon:'image://url', // 工具 icon
onclick:function(){}, // 自定义点击方法
iconStyle:{
// ··· 该配置与什么的 iconStyle 统一配置内容一致，在此省去重复代码
},
emphasis:{
iconStyle:{
// 强调时，icon 和对应标签样式
//··· 该配置与上面的 emphasis 中 iconStyle 统一配置内容一致，在此省去重复代码
},
},
}
// 自定义工具按钮,名称必须 my 开始， 尾
},
// 配置每一个工具项 尾
}
}2. Example diagrams of each tool
Data view
Data area zoom
Dynamic cutting
Brush selection box
3. Dynamic graph configuration code
use:
Code: There are simple custom methods in the code, you can simply refer to it.
option = {
title: {
text: 'Stacked Line'
},
// 开启刷选
brush:{},
// 开启提示框
tooltip: {},
toolbox: {
right:'10%',
// 自定义工具提示框
tooltip:{
show:true,
trigger:'axis',
formatter:function(param){
return "<div>"+param.title+'按钮'+"</div>";
},
},
// 隐藏工具标题
showTitle:false,
feature: {
// 自定义按钮
myTool1:{
title:'查看',
iconStyle:{
opacity:0.5,
borderWidth:1,
borderColor:'red',
},
emphasis:{
iconStyle:{
borderWidth:1,
borderColor:'#fff'
},
},
onclick:function(){
// 自定义方法
},
icon:'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
},
// 保持图片
saveAsImage: {
type:'png',
name:'Echarts图片',
excludeComponents:['toolbox'],
title:'保持为图片 ',
},
// 重置
restore:{},
//
dataView:{},
dataZoom:{},
magicType:{
type:['line','bar','stack','tiled'],
},
// 定义选框样式
brush:{
type:['rect','polygon'],
},
}
},
legend: {
show:false,
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};Updates have been a bit slow lately, I’m a bit busy at work...