使用象形柱状图能够实现很多有意思的效果,这里用象形柱状图实现进度条效果,实现效果如下:
前置知识
基准柱
象形柱图可以被想象为:它首先是个柱状图,但是柱状图的柱子并不显示。这些柱子我们称为『基准柱(reference bar)』,根据基准柱来定位和显示各种象形图形(包括图片)。
每个象形图形根据基准柱的定位,是通过 symbolPosition、symbolOffset 来调整其于基准柱的相对位置。
symbolSize
symbolSize 表示图形的大小。
可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为 20,高为 10,也可以设置成诸如 10 这样单一的数字,表示 [10, 10]。
可以设置成绝对值(如 10),也可以设置成百分比(如 '120%'、['55%', 23])。
当设置为百分比时,图形的大小是基于基准柱的尺寸计算出来的。
例如,当基准柱基于 x 轴(即柱子是纵向的),symbolSize 设置为 ['30%', '50%'],那么最终图形的尺寸是:
宽度:基准柱的宽度 _ 30%。
高度:
如果 symbolRepeat 为 false:基准柱的高度 _ 50%。
如果 symbolRepeat 为 true:基准柱的宽度 * 50%。
基准柱基于 y 轴(即柱子是横向的)的情况类似对调可得出
此属性可以被设置在系列的 根部,表示对此系列中所有数据都生效;也可以被设置在 data 中的 每个数据项中,表示只对此数据项生效。代码示例如下:
js
series: [{
symbolSize: ... // 对 data 中所有数据项生效。
data: [23, 56]
}]
或者
series: [{
data: [{
value: 23
symbolSize: ... // 只对此数据项生效
}, {
value: 56
symbolSize: ... // 只对此数据项生效
}]
}]
symbolClip
symbolClip 表示是否剪裁图形,可选值如下:
false/null/undefined:图形本身表示数值大小。
true:图形被剪裁后剩余的部分表示数值大小。
symbolClip 常用在以下场景:同时表达『总值』和『当前数值』。在这种场景下,可以使用两个系列,一个系列是完整的图形,当做『背景』来表达总数值,另一个系列是使用 symbolClip 进行剪裁过的图形,表达当前数值。
『当前值系列』设置了比『背景系列』更高的 z,使得其覆盖在『背景系列』上。
此属性可以被设置在系列的 根部,表示对此系列中所有数据都生效;也可以被设置在 data 中的 每个数据项中,表示只对此数据项生效。代码示例如下:
js
series: [{
symbolClip: ... // 对 data 中所有数据项生效。
data: [23, 56]
}]
或者
series: [{
data: [{
value: 23
symbolClip: ... // 只对此数据项生效
}, {
value: 56
symbolClip: ... // 只对此数据项生效
}]
}]
symbolRepeat
symbolRepeat 用来设置图形元素是否重复。值可为:
false/null/undefined:不重复,即每个数据值用一个图形元素表示。
true:使图形元素重复,即每个数据值用一组重复的图形元素表示。重复的次数依据 data 计算得到。
a number:使图形元素重复,即每个数据值用一组重复的图形元素表示。重复的次数是给定的定值。
'fixed':使图形元素重复,即每个数据值用一组重复的图形元素表示。重复的次数依据 symbolBoundingData 计算得到,即与 data 无关。这在此图形被用于做背景时有用,symbolBoundingData 没有设置时按照基准柱的值来设置。 此属性可以被设置在系列的 根部,表示对此系列中所有数据都生效;也可以被设置在 data 中的 每个数据项中,表示只对此数据项生效。代码示例如下:
js
series: [{
symbolRepeat: ... // 对 data 中所有数据项生效。
data: [23, 56]
}]
或者
series: [{
data: [{
value: 23
symbolRepeat: ... // 只对此数据项生效
}, {
value: 56
symbolRepeat: ... // 只对此数据项生效
}]
}]
实现
设置背景
首先设置基础参数,因为是设置背景,种类需要设置的 z 为一个相对较小的值,代码示例及效果如下:
js
series: [
{
type: "pictorialBar",
animationDuration: 0,
symbol: "rect",
itemStyle: {
normal: {
color: "#EFEFEF",
},
},
label: {
normal: {
show: true,
position: "right",
offset: [0, 2],
distance: 30,
textStyle: {
color: "#409EFF",
fontSize: 14,
},
formatter: function (a) {
return `${a.value}%`;
},
},
},
data: [90, 70, 80],
z: 0,
animationEasing: "elasticOut",
},
];
此时的柱状图的宽度是均分的,可以通过设置 symbolSize 来调整大小,这里设置为[10, 20];通过设置 symbolRepeat 来设置图形元素是否重复及重复的类型,因为效果是类似电池的进度条,所以这里需要通过 symbolMargin 设置间隔,修改后的代码及效果如下:
js
{
// 背景
type: "pictorialBar",
animationDuration: 0,
symbolRepeat: "fixed",
symbolMargin: 2, // 背景间隔
symbol: "rect",
symbolSize: [10, 20],
itemStyle: {
normal: {
color: "#EFEFEF",
},
},
label: {
normal: {
show: true,
position: "right",
offset: [0, 2],
distance: 30,
textStyle: {
color: "#409EFF",
fontSize: 14,
},
formatter: function (a) {
return `${a.value}%`;
},
},
},
data: [90, 70, 80],
z: 0,
animationEasing: "elasticOut",
},
设置真实值
真实值与设置背景基本类似,这里需要多设置一个 symbolClip,根据真实值来进行裁切,如果不设置 symbolClip,则会填满整个柱状图。代码示例及效果如下:
js
{
type: "pictorialBar",
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "#1577FF", // 0% 处的颜色
},
{
offset: 1,
color: "#409EFF", // 100% 处的颜色
},
],
},
},
symbolRepeat: "fixed",
symbolMargin: 2, // 背景间隔
symbol: "rect",
symbolSize: [10, 20],
symbolClip: true,
data: [90, 70, 80],
z: 2,
animationEasing: "elasticOut",
},
至此,电池进度柱状图完成。