echarts.graphic.LinearGradient 渐变色⽣成器;设置渐变色仪表盘
·
一、渐变生成器说明
new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#000' },
{ offset: 0.5, color: '#888' },
{ offset: 1, color: '#ddd' }
]
)
可以看到,使用时传入了5个参数。
其中,前4个参数用于配置渐变色的起止位置,这4个参数依次对应右/下/左/上四个方位,而0 0 0 1则代表渐变色从正上方开始。
第5个参数则是一个数组, 用于配置颜色的渐变过程, 每一项为一个对象,包含offset和color两个参数。offset的范围是0 ~ 1, 用于表示位置,color表示颜色。
示例代码的配置则表示:
1. 整个渐变过程是从正上方向正下方变化。
2. 起始(offset: 0)
颜色为#000
,变化到正中间(offset: 0.5)
位置时颜色为#888
,变化到结束(offset: 1)
位置时颜色为#ddd。
二、使用示例
设置仪表盘轴线颜色渐变:
const colors = ['#C51C1C', '#F5C212', '#1BE274']
// 轴线
axisLine: {
show: true,
lineStyle: {
width: 10,
// color: [[1, '#D7EAFF']]
color: [
[0.25, new echarts.graphic.LinearGradient(
// 右下左上,渐变色从正下方开始,下面的以此类推
0, 1, 0, 0,
[
{ offset: 0, color: colors[0] },
{ offset: 0.5, color: colors[1] }
]
)],
[0.5, new echarts.graphic.LinearGradient(
0, 1, 1, 0,
[
{ offset: 0, color: colors[1] },
{ offset: 1, color: colors[2] }
]
)],
[0.75, new echarts.graphic.LinearGradient(
0, 0, 1, 1,
[
{ offset: 0.0, color: colors[2] },
{ offset: 1, color: colors[1] }
]
)],
[1, new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0.5, color: colors[1] },
{ offset: 1, color: colors[0] }
]
)]
]
},
}
效果:
// 轴线
axisLine: {
show: true,
lineStyle: {
width: 10,
// color: [[1, '#BCEBDC']]
color: [
[0.5, new echarts.graphic.LinearGradient(
// 右下左上,渐变色从左下方开始
0, 1, 1, 0,
[
{ offset: 0, color: colors[0] },
{ offset: 0.6, color: colors[1] }
]
)],
[1, new echarts.graphic.LinearGradient(
0, 0, 1, 1,
[
{ offset: 0, color: colors[1] },
{ offset: 0.6, color: colors[2] }
]
)]
]
},
}
效果:
完。记录于2022-6-16.
更多推荐
所有评论(0)