自定义tooltip显示内容（支持里面同时显示“总计”）

这个就是tooltip

option的tooltip中formatter可以自定义显示内容

tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            },
            textStyle:{
            align:'left',
            },
            formatter(params) { //自定义tooltip显示内容
              // params可以拿到当前柱子的所有数据
              let data = ''
              let sum = 0
              for (let index = 0; index < params.length; index++) {   // 遍历params，拼接成自己想要的内容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 + '总计： '+ sum
              return data;
            },
          },

然后就是这个样子的

image.png