echarts设置tooltip后有白色背景

最新推荐文章于 2024-09-25 17:59:19 发布

原创最新推荐文章于 2024-09-25 17:59:19 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #ecmascript

echarts 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何解决Echarts中tooltip显示白色背景的问题，提供了解决方案：设置背景色和边框为透明，同时欢迎有其他方法的读者分享。

自定义背景tooltip代码

     tooltip: {
          trigger: "item",
          formatter: function (params) {
            //使用formatter函数修改需要的样式
            let res = "";
            res +=
              `<div style="background:url(${require('../../assets/image/tooltipbg.png')}) no-repeat 100% 100%; width:111px;height:65px;">` +
              '<div style="color:#fff;padding:10% 1%;font-size:14px">' +
              '<span style="border:4px solid #fff;border-color:transparent transparent transparent #66FFFF">' +
              "</span>" +
              "<span>" +
              params.name +
              "</span>" +
              "</div>" +
              "<div >" +
              '<span style="color:#fff;font-family:SourceHanSansCN-Bold;font-size:20px;letter-spacing:1.25px;font-weight:700;padding-left:10%">' +
              params.value +
              "</span>" +
              "</div>" +
              "</div>";
            return res;
          },
        },

解决方法：设置背景色和边框透明即可

        tooltip: {
          trigger: "item",
          backgroundColor: "transparent", // 修改背景颜色
          borderColor: "transparent", // 修改边框颜色
          formatter: function (params) {
            //使用formatter函数修改需要的样式
            let res = "";
            res +=
              `<div style="background:url(${require('../../assets/image/tooltipbg.png')}) no-repeat 100% 100%; width:111px;height:65px;">` +
              '<div style="color:#fff;padding:10% 1%;font-size:14px">' +
              '<span style="border:4px solid #fff;border-color:transparent transparent transparent #66FFFF">' +
              "</span>" +
              "<span>" +
              params.name +
              "</span>" +
              "</div>" +
              "<div >" +
              '<span style="color:#fff;font-family:SourceHanSansCN-Bold;font-size:20px;letter-spacing:1.25px;font-weight:700;padding-left:10%">' +
              params.value +
              "</span>" +
              "</div>" +
              "</div>";
            return res;
          },
        },

有更好方法的伙伴记得分享。