echarts group nested histogram
Recently, I have been dealing with echarts every day at work, and it is inevitable that I will encounter some difficult requirements. Today I will share with you the grouped nested histogram. Let’s first understand what a grouped histogram is, which is an X-axis There will be multiple columns. There are examples on the echarts official website legend, so what is a nested column chart? That is, there is a pillar wrapped inside the pillar. In fact, the two pillars are overlapped together, and the width of the outer pillar should be set wider than the width of the inner pillar. Next, I will show you a picture:
this is a nested histogram, but it is only suitable when there are only two data items on the X-axis. We can directly use the barGap attribute to achieve this effect. This attribute means merging. So what if we have multiple data items on the X-axis? This method is not suitable, otherwise multiple data items will be merged into one column, so what effect am I talking about? As shown in the picture (grouped nested histogram):
the color is ugly, so it is easy for everyone to view without adjusting it. Haha, this is a grouped nested histogram, with multiple data nested. In fact, this effect can also be achieved with barGap, but it is more troublesome. There will be bugs. The bug is that when we cancel any legend item, the position of the column will be misplaced. Anyway, I can’t accept it, so I adopt another solution (pictographic histogram diagram), and let’s talk about the demo code:
//下面就是上图的配置项，关键部分有注释
option = {
title: {
text: '业绩报表'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五']
},
yAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
series: [
{
//里层的柱子
name: '销售部A组',
type: 'pictorialBar',//象形柱状图
barWidth:30,//柱子的宽度
data: [72, 79,70, 67, 59],//柱子的数据
symbol:'circle',//柱子的形状
symbolRepeat:true,//是否重复
symbolOffset: [-30, 0],//柱子的位置
symbolBoundingData:1,//图形的个数
z:12//柱子的层级
},
{
//外层的柱子
name: "销售部B组",
type: "pictorialBar",
barWidth:50,
//symbolSize: [40, 18], //调整截面形状
symbolOffset: [-40, 0],
symbol:'circle',
symbolRepeat:true,
symbolBoundingData:1,
itemStyle: {
color: ''
},
data: [82, 89,90, 97, 79]
},
{
//里面的柱子
name: '营销部A组',
type: 'pictorialBar',
data: [73, 80, 71, 75, 64],
barWidth:30,
symbol:'circle',
symbolRepeat:true,
symbolOffset: [40, 0],
symbolBoundingData:1,
z:12
},
{
//外面的柱子
name: "营销部B组",
type: "pictorialBar",
barWidth:50,
//symbolSize: [40, 18], //调整截面形状
symbolOffset: [30, 0],
symbol:'circle',
symbolRepeat:true,
symbolBoundingData:1,
itemStyle: {
color:''
},
data: [82, 89, 89, 97, 79]
},
]
};
The pictographic histogram needs to specify the graphics by yourself. The default configuration is limited. If it is not enough for you, you need to introduce the externally linked graphics yourself. I only need a rounded corner effect, so the selected graphics type is circle, and the settings are not repeated. Then set the number to one, which is equivalent to elongating a circle, so there is a rounded effect. By adjusting the position to make the corresponding columns overlap, and then the width of the two columns is different, the effect achieved is this way. The advantage is that we click any item of legend to cancel, and the position of the pillar will not be misaligned. If you happen to encounter this problem, I believe you can understand it. If you have any questions, please feel free to communicate. Thank you for every encounter. Hahaha