Two methods of implementing Echarts histogram background

This is the 23rd day of my participation in Gwen Challenge. See more details: Gwen Challenge!

Introduction to 👽

There are a lot of tricks in Echarts, and some of them have been mentioned in previous installments:

Echarts map circular background and shadow implementation

Vue project uses Echarts to draw thermal maps

【 Front-end Practice Series 3 】 Avoid the pits! The introduction of Echarts5 to draw diagrams on demand in applets.

Today we continue to introduce a more practical: bar graph background implementation. There are two ways to realize bar graph background, the more common and simple is the first: configure background attribute, but there are some special needs will encounter the second: using barGap attribute displacement overlay.

👽 Method 1: Configure background properties

This method must be simple and is mainly used to achieve the same background length of each column. The key attribute is serial-bar-showBackground. Background styles can be customized using backgroundStyle. However, the defect of this method is that the height of the background of each column is consistent and cannot be changed directly.

The configuration is as follows (the configuration can be run in the echarts online editor) :

option =  {
        grid: {
          left: "10%".right: 0.top: 30.bottom: 30.containLable: true,},tooltip: {
          trigger: "axis".axisPointer: {
            type: "shadow",}},xAxis: {
          type: "category".data: [
            "January"."February"."March"."April"."May"."June"."July"."August"."September"."October"."November"."December",]},yAxis: {
          type: "value".splitLine: {
            show: false,}},series: [{data: [120.200.150.80.70.110.130.150.80.70.110.130].type: "bar".name: "Retained".stack: "User".showBackground: true.emphasis: {
              focus: "series",},barWidth: 9.itemStyle: {
              color: 'blue'.borderRadius: 4.5,},},],};Copy the code

👽 Method 2: Configure the backGap attribute

Unlike the first method, the barGap property actually adjusts the distance between each column in the bar chart. This property takes a percentage string as an argument, but the magic is that column stacking can be achieved by setting barGap: -100%. That is to use another column with a number as the background. This makes it possible to achieve different background heights by setting different values, which is also the flexibility of the method.

The configuration is as follows (the configuration can be run in the echarts online editor) :

option =  {
        grid: {
          left: "10%".right: 0.top: 30.bottom: 30.containLable: true,},tooltip: {
          trigger: "axis".axisPointer: {
            type: "shadow",}},xAxis: {
          type: "category".data: [
            "January"."February"."March"."April"."May"."June"."July"."August"."September"."October"."November"."December",]},yAxis: {
          type: "value".splitLine: {
            show: false,}},series: [{/ / the background
            data: [150.200.180.180.90.130.130.190.90.90.150.160].type: "bar".emphasis: {
              focus: "series",},barWidth: 9.barGap:'100%'.silent:true.// Be sure to also set the silent property so that the background column does not respond to any operations
            itemStyle: {
              color: 'RGB (240240240)..borderRadius: 4.5,}}, {data: [120.200.150.80.70.110.130.150.80.70.110.130].type: "bar".emphasis: {
              focus: "series",},barWidth: 9.itemStyle: {
              color: 'blue'.borderRadius: 4.5,},},],};Copy the code

👽 epilogue

Did you learn, iron juice?