前端-echarts如何在多柱图里为每个柱子显示自己的tooltip提示弹窗

1、修改tooltip

  trigger: 'item'

2、修改formatter

代码：

      option1: {
        tooltip: {
          trigger: 'item',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          },
          formatter: function (params) {
            console.log('123', params);
            //params 是一个数组，包含了每个数据项的信息
            var result = `<div style="width: 402px;font-family: PingFang SC, PingFang SC-Regular;backdrop-filter: blur(20px);">
                <div class="top" style="margin-top:14px;margin-left:20px">
                  <div class="tl" style="width: 50px;font-size: 18px;margin-bottom: 4px;margin-right: 200px;">${params.seriesName}：${params.data.value}</div>
                  <div class="tr" style="width: 50px;font-size: 18px;margin-bottom: 4px;">工段名称：${params.data.workshopSectionName}</div>
                  <div class="tr" style="width: 50px;font-size: 18px;margin-bottom: 4px;">工作中心名称：${params.data.workCenterName}</div>
                </div>
              </div>`;

            return result;
          }
        },
        legend: {
          data: ['实际节拍', '理论节拍'],
          selectedMode: false
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '实际节拍',
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            barWidth: '20%' // 设置柱子宽度为20%
          },
          {
            name: '理论节拍',
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            barWidth: '20%' // 设置柱子宽度为20%
          }
        ]
      },