toolbox工具栏组件适用于饼图吗

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了toolbox工具栏组件适用于饼图吗相关的知识,希望对你有一定的参考价值。

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

feature:各工具配置项。
feature.saveAsImage:保存为图片,内置工具。
feature.restore:配置项还原,内置工具。
feature.dataView:数据视图工具,可以展现当前图表所用的数据,编辑后可以动态更新。内置工具。
feature.dataZoom:数据区域缩放。目前只支持直角坐标系的缩放,内置工具。
feature.magicType:动态类型切换,内置工具。
feature.brush:选框组件的控制按钮,内置工具。
feature.myTool:添加自定义图标与方法,如果想添加多个用feature.myTool1、feature.myTool2表示,比较常用。
iconStyle:公用的icon样式设置,由于 icon 的文本信息只在icon hover时候才显示,所以文字相关的配置项请在emphasis下设置。
emphasis:强调 hover 时触发样式,所有属性 color , borderColor , borderWidth , borderType , borderDashOffset , borderCap , borderJoin , borderMiterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity , textPosition , textFill , textAlign , textBackgroundColor , textBorderRadius , textPadding 。
💕 其中也会含有很多属性,具体使用请参考一下内容

toolbox:
id: '', //组件ID,默认不指定。指定则可用于在option或者API中引用组件
show: true, //是否显示
orient: 'horizontal', //icon的布局朝向,属性值:horizontal默认/vertical
itemSize: 15, //icon大小
itemGap: 8, //icon每项之间的间隔。横向布局时为水平间隔,纵向布局时为纵向间隔
showTitle: true, //是否在鼠标hover的时候显示标题
feature:
saveAsImage:
type: 'png', //保存图片格式。若renderer类型在初始化图表时被设为canvas(默认),则支持png(默认)/jpg;若renderer类型在初始化图表时被设为svg,则只支持svg
name: '', //保存文件名称,默认使用title.text
backgroundColor: 'auto', //保存图片背景色
connectedBackgroundColor: '#fff', //若图表使用echarts.connect对多个图表进行联动,则在导出图片时会导出这些联动的图表。该配置项决定了图表与图表之间间隙处的填充色
excludeComponents: ['toolbox'], //保存为图片时忽略的组件列表,默认忽略工具栏
show: true,
title: '',
icon: '', //自定义图标
//保存为图片icon样式设置。由于icon的文本信息只在hover时显示,所以文字相关配置项在emphasis下设置
iconStyle:
color: none, /颜色,参考下面的文章/
borderColor: #666,
borderWidth: 1,
borderType: 'solid',
borderDashOffset: 0, //设置虚线偏移量,搭配borderType实现灵活的虚线效果
borderCap: 'butt', //指定线段末端绘制方式,属性值:butt/round/square
borderJoin: 'bevel', //设置2个长度不为0的相连部分(线段,圆弧,曲线)如何连接在一起的属性(长度为0的变形部分,其指定的末端和控制点在同一位置,会被忽略),属性值:bevel/round/miter
borderMiterLimit: 10, //设置斜接面限制比例,只有当borderJoin为miter时才有效
shadowBlur: '', //图形阴影模糊大小。该属性配合shadowColor/shadowOffsetX/shadowOffsetY一起设置图形的阴影效果
shadowColor: '', //阴影颜色。支持的格式同color
shadowOffsetX: 0, //阴影水平方向上的偏移距离
shadowOffsetY: 0, //阴影垂直方向上的偏移距离
opacity: 1 //图形透明度
,
emphasis:
iconStyle:
color: '', /图形颜色,参考下面的文章/
borderColor: none, //图形描边颜色。支持的颜色格式同color
borderWidth: 0, //描边线宽。为 0 时无描边
borderType: 'solid', //描边类型,属性值:solid默认/dashed/dotted/number/array
borderDashOffset: 0, //设置虚线偏移量,搭配borderType实现灵活的虚线效果
borderCap: 'butt', //指定线段末端绘制方式,属性值:butt默认/round/square
borderJoin: 'bevel', //上面有解释
borderMiterLimit: 10,
shadowBlur: '',
shadowColor: '',
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 1,
textPosition: 'bottom', //文本位置,属性值:left/right/top/bottom
textFill: '#000', //文本颜色,若未设定,则依次取图标 emphasis 时的填充色、描边色,若都不存在,则为'#000'
textAlign: 'center', //文本对齐方式,属性值:left/center/right
textBackgroundColor: '', //文本区域填充色
textBorderRadius: 0, //文本区域圆角大小
textPadding: 0 //文本区域内边距

