zoukankan      html  css  js  c++  java
  • echarts 中国地图提示框

    point: 鼠标位置,如 [20, 40]。

    params: 同 formatter 的参数相同。

    dom: tooltip 的 dom 对象。

    rect: 只有鼠标在图形上时有效,是一个用x, y, width, height四个属性表达的图形包围盒。

    size: 包括 dom 的尺寸和 echarts 容器的当前尺寸,例如:{contentSize: [width, height], viewSize: [width, height]}。

    好了既然了解回调参数,那么接下来就利用回调参数来进行更改,

    首先获取鼠标位置当然point,还是要跟随鼠标位置的,这里就不需要我们自己去计算了,

    然后将提示框的高度拿到,既然有dom,我们就操作dom,这里dom.dom.offsetHeight即为提示框高度,10这个值是对提示框的微调操作,

    是不是很简单主要代码如下:

    tooltip: {
            trigger: 'item',

            backgroundColor:'rgba(255,255,255,0.3)',

            padding:[10, 20],

            textStyle:{
            color:'#fff',

            fontSize:18,

            lineHeight:'30px'

            },

            position: function (point, params, dom, rect, size) {
          return [point[0]+10, point[1]-dom.offsetHeight -10];

      },

            formatter: function(params) {
            var res = '<center>栏目<center>'

                res+=params.name + ' : ' + params.value[2] + '&nbsp;台';

                return res;

            }

        },
    ————————————————
    版权声明:本文为CSDN博主「Mr.Tang's Blog」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/qq_27751965/article/details/89223277

  • 相关阅读:
    【Linux】Ubuntu 安装 openjdk8
    【算法】二分查找
    【算法】大规模排序
    【算法】小规模排序
    【算法】递归
    【数据结构】队列
    【Java】Windows 安装 JDK-13 并配置环境变量
    【数据库】关于 mysql 的执行顺序
    【数据结构】栈
    【数据结构】链表
  • 原文地址:https://www.cnblogs.com/rainbow-1/p/14567683.html
Copyright © 2011-2022 走看看