vue+echarts中国地图鼠标悬停自定义弹窗样式（tooltip）

本文介绍了如何在Vue项目中使用ECharts库，结合CSS样式，实现中国地图鼠标悬停时的自定义弹窗提示框效果，提供了修改代码的详细步骤。

实现的效果图样式

修改代码：

tooltip: {
          className: "custom-tooltip-bk-box", //添加一个类名
          triggerOn: "mousemove", // 鼠标移动时触发
          axisPointer: {
            type: "none",
          },
          // 鼠标移到图里面的浮动提示框
          // formatter详细配置： https://echarts.baidu.com/option.html#tooltip.formatter
          formatter(params, ticket, callback) {
            // params.data 就是series配置项中的data数据遍历
            let deptTotal, schoolTotal, studentTotal;
            if (params.data) {
              deptTotal = params.data.value;
              schoolTotal = params.data.schoolTotal;
              studentTotal = params.data.studentTotal;
            } else {
              // 为了防止没有定义数据的时候报错写的
              deptTotal = 0;
              schoolTotal = 0;
              studentTotal = 0;
            }
            let htmlStr = `
              <div class="custom-tooltip-box">
                <div style='font-size:16px;'>河南：9</div>
                <div>
                  <div style='font-size: 16px;margin-top:6px; display:flex;align-items: center;'>
                    <p>学校数量</p>
                    <p style="margin-left: 30px;"><span style='color:#FFA500'>27</span>所</p>
                  </div>
                  <div style='font-size: 16px; display:flex;align-items: center;'>
                    <p>学生数量</p>
                    <p style="margin-left: 30px;"><span style='color:#4FF8FF'>6602</span>个</p>
                  </div>
                </div>
              </div>
            `;
            return htmlStr;
          },
          backgroundColor: "rgba(255,255,255,0)", //提示标签背景颜色 这里设置为了透明色
          textStyle: { color: "#fff" }, //提示标签字体颜色
        },

css样式修改：

:deep .custom-tooltip-bk-box {
      box-shadow: none !important;//去掉自带的阴影与边框
      border: none;
      border-width: 0 !important;
      .custom-tooltip-box {
        background: url(../../assets/images/tc-bg.png) no-repeat;
        background-size: 291px 126px;
        min-width: 300px;
        height: 130px;
        padding: 20px 30px 4px !important;
        p {
          line-height: 0px;
        }
      }
    }