,
pixelRatio: 1 //保存图片分辨率比例。默认跟容器相同大小,若需保存更高分辨率图片,可以设置为大于 1 的值
,
restore:
show: true,
title: '还原',
icon: 'image://url', //图标,'image://url'或'path://'或本地引入'image://'+require('./DCSP.png')
iconStyle: , //还原icon样式设置,同上feature.saveAsImage.iconStyle配置
emphasis: //强调hover触发,同上feature.saveAsImage.emphasis.iconStyle配置
,
dataView:
show: true,
title: '数据视图',
icon: '', //用法同feature.restore.icon
iconStyle: , //数据视图icon样式设置,同上feature.saveAsImage.iconStyle配置
emphasis: , //强调hover触发,同上feature.saveAsImage.emphasis.iconStyle配置
readOnly: false, //是否不可编辑(只读)
optionToContent: function() , //自定义dataView展现函数。用以取代默认的textarea使用更丰富的数据编辑
contentToOption: (container:htmlDomElement, option:Object) => Object, //在使用optionToContent情况下,如果支持数据编辑后的刷新,需要自行通过该函数实现组装option逻辑
lang: ['数据视图', '关闭', '刷新'], //数据视图上有三个话术,默认['数据视图', '关闭', '刷新']
backgroundColor: '#fff', //数据视图浮层背景色
textareaColor: '#fff', //数据视图浮层文本输入区背景色
textareaBorderColor: '#333', //数据视图浮层文本输入区边框颜色
textColor: '#000', //文本颜色
buttonColor: '#c23531', //按钮颜色
buttonTextColor: '#fff' //按钮文本颜色
,
dataZoom: /这个有两个icon图标,所以基本都必须分开配置/
show: true,
title: //缩放和还原的标题文本
zoom: '区域缩放',
back: '区域缩放还原'
,
icon: //同上feature.saveAsImage.icon配置
zoom: '',
back: ''
,
iconStyle: , //数据区域缩放icon样式设置,同上feature.saveAsImage.iconStyle配置
emphasis: , //强调hover触发,同上feature.saveAsImage.emphasis.iconStyle配置
filterMode: 'filter', //与 dataZoom.filterMode 含义和取值相同
xAxisIndex: '', //指定哪些xAxis被控制。若缺省则控制所有的x轴。若设置为false则不控制任何x轴。如若置成3则控制axisIndex为3的x轴。若设置为[0, 3]则控制axisIndex为0和3的x轴。
yAxisIndex: '', //参考xAxisIndex,控制y轴
brushStyle: //刷选框样式,同上feature.saveAsImage.iconStyle配置
,
magicType:
show: true,
type: ['line', 'bar'], //启用的动态类型,包括line、bar、stack
title:
line: '切换为折线图',
bar: '切换为柱状图',
stack: '切换为堆叠',
tiled: '切换为平铺',
,
icon: //同上feature.saveAsImage.icon配置
line: '',
bar: '',
stack: ''
,
iconStyle: , //动态类型切换,同上feature.saveAsImage.iconStyle配置
emphasis: , //强调hover触发,同上feature.saveAsImage.emphasis.iconStyle配置
option: //各个类型的专有配置项。在切换到某类型的时候会合并相应的配置项
line: ,
bar: ,
stack:
,
seriesIndex: //各个类型对应的系列的列表
line: [],
bar: []

