echarts 柱状图 颜色渐变 270deg
时间: 2023-11-23 16:56:27 浏览: 69
颜色渐变的柱状图
3星 · 编辑精心推荐
以下是 echarts 柱状图颜色渐变 270deg 的实现方法:
1. 在 option 中设置 color 属性为一个数组,数组中的每个元素都是一个对象,对象中包含 offset 和 color 两个属性,offset 表示颜色渐变的位置,color 表示颜色值。如下所示:
```javascript
option = {
color: [
{
offset: 0,
color: 'rgba(0, 244, 255, 1)'
},
{
offset: 1,
color: 'rgba(0, 77, 167, 1)'
}
],
// 其他配置项
}
```
2. 在 series 中设置 itemStyle.normal.color 属性为一个对象,对象中包含 type 和 colorStops 两个属性,type 表示颜色渐变的类型,colorStops 是一个数组,数组中的每个元素都是一个对象,对象中包含 offset 和 color 两个属性,offset 表示颜色渐变的位置,color 表示颜色值。如下所示:
```javascript
option = {
series: [
{
type: 'bar',
data: [10,20, 30, 40, 50],
itemStyle: {
normal: {
color: {
type: 'linear',
colorStops: [
{
offset: 0,
color: 'rgba(0, 244, 255, 1)'
},
{
offset: 1, color: 'rgba(0, 77, 167, 1)'
}
]
}
}
}
}
],
// 其他配置项
}
```
以上两种方法都可以实现 echarts 柱状图颜色渐变 270deg 的效果。
阅读全文