Function description

As shown in the figure, there is no column with background color (hereinafter referred to as "difference column"), the difference column itself does not display label, and the label above the difference column in the figure is actually the purple column label.
The difference between the purple column and the green column is achieved by superimposing the two columns.

Be careful

Label above the difference column It's bound to the data of the difference column, because if I use the purple column label, (the data is dynamic) I can't judge the specific difference, and I can't know the height of the difference column, so I can't guarantee that it's just above the difference column every time, so I just bind it to the difference column, as long as I locate according to the difference column.

Requirement:

When I click the difference column, that is to hide the difference column, I need to make sure that the purple column has a text description. Then the problem comes. When I hide the difference column, the label will also hide.

Solution

The general idea is that when the difference column is displayed, we use the label of the difference column; when the difference column is hidden, we use the label of the purple column itself. Now we just need to solve one problem, which is also the core of my blog
Figure click event and label text complete linkage

Event: legendselectchanged

In the event of clicking a column, we can get the desired parameters in the callback parameters, including the name of the column. Then we can determine which column is clicked.

options.series.data.label.formatter

This can be used to bind strings or functions. We just use functions.

let showLabel = true
//This is just part of the code for options.series.data
{
              value:800,
              itemStyle:{
                  borderColor:"#ffffff",
                  borderType:"dashed"
              },
               label:{
                  show:true,
                  formatter:function(){
                      showLabel=!showLabel
                      return showLabel?"2000":""
                  },
                  color:"#ffffff",
                  position:"top",
                  distance:5
              }
              }

Fix it! Here we do not bind legendselectchanged. In fact, we only bind a callback function to him. If we do not bind it, it will execute. I just want to show that this thing may be used internally. We can also use this event to do other things.

primary

In fact, what I understand is not deep enough, and the real internal principle is not very clear to me. Here, every time we click the chart column, we bind it to the formatter function and it will execute once. You can understand the principle similar to the counter.

I will release the complete code below
You can put it in echarts and try it

let showLabel = true
option = {
    backgroundColor:"#572733",
    grid: {
        show: false,
        left: '0',
        right: '3%',
        top: '13%',
        bottom: '18%',
        containLabel: true,
    },
    legend: {
        data:[{
            name:"A",
            icon:"circle",
            
        },"B","C"],
        icon: 'circle',
        bottom: 10,
        selected: false,
        itemWidth: 15,
        itemHeight: 15,
        textStyle: {
            color: "#fff"
        },
    },
    //prompt box
    tooltip: {
        trigger: 'axis',
        extraCssText: 'width:170px;z-index:2',
        position(pointer, obj, dom) {
            let limitVal = 180
            if ((dom.clientWidth > limitVal)) {
                limitVal = window.innerWidth - dom.clientWidth
            }

            let screenWidth = document.body.clientWidth

            if (screenWidth - pointer[0] < (dom.clientWidth / 2 + 10)) {
                return [pointer[0] - limitVal, '10%']
            } else if (pointer[0] > (dom.clientWidth / 2 + 10)) {
                return [pointer[0] - limitVal / 2, '10%']
            } else {
                return [pointer[0], '10%']
            }
        },

        axisPointer: {
            lineStyle: {

                type: 'dashed',
                width: 1,
            }
        },
    },
    //X axis
    xAxis: [{
        type: 'category',
        // splitLine: {show: false},
        data: ['2018','2019','2020','2021','2022'],
        // axisLine: {
        //     lineStyle: {
        //         color: axisColor,
        //         width: 1,
        //         opacity: 0.1
        //     },
        // },
        // axisTick: {
        //     alignWithLabel: true,
        //     show: false,
        // },
        // axisLabel: {
        //     fontFamily: 'oswaldfont-regular',
        //     fontSize: 12,
        //     color: '#9397AA'
        // },
        position: 'bottom',
        offset: 5
    }, {
        type: 'category',
        data:  ['2018','2019','2020','2021','2022'],
        axisPointer: {
            type: 'none'
        },
    }],
    //Y axis
    yAxis: [{
        type: 'value',
        name: '',
        axisLine: {
            show: true,
            lineStyle: {
                type: 'dashed',
                color: '#52525b'
            }
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: '#e8e7ee',
                fontSize: '12',
                fontFamily: 'oswaldfont-regular'
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                type: 'dashed'
            }
        },
        splitNumber: 3,
    },
    {
        type: 'value',
        name: '',
        axisLine: {
            show: true,
            lineStyle: {
                type: 'dashed',
                color: '#52525b'
            }
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: '#e8e7ee',
                fontSize: '12',
                fontFamily: 'oswaldfont-regular'
            }
        },
        splitLine: {
            show: true,
            lineStyle: {

                type: 'dashed'
            }
        },
        splitNumber: 3,
    }
    ],
    //data
    series: [
        {
          name: 'A',
          type: 'bar',
          barWidth: '15%',
          itemStyle: {
              color:"#437EFF"
          },
          stack:"B",
          data: [ {
              value:1000,
              label:{
                  show:true,
                  formatter:"1000",
                  color:"#ffffff",
                  position:"top",
                  distance:5
              }
          }, {
              value:1400,
              label:{
                  show:true,
                  formatter:"1400",
                  color:"#ffffff",
                  position:"top",
                  distance:5
              }
          },
          {
              value:2000,
              label:{
                  show:true,
                  formatter:function(){
                      showLabel = !showLabel
                      return showLabel?"2000":""
                  },
                  color:"#ffffff",
                  position:"top",
                  distance:5
              }
          }
          ,0,0]
        },
         {
          name: 'B',
          type: 'bar',
          barWidth: '15%',
        //   yAxisIndex:0,
          itemStyle: {
              color:"transparent",
          },
          stack:"B",
          data:[0,0,{
              value:800,
              itemStyle:{
                  borderColor:"#ffffff",
                  borderType:"dashed"
              },
               label:{
                  show:true,
                  formatter:"2000",
                  color:"#ffffff",
                  position:"top",
                  distance:5
              }
              },
              0,0
              ]
        //   data: [0,0,200,0,0]
        },
        {
          name: 'C',
          type: 'bar',
          barWidth: '15%',
        //   yAxisIndex:0,
          itemStyle: {
              color:"#FDB434"
          },
          data: [0,0,{
              value:2800,
              label:{
                  show:true,
                  formatter:"2800",
                  color:"#ffffff",
                  position:"top",
                  distance:5
              }
          },
          {
              value:3500,
              label:{
                  show:true,
                  formatter:"3500",
                  color:"#ffffff",
                  position:"top",
                  distance:5
              }
          }
          ,{
              value:2000,
              label:{
                  show:true,
                  formatter:"2000",
                  color:"#ffffff",
                  position:"top",
                  distance:5
              }
          }]
        }
    ]
};