這個(gè)就是tooltip

option的tooltip中formatter可以自定義顯示內(nèi)容

tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
                type: 'shadow'        // 默認(rèn)為直線，可選為：'line' | 'shadow'
            },
            textStyle:{
            align:'left',
            },
            formatter(params) { //自定義tooltip顯示內(nèi)容
              // params可以拿到當(dāng)前柱子的所有數(shù)據(jù)
              let data = ''
              let sum = 0
              for (let index = 0; index < params.length; index++) {   // 遍歷params，拼接成自己想要的內(nèi)容return出去
                let str = params[index].marker.substring(params[index].marker.indexOf('background-color'))
                const startNum = str.indexOf(':')
                const endNum = str.indexOf(';')
                const color = str.substring(startNum+1,endNum)
                const item = `${params[index].marker}<span style="color: ${color}">${params[index].seriesName}: ${params[index].data}</span><br/>`;
                sum = sum + params[index].data
                data = data + item
              }
              const name = params[0].name
              data = name +'<br/>'+ data + '總計(jì)： '+ sum
              return data;
            },
          },

然后就是這個(gè)樣子的

image.png