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

努力不够偷懒来凑

于 2023-06-21 09:15:48 发布

阅读量2.6k

点赞数

分类专栏： vue+echarts 文章标签： echarts vue.js

本文链接：https://blog.youkuaiyun.com/qq_32166301/article/details/131320845

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现的效果图样式

修改代码：

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;
              stude

最低0.47元/天解锁文章