echarts图标的文字(label)动态切换显示隐藏

功能描述

如图，没有背景色的柱子（后面简称 “差值柱” ），差值柱本身是不显示 label 的，图中差值柱上方的 label 实际是紫柱的 label。
这个紫柱上方显示和绿柱相比较持平的差值柱是通过将两个柱子叠加完成的。

注意

差值柱上方的 label 是绑定在差值柱的data中的，这是因为如果我用紫柱的label的话，（数据是动态的）我不好判断具体会差多少，而导致的差值柱的高度我无法得知，就无法保证能够每次都正好位置在差值柱的上方，所以就干脆绑定在差值柱，只要依据差值柱去定位就可以了。

要求：

当我点击差值图列，也就是隐藏差值柱时，我需要保证紫柱有文字描述，那么问题来了，当我隐藏差值柱时，label也会跟着隐藏。

解决方案

大致思路就是 当差值柱显示时，我们采用差值柱的label；当差值柱隐藏时，我们采用紫柱本身的label就可以了。那么我们现在只要解决一个问题，也是我这个博客的核心问题
图列点击事件和label文字完成联动

事件：legendselectchanged

图列点击事件，我们可以在回调参数中拿到想要的参数，其中就包括图列的name，那么我们就可以判断到底是点击的哪个图列。

options.series.data.label.formatter

这个可以绑定字符串，也可以绑定函数，我们就是利用函数。

let showLabel = true
//此处只是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
              }
              }

搞定了！这里我们并没有绑定legendselectchanged，其实我们绑定也只是给他个回调函数而已，不绑定也是会执行的，我这里只是想说明他内部可能用到了这个东西，我们也可以利用这个事件做一些其他的事情。

原

其实我理解的也不够深入，真正内部的原理我也不是很清楚，这里我们每点击一次图列，我们绑定给formatter函数就会执行一次，你可以理解为类似计数器的原理。

下面我放出完整代码
可以放到echarts试一下

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"
        },
    },
    //提示框
    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轴
    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轴
    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,
    }
    ],
    //数据
    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
              }
          }]
        }
    ]
};