echarts图表tooltip色块失效

zttbee2026-10-22 23:10

当系列配置了渐变效果，echarts返回的color是一个对象，不是个颜色字符串，直接赋值会导致色块消失，解决办法：提前设一个状态色映射表，通过seriesName获取色块。

原代码：

bash 复制代码

formatter: (params) => {
            var item = params[0];
            var name = item.name;
            var value = item.value;
            var seriesName = item.seriesName;
           
            let tipStr = `<div class='axisTitle' style='border-radius:10px;'>${name}</div>`;
            tipStr += `
                <div style="display:flex;align-items:center;gap:6px;margin:4px 0"><span style="color:${item.color}">●</span> 
        ${seriesName}: <b>${value}</b> 次</div>
              `;
            return tipStr;
          },
        },

修改后代码

bash 复制代码

formatter: (params) => {
            var item = params[0];
            var name = item.name;
            var value = item.value;
            var seriesName = item.seriesName;
            // 从预定义映射表取纯色，彻底解决渐变色块不显示问题
            const blockColor = this.seriesColorMap[seriesName] || item.color;

            let tipStr = `<div class='axisTitle' style='border-radius:10px;'>${name}</div>`;
            tipStr += `
                <div style="display:flex;align-items:center;gap:6px;margin:4px 0"><span style="color:${blockColor}">●</span> 
        ${seriesName}: <b>${value}</b> 次</div>
              `;
            return tipStr;
          },
        },

其中在data中提前定义seriesColorMap颜色数组

bash 复制代码

// 预定义所有纯色映射，解决tooltip渐变色块不显示问题
      seriesColorMap: {
        越线次数: "#56B1E0",
        影子价格: "#56B1E0",
        "阻塞状态(0/1)": "#ff6b6b",
      },