,
brush: //选框组件的控制按钮。也可以不在这里指定,而是在 brush.toolbox 中指定。
type:, //使用的按钮,属性值:rect/polygon/lineX/lineY/keep/clear
icon: //同上feature.saveAsImage.icon配置
rect: '',
polygon: '',
lineX: '',
lineY: '',
keep: '',
clear: ''
,
title:
rect: '矩形选择',
polygon: '圈选',
lineX: '横向选择',
lineY: '纵向选择',
keep: '保持选择',
clear: '清除选择'

,
myTool: /这个比较常用,自定义icon与功能/
show: true,
title: '',
icon: '',
onclick: function() //根据需要添加触发条件与方法

,
iconStyle: , //公用的 icon 样式设置。同上feature.saveAsImage.iconStyle配置
emphasis: , //强调hover触发,同上feature.saveAsImage.emphasis.iconStyle配置
zlevel: 0, //所有图形zlevel值。zlevel用于 Canvas 分层
z: 2, //组件的所有图形的z值。控制图形的前后顺序
left: 'auto',
top: 'auto',
right: 'auto',
bottom: 'auto',
width: 'auto',
height: 'auto',
tooltip: /工具箱tooltip配置,配置项同tooltip,参考下面的文章/
参考技术A toolbox工具栏组件,内置有导出图片,数据视图,动态类型切换,数据区域缩放,重置五个工具。如下图:
工具栏
feature:各工具配置项。
feature.saveAsImage:保存为图片,内置工具。
feature.restore:配置项还原,内置工具。
feature.dataView:数据视图工具,可以展现当前图表所用的数据,编辑后可以动态更新。内置工具。
feature.dataZoom:数据区域缩放。目前只支持直角坐标系的缩放,内置工具。
feature.magicType:动态类型切换,内置工具。
feature.brush:选框组件的控制按钮,内置工具。
feature.myTool:添加自定义图标与方法,如果想添加多个用feature.myTool1、feature.myTool2表示,比较常用。
iconStyle:公用的icon样式设置,由于 icon 的文本信息只在icon hover时候才显示,所以文字相关的配置项请在emphasis下设置。
emphasis:强调 hover 时触发样式,所有属性 color , borderColor , borderWidth , borderType , borderDashOffset , borderCap , borderJoin , borderMiterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity , textPosition , textFill , textAlign , textBackgroundColor , textBorderRadius , textPadding 。
💕 其中也会含有很多属性,具体使用请参考一下内容
toolbox:
id: '', //组件ID,默认不指定。指定则可用于在option或者API中引用组件
show: true, //是否显示
orient: 'horizontal', //icon的布局朝向,属性值:horizontal默认/vertical
itemSize: 15, //icon大小
itemGap: 8, //icon每项之间的间隔。横向布局时为水平间隔,纵向布局时为纵向间隔
showTitle: true, //是否在鼠标hover的时候显示标题
feature:
saveAsImage:
type: 'png', //保存图片格式。若renderer类型在初始化图表时被设为canvas(默认),则支持png(默认)/jpg;若renderer类型在初始化图表时被设为svg,则只支持svg
name: '', //保存文件名称,默认使用title.text
backgroundColor: 'auto', //保存图片背景色
connectedBackgroundColor: '#fff', //若图表使用echarts.connect对多个图表进行联动,则在导出图片时会导出这些联动的图表。该配置项决定了图表与图表之间间隙处的填充色
excludeComponents: ['toolbox'], //保存为图片时忽略的组件列表,默认忽略工具栏
show: true,
title: '',
icon: '', //自定义图标
//保存为图片icon样式设置。由于icon的文本信息只在hover时显示,所以文字相关配置项在emphasis下设置
iconStyle:
color: none, /颜色,参考下面的文章/
borderColor: #666,
borderWidth: 1,
borderType: 'solid',
borderDashOffset: 0, //设置虚线偏移量,搭配borderType实现灵活的虚线效果
borderCap: 'butt', //指定线段末端绘制方式,属性值:butt/round/square
borderJoin: 'bevel', //设置2个长度不为0的相连部分(线段,圆弧,曲线)如何连接在一起的属性(长度为0的变形部分,其指定的末端和控制点在同一位置,会被忽略),属性值:bevel/round/miter
borderMiterLimit: 10, //设置斜接面限制比例,只有当borderJoin为miter时才有效
shadowBlur: '', //图形阴影模糊大小。该属性配合shadowColor/shadowOffsetX/shadowOffsetY一起设置图形的阴影效果
shadowColor: '', //阴影颜色。支持的格式同color
shadowOffsetX: 0, //阴影水平方向上的偏移距离
shadowOffsetY: 0, //阴影垂直方向上的偏移距离
opacity: 1 //图形透明度
,
emphasis:
iconStyle:
color: '', /图形颜色,参考下面的文章/
borderColor: none, //图形描边颜色。支持的颜色格式同color
borderWidth: 0, //描边线宽。为 0 时无描边
borderType: 'solid', //描边类型,属性值:solid默认/dashed/dotted/number/array
borderDashOffset: 0, //设置虚线偏移量,搭配borderType实现灵活的虚线效果
borderCap: 'butt', //指定线段末端绘制方式,属性值:butt默认/round/square
borderJoin: 'bevel', //上面有解释
borderMiterLimit: 10,
shadowBlur: '',
shadowColor: '',
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 1,
textPosition: 'bottom', //文本位置,属性值:left/right/top/bottom
textFill: '#000', //文本颜色,若未设定,则依次取图标 emphasis 时的填充色、描边色,若都不存在,则为'#000'
textAlign: 'center', //文本对齐方式,属性值:left/center/right
textBackgroundColor: '', //文本区域填充色
textBorderRadius: 0, //文本区域圆角大小
textPadding: 0 //文本区域内边距

