ECharts--tooltip 提示框组件

1,343 阅读3分钟

提示框组件的通用介绍:

提示框组件可以设置在多种地方:

tooltip: {
        show: true, // 是否显示提示框组件。
        trigger: "item", // 1 item 数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。2 axis 坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用 3 none
        // 坐标轴指示器配置项。
        axisPointer: {
          type: "cross", // 指示器类型。1 'line' 直线指示器 2 'shadow' 阴影指示器 3 'none' 无指示器 4 'cross' 十字准星指示器。其实是种简写,表示启用两个正交的轴的 axisPointer。
          axis: "auto", // auto 指示器的坐标轴。可以是 'x', 'y', 'radius', 'angle'
          // 坐标轴指示器是否自动吸附到点上。默认自动判断
          snap: true, // 这个功能在数值轴和时间轴上比较有意义,可以自动寻找细小的数值点
          label: {
            show: true,
          },
          crossStyle: {
            width: 4,
            color: "red",
          },
        },
        showContent: true, // 是否显示提示框浮层 默认显示
        triggerOn: "mousemove", // 提示框触发的条件,可选:1 mousemove 2 click 3 mousemove|click 4 none
        // showDelay: 3000, // 浮层显示的延迟,单位为 ms,默认没有延迟,也不建议设置。在 triggerOn 为 'mousemove' 时有效。
        enterable: true, // 鼠标是否可进入提示框浮层中,默认为false,如需详情内交互,如添加链接,按钮,可设置为 true。
        renderMode: "html", // 浮层的渲染模式,默认以 'html 即额外的 DOM 节点展示 tooltip;此外还可以设置为 'richText' 表示以富文本的形式渲染
        confine: true, // 是否将 tooltip 框限制在图表的区域内。
        /* 当图表外层的 dom 被设置为 'overflow: hidden',或者移动端窄屏,导致 tooltip 超出外界被截断时,此配置比较有用。 */
        transitionDuration: 0, // 提示框浮层的移动动画过渡时间,单位是 s,设置为 0 的时候会紧跟着鼠标移动。
        position: "right", // 提示框浮层的位置,默认不设置时位置会跟随鼠标的位置。
        /* 
        Array
              通过数组表示提示框浮层的位置,支持数字设置绝对位置,百分比设置相对位置。
        Function 看文档
        inside top left right bottom    只在 trigger 为'item'的时候有效。
        */
        formatter: function (params) {
          return "名字" + params.name + "<br/>" + params.data + "$";
        }, // 官方文档
        /* 
        1. 字符串模板 formatter: '{b0}: {c0}<br />{b1}: {c1}'
        2. 回调函数  (params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]
        支持返回 HTML 字符串或者创建的 DOM 实例。
        */
        valueFormatter: (value) => "$" + value.toFixed(2), // tooltip 中数值显示部分的格式化回调函数。
        /* 回调函数格式:
        (value: number | string) => string 
        */
        backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。
        borderColor: "red", // 提示框浮层的边框颜色。
        borderWidth: 30, // 提示框浮层的边框宽。
        padding: 50, // 提示框浮层内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。
        /* 
        // 设置内边距为 5
          padding: 5
          // 设置上下的内边距为 5,左右的内边距为 10
          padding: [5, 10]
          // 分别设置四个方向的内边距
          padding: [
              5,  // 上
              10, // 右
              5,  // 下
              10, // 左
              ]
         */
        // 提示框浮层的文本样式。
        textStyle: { color: "black" },
        extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);", //额外附加到浮层的 css 样式。如下为浮层添加阴影的示例:
        order: "seriesAsc", // 多系列提示框浮层排列顺序。默认值为 'seriesAsc'
        /* 
          提示框排列顺序可选值:
            'seriesAsc'

            根据系列声明, 升序排列。

            'seriesDesc'

            根据系列声明, 降序排列。

            'valueAsc'

            根据数据值, 升序排列。

            'valueDesc'

            根据数据值, 降序排列。
        */
      },