一、设计理念
echarts是一款开源的,基于Javascript的可视化界面库,用于在Web页面中炫酷的呈现数据。和大多数js图表库不同的是,echarts将图形和数据分离,将数据和图形传递给图形组件,使用option设置组件的各种属性、数据和交互事件。echarts主要包括直观的数据管理、主题可配置、快速绘制及海量数据展示等功能。在数据展示方面,通过柱状图、折线图、散点图、饼状图、地图等多种图表,可满足各种复杂数据展示方案。
关于柱状图渐变色的设计理念,设计师们的灵感来源于色彩的变化和变幻,它的设计思路就是渐变色,将色彩渐变过程当成柱状图的高度与数据的关系,通过饱和度和亮度变化,表现出不同的数据层次感。
二、基础柱状图
首先我们需要通过option设置series中的data数据,data是一个数组,在数组中包含多个对象,在对象中设置name和value属性。
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
以上代码显示的柱状图是一种基础形式,仅仅展现了数据和柱形的关系,而没有任何装饰和美化。下面,我们将在基础柱状图的基础上,实现各种渐变色效果。
三、单一渐变色
单一渐变色简单易实现,仅需要设置color属性为渐变色即可。在series的data属性中,加入color属性,如下所示:
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#00ffe0' },
{ offset: 1, color: '#007fd6' }
]
)
}]
};
其中,color属性的值为一个echarts.graphic.LinearGradient类型的渐变对象,它接收四个参数,分别表示渐变的方向和起始终止坐标,最后一个参数是数组,表示在该渐变坐标系内,渐变的色值可以设多个颜色值,做出更复杂的渐变效果。
四、多重混合色
多重混合色是将多个颜色和谐混合在一起,呈现出一种新的颜色感觉。通过echarts.graphic.LinearGradient接收的color数组,我们可以设置多个颜色值,如下代码:
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#d70934' },
{ offset: 0.1, color: '#e8336b' },
{ offset: 0.3, color: '#f6c8a1' },
{ offset: 0.6, color: '#cab3e9' },
{ offset: 1, color: '#8c7ae6' }
]
)
}]
};
在颜色对象中,通过offset属性设置不同的色值渐变区段,使得颜色更加和谐。
五、动态渐变色
动态渐变色是一种流动的渐变感,柱形的高度跟随渐变的颜色依次变化,呈现出一种时尚 stylish 的效果。这个效果的实现,需要有随着柱状图的高度逐渐变化的渐变色。
option = {
xAxis: {
type: 'value',
max: 100,
min: 0
},
yAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
series: [{
name: '销量',
type: 'bar',
data: [46, 50, 24, 18, 64, 80, 55],
itemStyle: {
normal: {
color: function(params) {
var colorList = [
[
'#E8B0D6',
'#ffa750'
],
[
'#C6C8F3',
'#F4E8C1'
],
[
'#97B5F1',
'#FEC074'
],
[
'#V94F87',
'#E32F46'
],
[
'#00c2ff',
'#ffb30f'
],
[
'#AEE0FB',
'#FF9F7F'
],
[
'#74ABE2',
'#EFE994'
]
];
var index = params.dataIndex;
if (params.type == 'bar') {
return {
type: 'linear',
colorStops: [{
offset: 0,
color: colorList[index][0]
}, {
offset: 1,
color: colorList[index][1]
}]
}
}
}
}
}
}]
};
对比上面的代码,可以看到,我们通过设置itemStyle的normal属性为动态渐变色,color属性接收了一个匿名函数,该函数接受params,返回一个类型为‘linear’渐变对象,渐变对象中,通过colorStops数组,设置渐变的色值区间。
六、反向渐变色
反向渐变色与单一渐变色的实现类似,只需颜色设置相反即可。
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#007fd6' },
{ offset: 1, color: '#00ffe0' }
]
)
}]
};
从横向对比角度看,反向渐变色的柱形图和单一渐变色的柱形图相比,显得更加突出。
七、总结
以上就是对于echarts柱状图渐变色的详细讲解,通过单一渐变色、多重混合色、动态渐变色和反向渐变色等多种方案,实现了不同风格的图表色彩更加突出,展示数据更加生动的效果。在实际开发中,可以根据不同的需求选择相应的渐变方案,来呈现出更加优美、丰富、时尚的数据图表。