记录一下在公司遇到的一些功能,以及相关实现
经过之前环形图需求,对ECharts的使用感觉已经非常熟练了,这次写柱状图的时候就快了很多。
在这里还是力推一下这个ECharts图表集,大部分的灵感都来自于这 ^_^
等会讲具体功能的时候,也会将一些具体的案例提供给大家
首先,我给大家提供一种柱状图样式,个人感觉不错,而且实现也很简单
看着很酷,实现也很简单,只需要改变一下柱状的color即可,改为渐变色
我取巧,弄了种很简单的方式
{
option.color: [{
return {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#21B8FA' // 随便取颜色
},
{
offset: 0.8,
color: '#21B8FA' + '00'
}
]
}
}]
}
可以看到,在颜色后面加00
即可,也就是透明度大小,换成另一种形式,大家可能看着更熟悉,
#21B8FA
→ rgb(33,184,250)
,而加00
就是,#21B8FA00
→ rgba(33,184,250, 0)
接下来我们来看具体功能点吧
有个配置项,是设置柱状类型的,有两个选项