在使用echarts绘制图表时, 如果需要使用渐变色
, 则应使用echarts内置的渐变色生成器echarts.graphic.LinearGradient
。
为方便讲解, 先上示例代码:
{
type: 'bar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#000'},
{offset: 0.5, color: '#888'},
{offset: 1, color: '#ddd'}
]
)
}
}
}
此配置是一个常见的柱状图配置代码, 柱子的color配置使用了echarts.graphic.LinearGradient
来声明渐变色. 可以看到, 使用时传入了5个参数。
其中, 前4个参数用于配置渐变色的起止位置, 这4个参数依次对应:右/下/左/上
四个方位。例如:
0 0 0 1
则代表渐变色从正上方开始
0 1 0 0
代表从正下方
向正上方
渐变
1 0 0 1
代表从右上方
向左下方
渐变
第5个参数则是一个数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset
和color
两个参数. offset
的范围是0 ~ 1
, 用于表示位置, color
不用多说肯定是表示颜色了. 像示例代码的配置则表示:
- 整个渐变过程是从正上方向正下方变化
- 起始
(offset: 0)
颜色为#000
, 变化到正中间(offset: 0.5)
位置时颜色为#888
, 变化到结束(offset: 1)
位置时颜色为#ddd
本文参考转载自:
https://blog.csdn.net/juhaotian/article/details/78242415