实现效果:
1.数据的最高值显示不同的颜色
2.数据展示为渐变色
3.显示数据的背景阴影
'series': [
//表格中展示颜色的配置项
{
name: '',
type: 'bar',
barWidth: '18',//柱体宽度
itemStyle: {
normal: {
//color配置字体的颜色
color: function(params) {
var index_color = params.value;
if (index_color === Math.max.apply(null,data1)) {//Math.max.apply获取数据源中的的最大值
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: 'rgba(255, 191, 44, 0.2)',
},
{
offset: 1,
color: '#FFBF2C',
},
]);//Echarts的渐变色设置
} else {
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: 'rgba(24, 144, 255, 0.2)',
},
{
offset: 1,
color: '#35C3FF',
},
]);
}
}
}
},
zlevel: 3,
data: data1,//数据源
label: { normal: {
show: true,
textStyle: {
color: '#fff',
fontSize: 12
},
position: 'top'
}}
},
//表格中每条数据的背景阴影的配置项
{
name: '',
type: 'bar',
barWidth: '18',//背景阴影宽度
barGap: '-100%',//进行偏移,将背景移到数据正下方
itemStyle: {
normal: {
color: 'rgba(255,255,255,0.1)'
}
},
zlevel: 2,
data: ['10', '10', '10', '10', '10'],//每项阴影显示高度
label: {
normal: {
show: false,
textStyle: {
color: '#fff',
fontSize: 12
},
position: 'top'
}
}
}
]
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)