,
pixelRatio: 1 //保存图片分辨率比例。默认跟容器相同大小,若需保存更高分辨率图片,可以设置为大于 1 的值
,
restore:
show: true,
title: '还原',
icon: 'image://url', //图标,'image://url'或'path://'或本地引入'image://'+require('./DCSP.png')
iconStyle: , //还原icon样式设置,同上feature.saveAsImage.iconStyle配置
emphasis: //强调hover触发,同上feature.saveAsImage.emphasis.iconStyle配置
,
dataView:
show: true,
title: '数据视图',
icon: '', //用法同feature.restore.icon
iconStyle: , //数据视图icon样式设置,同上feature.saveAsImage.iconStyle配置
emphasis: , //强调hover触发,同上feature.saveAsImage.emphasis.iconStyle配置
readOnly: false, //是否不可编辑(只读)
optionToContent: function() , //自定义dataView展现函数。用以取代默认的textarea使用更丰富的数据编辑
contentToOption: (container:HTMLDomElement, option:Object) => Object, //在使用optionToContent情况下,如果支持数据编辑后的刷新,需要自行通过该函数实现组装option逻辑
lang: ['数据视图', '关闭', '刷新'], //数据视图上有三个话术,默认['数据视图', '关闭', '刷新']
backgroundColor: '#fff', //数据视图浮层背景色
textareaColor: '#fff', //数据视图浮层文本输入区背景色
textareaBorderColor: '#333', //数据视图浮层文本输入区边框颜色
textColor: '#000', //文本颜色
buttonColor: '#c23531', //按钮颜色
buttonTextColor: '#fff' //按钮文本颜色
,
dataZoom: /这个有两个icon图标,所以基本都必须分开配置/
show: true,
title: //缩放和还原的标题文本
zoom: '区域缩放',
back: '区域缩放还原'
,
icon: //同上feature.saveAsImage.icon配置
zoom: '',
back: ''
,
iconStyle: , //数据区域缩放icon样式设置,同上feature.saveAsImage.iconStyle配置
emphasis: , //强调hover触发,同上feature.saveAsImage.emphasis.iconStyle配置
filterMode: 'filter', //与 dataZoom.filterMode 含义和取值相同
xAxisIndex: '', //指定哪些xAxis被控制。若缺省则控制所有的x轴。若设置为false则不控制任何x轴。如若置成3则控制axisIndex为3的x轴。若设置为[0, 3]则控制axisIndex为0和3的x轴。
yAxisIndex: '', //参考xAxisIndex,控制y轴
brushStyle: //刷选框样式,同上feature.saveAsImage.iconStyle配置
,
magicType:
show: true,
type: ['line', 'bar'], //启用的动态类型,包括line、bar、stack
title:
line: '切换为折线图',
bar: '切换为柱状图',
stack: '切换为堆叠',
tiled: '切换为平铺',
,
icon: //同上feature.saveAsImage.icon配置
line: '',
bar: '',
stack: ''
,
iconStyle: , //动态类型切换,同上feature.saveAsImage.iconStyle配置
emphasis: , //强调hover触发,同上feature.saveAsImage.emphasis.iconStyle配置
option: //各个类型的专有配置项。在切换到某类型的时候会合并相应的配置项
line: ,
bar: ,
stack:
,
seriesIndex: //各个类型对应的系列的列表
line: [],
bar: []

