有时候有一些稀奇古怪项目用了稀奇古怪的自研UI 二次封装echarts 导致行内 new echarts 报错
设置渐变色可以这样写
series: [
{
data: [3008, 9010, 262],
type: 'bar',
barWidth: '30px',
color: {
type: 'linear',
// x=0,y=1,柱子的颜色在垂直方向渐变
x: 0,
y: 1,
colorStops: [
// 0%处的颜色
{
offset: 0,
color: '#12c2e9'
},
// 50%处的颜色
{
offset: 0.5,
color: '#c471ed'
},
// 100%处的颜色
{
offset: 1,
color: '#f64f59'
}
],
global: false // 缺省为 false
},
itemStyle: {
normal: {
// 设置柱子的圆角
barBorderRadius: [18, 18, 0, 0]
}
}
}
]
纵向渐变
series: [
{
data: [120, 200, 150, 80, 333],
type: 'bar',
barWidth: '10px',
itemStyle: {
// 柱状图的背景色
normal: {
// 每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
color: function (params) {
var index = params.dataIndex
var colorList = [
// 渐变颜色的色值和透明度
// 透明度从0
[
'rgba(15,235,255,0.3)',
'rgba(15,235,255,0.3)',
'rgba(15,235,255,0.3)',
'rgba(15,235,255,0.3)',
'rgba(15,235,255,0.3)',
'rgba(15,235,255,0.3)',
'rgba(15,235,255,0.3)',
'rgba(13,94,208,0.3)',
'rgba(255,155,15,0)',
'rgba(253,103,96,0.3)'
], // 到透明度1 ,如果需要不同的颜色直接修改不同颜色即可
[
'rgba(15,235,255,0.6)',
'rgba(15,235,255,0.6)',
'rgba(15,235,255,0.6)',
'rgba(15,235,255,0.6)',
'rgba(15,235,255,0.6)',
'rgba(15,235,255,0.6)',
'rgba(15,235,255,0.6)',
'rgba(13,94,208,0.6)',
'rgba(255,155,15,0.6)',
'rgba(253,103,96,0.6)'
]
]
return {
colorStops: [
{
offset: 0.3, // 颜色的开始位置
color: colorList[0][index] // 0% 处的颜色
},
{
offset: 0.6, // 颜色的结束位置
color: colorList[1][index] // 100% 处的颜色
}
]
}
}
}
},
showBackground: true,
label: {
show: true,
position: 'right',
valueAnimation: true
}
}
]
网友评论