具体效果描述和展示:
关键词:柱状图,分段,渐变,区间X轴
简述:每段区间上都有6段数据,需要以分段的柱状图表示出来。
下图的分段数据是随机生成的,可能有重复的数据
构思
开发业务的时候,业务中某个图表的原型是这样的,在某个区间上会有几组长度的数据,既要展示分段的效果,也要有堆叠的效果。
- 柱状图:楼主一开始考虑的是堆叠柱状图做分段的效果,但是又需求又要是每个柱子都是渐变的,用堆叠柱状图不好弄这个整体的渐变效果,所以最后就是使用了普通柱状图和象形柱状图来做这个效果。
象形柱状图的用处在于画出每一段的起始点(除第一段)
举例说明:[-10,-8]区间上有6段数据[3,5,10,8,9,6],累计是41,分段的位置应该就是[3,8,18,26,35]
象形柱状图的[echarts文档] - 区间坐标轴:要实现上图的效果需要用到两个x轴叠加,一个用于画数据(隐藏),一个用于展示用。
代码部分:
一些比较重要的配置项会有注释,仅供参考。
var barArr=[120, 200, 150, 80, 70, 110, 130,80,60,90]
/*
每个区间随机生成5个数据模拟象形柱状图的填充数组
画六段分开的柱子就要有5个数据,以此类推
该函数只做生成示例使用,具体可结合需求设置picArr
start 左区间
end 右区间
step 区间步长
barArr 普通柱状图填充数组
*/
function setPicArr(start,end,step,barArr){
let picArr=[]
let cur=start
let i=0
while(cur<=end){
if(cur!==0){
for(let j=0;j<5;j++){
picArr.push({value:[cur.toString(),Math.floor((Math.random()*(barArr[i]-1))+1)]})
}
i++
}
cur+=step
}
return picArr
}
var option = {
grid: [
{
top: 50,
bottom: 50,
left: 50,
right: 50
},
{
top: 50,
bottom: 50,
left: 50,
right: 50
}
],
xAxis: [
//该坐标轴隐藏,柱状图和象形柱状图都画在该坐标轴上,无0刻度
{
type: 'category',
show: false,
data: [-10, -8, -6, -4, -2, 2, 4, 6, 8, 10],
gridIndex: 0
},
//该坐标轴作为展示使用
{
type: 'category',
boundaryGap: false,
data: [-10, -8, -6, -4, -2, 0, 2, 4, 6, 8, 10],
gridIndex: 1
}
],
yAxis: [
{
type: 'value',
gridIndex: 0
},
{
type: 'value',
gridIndex: 1
}
],
series: [
//普通柱状图
{
data: barArr,
type: 'bar',
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0.6,
color: 'rgba(142,197,252,0.5)'
},
{
offset: 0.3,
color: 'rgba(224,60,252,0.5)'
}
])
},
//象形柱状图
{
type: 'pictorialBar',
symbol: 'rect',
symbolSize: ['100%', 3],
z: 10,
symbolPosition: 'end',//象形柱状图每个数据画的位置,可选选项具体有
itemStyle: {
color: '#fff'
},
data: setPicArr(-10,10,2,barArr)
}
]
};