,
brush: //选框组件的控制按钮。也可以不在这里指定,而是在 brush.toolbox 中指定。
type:, //使用的按钮,属性值:rect/polygon/lineX/lineY/keep/clear
icon: //同上feature.saveAsImage.icon配置
rect: '',
polygon: '',
lineX: '',
lineY: '',
keep: '',
clear: ''
,
title:
rect: '矩形选择',
polygon: '圈选',
lineX: '横向选择',
lineY: '纵向选择',
keep: '保持选择',
clear: '清除选择'

,
myTool: /这个比较常用,自定义icon与功能/
show: true,
title: '',
icon: '',
onclick: function() //根据需要添加触发条件与方法

,
iconStyle: , //公用的 icon 样式设置。同上feature.saveAsImage.iconStyle配置
emphasis: , //强调hover触发,同上feature.saveAsImage.emphasis.iconStyle配置
zlevel: 0, //所有图形zlevel值。zlevel用于 Canvas 分层
z: 2, //组件的所有图形的z值。控制图形的前后顺序
left: 'auto',
top: 'auto',
right: 'auto',
bottom: 'auto',
width: 'auto',
height: 'auto',
参考技术B 适合的。
toolbox工具栏组件,内置有导出图片,数据视图,动态类型切换,数据区域缩放,重置五个工具。就很适合
参考技术C toolbox工具栏组件适用于饼图。
toolbox工具栏组件,内置有导出图片,数据视图,动态类型切换,数据区域缩放,重置五个工具。如下图:工具栏feature:各工具配置项。
参考技术D 适合的
toolbox工具栏组件,内置有导出图片,数据视图,动态类型切换,数据区域缩放,重置五个工具。就很适合

echarts饼图的百分比如何在toolbox的数据视图获取

参考技术A public List<Bars> pageListTwo(int currentPage, int showRows)
Connection con = null;
PreparedStatement ps = null;
ResultSet rs = null;
ArrayList<Bars> resultList = new ArrayList<Bars>();
try

以上是关于toolbox工具栏组件适用于饼图吗的主要内容,如果未能解决你的问题,请参考以下文章

我可以像这样画一个简单的油漆饼图吗?

jmp能画饼图吗

我可以查看 Chrome 分析数据的火焰图吗?

一个机器学习算法工具箱sklearn toolbox

MacOS虚拟Windows及工具箱 | Parallels Desktop and Toolbox 16.0

echarts饼图的百分比如何在toolbox的数据视图获取